Vue-监听属性

监听属性关键词:watch

可以通过watch来响应数据的变化

1.watch:用来监听每一个属性的变化
2.当属性发生改变那么就会触发watch函数,每个函数都会接受两个值,一个是新值,一个是旧值
3.我们可以在watch当中就行新旧值的判断来减少虚拟dom的渲染
4.只要是当前的属性值发生改变就会触发它所对应的函数

<body>
    <div class="watch">
        <p>计数器:{{count}}</p>
        <button @click="count++">点我</button>
    </div>
    <script>
        let vm = new Vue({
            el: '.watch',
            data: {
                count: 1
            }
        });
        vm.$watch('count', function (newValue, oldValue){
            //第一个参数为监听的数据
            //第二个参数为一个函数  函数的第一个形参是新数据 第二个是旧数据
            alert('计数器从'+oldValue+'变为了'+newValue);
        });
    </script>
</body>

运行上述代码:

监听属性可以监听数据的变化,并获取变化前和变化后的数据,并且可以通过函数对其进行操作

猜你喜欢

转载自www.cnblogs.com/qq166607/p/12303526.html