Vue 监听属性（watch）

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）