移动端网站建设 新闻动态广州网站开发小程序
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 监听属性（watch）
目录
监听属性
监听值改变
使用watch实现
区别
总结
监听属性
通过watch来响应数据的变化。
虽然大多数情况计算属性都可以满足需要，但有时还是需要使用侦听器。当需要在数据发生变化时执行异步操作或者开销较大的操作时，就需要自定义监听器。
监听值改变
还是使用过滤应用的示例来做演示。
先绑定一个input事件。
示例如下：
<div id="box"><input type="text" @input="handleInput" v-model="mytext"><ul><li v-for="item in datalist" :key="item">{{item}}</li></ul>
</div>同步情况下 使用计算属性可以完成
但是异步情况下，如果请求后端需要使用method方法。
示例如下：
<script>let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de'],originList:['aa', 'bb', 'cc', 'dd', 'ee', 'de'],},methods:{handleInput() {console.log("input", this.mytext)// 模拟异步情况 使用2秒后响应setTimeout(() => {this.datalist = this.originList.filter(item => item.includes(this.mytext))}, 2000)}}})
</script>使用watch实现
去掉input上的input事件，然后增加watch。
示例如下：
<script>let vm = new Vue({el:'#box',data: {mytext:'',datalist:['aa', 'bb', 'cc', 'dd', 'ee', 'de'],originList:['aa', 'bb', 'cc', 'dd', 'ee', 'de'],},watch: {mytext(newVal) {console.log("改变了", newVal)// 模拟异步情况 使用2秒后响应setTimeout(() => {this.datalist = this.originList.filter(item => item.includes(this.mytext))}, 2000)}}})
</script>区别
1.data => 状态，被拦截
2.方法 ==》 事件绑定，逻辑计算。可以不用return，没有缓存
3.计算属性（重视结果）=》 解决模版过重问题，必须有return，只求结果，有缓存，同步。
4.watch（重视过程），监听一个值的改变。不用返回值，异步同步。
总结
Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 监听属性（watch）