vue怎么使用watch监听属性

这篇文章主要介绍了vue怎么使用watch监听属性的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇vue怎么使用watch监听属性文章都会有所收获，下面我们一起来看看吧。

基本用法

Vue watch最重要的使用场景是根据某属性的变化执行某些业务逻辑:

watch的基本用法很简单：针对需要监听的属性定义个同名的函数即可，函数的第一个参数为变化后的值，第二个参数为变化前的值。

监听object

首先我们回顾一个JavaScript中的概念：复杂数据变量。"复杂"的原因在于变量只是一个引用，和C++中的指针类似，其保存的不是真实的数据，而是数据的地址。

比如对于一个object变量来说，添加属性、删除属性、修改属性的值都不会改变这个地址，这也可以说这个object变量没有变化。

不管所用的框架如何，基本定理肯定是生效的，所以Vue中监听object也是一难题，特别是嵌套数据的监听。

这里的变化指的是地址的变化，能够触发变化最简单的方式就是重新赋值。

针对counter的监听不会被触发，因为this.counter[type] += 1;并不会使this.counter变化（地址没变）。那如果想要监听到这个变化应该怎么办呢？一般来说有两种方式：

使用deep参数

watch: {  counter: {    handler: function(newV, oldV) {      console.log('counter change to %o from %o', newV, oldV);    },    deep: true,  }}

使用deep需要使用watch的完整形式：handler是监听回调函数，deep: true指定了不仅仅监听counter的变化，也监听其内部属性的变化，所以当counter.up或counter.down变化时才能出发handler回调。

重新赋值

methods: {  onTrigger: function(type) {    // 重新赋值触发变化    this.counter = {      ...this.counter,      [type]: this.counter[type] + 1,    };  }},watch: {  counter: function(newV, oldV) {    // 不会被触发    console.log('counter change to %o from %o', newV, oldV);  },}

那两种方式优劣如何呢？使用deep参数会为数据每一层都添加监听，当层级较深时比较耗费性能，而且Vue不能监听到属性的添加或删除。

所以一般来说使用重新赋值的方式是较优的方案，但如果只是想监听内部嵌

套数据的话，重新赋值就比较重了，所以Vue也提供了直接监听嵌套属性变化的途径：

通过路径监听内部数据

watch: {  'counter.up': function(newV, oldV) {    console.log('counter.up change to %d from %d', newV, oldV);  },  'counter.down': function(newV, oldV) {    console.log('counter.down change to %d from %d', newV, oldV);  },}

通过这种方式可以避免使用deep造成的性能消耗问题，当只对某内部属性变化作出响应的场景下比较合适，但仍要注意监听的路径数据仍是复杂数据时的场景。

初始化变量触发监听回调

使用watch监听变化时，给变量初始值不会触发监听函数，如果像要改变这个默认设定可以使用immediate参数，其用法和deep类似：

watch: {  counter: {    handler: function(newV, oldV) {      console.log('counter change to %o from %o', newV, oldV);    },    immediate: true,  }}

这样在赋初值时就会触发监听函数，其中第一个参数为初始值，第二个参数为undefined。

关于"vue怎么使用watch监听属性"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"vue怎么使用watch监听属性"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。