vue watch数据监听

概念：监听数据变化，当数据更新是自动执行函数

应用场景：搜索数据、当一个数据发生了变化需要进行二外的操作时需要用到watch。

1、语法：（与data，methods同级）

1.1、监听的变量(newVal, aldVal){}

1.2、监听的变量：{handler(newVal, aldVal){},属性}
 

2接收两个参数：

第一个newVal为改变后的数据，第二个aldVal为改变前的数据：

watch: {
    name(newVal, aldVal) {
      console.log(
        "发生了修改。" + "修改后： " + newVal + "  修改前： " + aldVal
      );
    },
}

应用场景：

什么时候用？

当数据发生改变后，需要额外做其他的操作时（复杂逻辑应用，可能包含异步）

3属性

默认为数据发生改变后执行监听，可通过属性改变：

immediate: true 立刻监听

语法：

watch:{
    数据名: {
        handler(newVal, aldVal) {
            console.log("发生了修改。" + "修改后： " + newVal + "  修改前： " + aldVal);
        },
        // 立即监听属性
        immediate: true,
    },
}

deep:true 深度监听

应用场景：对象的监听

注意点：一般情况下不会用深度监听，一般直接监听对象中具体某一个属性

语法：

user: {
  handler(newVal, aldVal) {
    console.log(
      "发生了修改。" + "修改后： " , newVal , "  修改前： " ,aldVal
    );
  },
    // 深度监听
    deep:true
},

deep优化:

直接监听对象中具体某一个属性

"obj.age": {
    handler(val, oldVal) {
        console.log(val, oldVal);
    },
    deep: true,
    immediate: true,		// 此时监听的数据不是一个对象，可以使用immediate
}