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）