vue-watch

Posted 2023-04-04

参考技术A title: vue-watch数组和对象
date: 2017-03-21

本文通过示例介绍vue如何监听数组和对象的变化。

数组更新检测

这部分仅支持通过下列方法操作数组

针对array[index]=newVal可采用Vue.set(array, index, newValue)或者array.splice(index, 1, newValue)代替；

针对array.length=newVal可采用array.splice(newLength)代替；

watch选项

实例watch

响应式原理/变化检测

watch选项”watch vue实例data中的“对象属性”变化：

vue实例watch data中的“对象属性”变化：

如果希望在过程中添加响应式对象属性，则可通过Vue.set(obj,'propetyName',val)或者vm.$set(obj,'propetyName',val);

如果希望在过程中批量添加响应式对象属性，可采用this.someObject = Object.assign(, this.someObject, a: 1, b: 2 )；此时，handler函数接收的oldVal是原obj，newVal是变化后的obj；

监听数组中对象的变化：

说明：配置了deep为true后，vue会监听对象属性的变化，如果对象属性是引用类型的，则会深入监听，深入监听的规则与以上监听数组、对象规则一致，如：

arr[0].a.b.c.push(3);会被监听到

vm.$set(vm.arr[0].a.b,'propetyName',val);会被监听到

等等……

vue-watch监听的方法

在vue中，很多时候需要实时了解数据的变化执行相应的操作，通过watch监听能实现相应需求。

<div>
      <p>inputOne: <input type="text" v-model="value1"></p>
      <p>inputTwo: <input type="text" v-model="valueObj.value2"></p>
</div> 

　　

1、注册watch

export default {
    name: \'demo\',
    watch: {
　　　　value1(newVlue, oldValue) {
　　　　　　this.value = newValue + \'bbb\'
　　　　　　console.log(this.value）
　　　　}
　　},
    data() {
      return {
　　　　　　value: \'aaa\',
          value1：\'\',
          valueObj: {
             value2: \'\',
          }
      }
    }        
} 

　　在inputOne输入123后，监听到value1的改变，打印出value的值：123bbb

 

2、handler方法

 watch中需要具体执行的方法，监听数组或对象的属性时用到的方法

 

watch: {
　　　　value1：{
                handler（newVal，oldVal）{
                    this.value = newVal + \'ccc\'
                },
                immediate:true
           }
    },    

　　

3、immediate属性

 

　　在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调，默认为false

 

 4、deep属性

 

　　监听对象或对象中的属性，需要使用deep，即深度监听。

　　在对象中层层遍历，并在监听对象上的每一个属性上都添加监听，当然这样也会损耗性能

watch: {
　　　　valueObj：{
                handler（newVal，oldVal）{
                    this.value = newVal + ddd\'
                },
                deep:true
           }
    },  
 
或者：直接监听属性，避免给所有属性监听而损耗性能。
　　watch: {
　　　　\'valueObj.value2\'：{
                handler（newVal，oldVal）{
                    this.value = newVal + \'eee\'
                },
　　　　　　　　　　　immediate: true,　
                  deep:true
           }
    }, 

　　

5、watch监听路由

watch: {
    \'$route\'(to,from){
      console.log(to);   //to表示去往的界面
      console.log(from); //from表示来自于哪个界面
      if(to.path=="/home"){
        console.log("路由跳转home");
      }
    }
  },