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）