Vue-监听属性
Posted qq166607
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>运行上述代码：
监听属性可以监听数据的变化，并获取变化前和变化后的数据，并且可以通过函数对其进行操作
以上是关于Vue-监听属性的主要内容，如果未能解决你的问题，请参考以下文章