vue学习路线（10.监视属性-watch）

一、用案例引出监视属性 watch

案例：点击'切换天气'按钮，页面红色文字发生变化（如果是凉爽改为炎热，如果是炎热改为凉爽），同时控制台打印变化日志。

1、普通写法

xml 复制代码

<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="changeWeather">切换天气</button>

kotlin 复制代码

data() {
    return {
        isHot: false,
    };
},
computed: {
    info() {
        return this.isHot ? "炎热" : "凉爽";
    },
},
methods: {
    changeWeather() {
        this.isHot = !this.isHot;
        console.log("天气变化了，现在是：" + this.info + "，原来是" + (this.isHot ? "凉爽" : "炎热"));
    }
},

2、new Vue时传入watch配置

当属性变化时，回调函数自动调用，在函数内部进行计算。

xml 复制代码

<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>

javascript 复制代码

data() {
    return {
        isHot: false,
    };
},
computed: {
    info() {
        return this.isHot ? "炎热" : "凉爽";
    },
},
watch: {
     info: {
         handler(newValue, oldValue) {
             console.log("天气变化了，现在是：" + newValue + "，原来是" + oldValue);
         },
      },
},

3、通过vm.$watch监视

两种watch用法，handler内部写法一致

xml 复制代码

<h2>今天天气很
    <span style="color: red">{{info}}</span>
</h2>
<button @click="isHot = !isHot">切换天气</button>

javascript 复制代码

      const vm = new Vue({
        el: "#app",
        data() {
          return {
            isHot: false,
          };
        },
        computed: {
          info() {
            return this.isHot ? "炎热" : "凉爽";
          },
        },
      });

      vm.$watch("info", {
        handler(newValue, oldValue) {
          console.log("天气变化了，现在是：" + newValue + "，原来是" + oldValue);
        },
      });

二、watch 的特点

1. 当被监视的属性发生变化时，回调函数自动调用，进行相关操作；
1. 监视的属性必须存在，才能进行监视！！
1. 监视的两种写法：
1）new Vue时传入watch配置

2）通过vm.$watch监视

三、watch 属性的选项

immediate: true：表示在监听开始时立即执行回调函数，而不是等到数据变化时才执行。
deep: true：表示深度监听，适用于监听对象或数组的变化。

javascript 复制代码

 watch: {
          info: {
            immediate:true,//默认false。改为true表示立即执行回调函数。
            deep:true,// 默认false。深度监听，适用于监听对象或数组
            handler(newValue, oldValue) {
              console.log("天气变化了，现在是：" + newValue + "，原来是" + oldValue);
            },
          },
        },

四、watch 监视属性简写

当配置项只有handler时，可以简写
不能写成箭头函数

1、new Vue时传入watch配置（简写）

javascript 复制代码

watch: {
    info(newValue, oldValue) {
        console.log("天气变化了，现在是：" + newValue + "，原来是" + oldValue);
    },
},

2、通过vm.$watch监视（简写）

javascript 复制代码

vm.$watch("info", function (newValue, oldValue) {
    console.log("天气变化了，现在是：" + newValue + "，原来是" + oldValue);
});

五、watch 深度监视特点

1、深度监听特点

1.vue中的watch默认不监测对象内部值的改变（一层）。
2.配置deep:true可以监测对象内部值的改变（多层）。

2、深度监听案例

less 复制代码

      <h3>a的值是{{numbers.a}}</h3>
      <button @click="numbers.a++">点我a+1</button>
      <h3>b的值是{{numbers.b}}</h3>
      <button @click="numbers.b++">点我b+1</button>

css 复制代码

        data() {
          return {
            numbers: {
              a: 1,
              b: 1,
            },
          };
        },

实现一：只监视a，不监视b（监视多级结构中某个属性的变化）

javascript 复制代码

        watch: {
          // 只监视a，不监视b
           'numbers.a': {
              handler(newValue, oldValue) {
                console.log(newValue,oldValue);
              },
            },
        },

实现二：深度监听number变化（监视多级结构中所有属性的变化）

javascript 复制代码

        watch: {
          //深度监听
           'numbers': {
            deep:true,//开启深度监听
              handler(newValue, oldValue) {
                console.log('numbers变化了');
              },
            },
        },

3、备注

1.vue自身可以监测对象内部值的改变，但vue提供的watch默认不可以（为了效率）。
2.使用watch时根据数据的具体结构，决定是否采用深度监听。