Vue 渐进式JavaScript 框架 基于Vue2的学习笔记 - Vue 监听属性（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）