2.6、侦听属性的变化-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_59152833/article/details/144422360

2.6.1、侦听属性作用

侦听属性的变化其实就是监视某个属性的变化。当被监视的属性一旦发生改变时，执行某段代码。

2.6.2、watch配置项

监视属性变化时需要使用watch配置项
可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
i.可以监视Vue的原有属性
ii.如果监视的属性具有多级结构，一定要添加单引号：'a.b'
iii.无法直接监视对象深层次属性，如a.b，b属性压根不存在。
iv.启用深度监视，默认是不开启深度监视的。
v.也可以监视计算属性

2.6.3、如何深度监视：

(1) 监视多级结构中某个属性的变化，写法是：’a.b.c’ : {}。注意单引号哦。
(2) 监视多级结构中所有属性的变化，可以通过添加深度监视来完成：deep : true

2.6.4、如何后期添加监视：

(1) 调用API：vm.$watch(‘number1’, {})

2.6.5、 watch的简写：

(1) 简写的前提：当不需要配置immediate和deep时，可以简写。

(2) 如何简写？

① watch:{

number1(newVal,oldVal){},

number2(newVal, oldVal){}

}

(3) 后期添加的监视如何简写？

① vm.$watch(‘number1’, function(newVal, oldVal){})

  <body>
    <div id="app">
      <h1>{{msg}}</h1>
      数字：<input type="text" v-model="number" /><br />
      数字：<input type="text" v-model="a.b" /><br />
      数字：<input type="text" v-model="a.c" /><br />
      数字：<input type="text" v-model="a.d.e.f" /><br />
      数字(后期添加监视)：<input type="text" v-model="number2" /><br />
    </div>
    <script>
      const vm = new Vue({
        el: "#app",
        data: {
          msg: "侦听属性的变化",
          // 原有属性
          number: 0,
          //   多层次属性
          a: {
            b: 0,
            c: 0,
            d: {
              e: {
                f: 0,
              },
            },
          },
          number2: 0,
        },
        // 计算属性
        computed: {
          hehe() {
            return "haha" + this.number;
          },
        },
        watch: {
          //1、可以监视多个属性，监视哪个属性，请把这个属性的名字拿过来即可。
          //1.1 可以监视Vue的原有属性
          /* number : {
            // 初始化的时候，调用一次handler方法。
            immediate : true,
            // 这里有一个固定写死的方法，方法名必须叫做：handler
            // handler方法什么时候被调用呢？当被监视的属性发生变化的时候，handler就会自动调用一次。
            // handler方法上有两个参数：第一个参数newValue，第二个参数是oldValue
            // newValue是属性值改变之后的新值。
            // oldValue是属性值改变之前的旧值。
            handler(newValue, oldValue){
                console.log(newValue, oldValue)
                // this是当前的Vue实例。
                // 如果该函数是箭头函数，这个this是window对象。不建议使用箭头函数。
                console.log(this)
            }
                }, */
          //1.2 如果监视的属性具有多级结构，一定要添加单引号：'a.b'
          /* 'a.b' : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                },

                'a.c' : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                }, */
          // 无法监视b属性，因为b属性压根不存在。
          /* b : {  
                    handler(newValue, oldValue){
                        console.log('@')
                    } 
                } */
          //1.3 启用深度监视，默认是不开启深度监视的。
          a: {
            // 什么时候开启深度监视：当你需要监视一个具有多级结构的属性，并且监视所有的属性，需要启用深度监视。
            deep: true,
            handler(newValue, oldValue) {
              console.log("@");
            },
          },
          //1.4 也可以监视计算属性
          /* hehe : {
                    handler(a , b){
                        console.log(a, b)
                    }
                } */

          //2、 监视某个属性的时候，也有简写形式，什么时候启用简写形式？
          // 当只有handler回调函数的时候，可以使用简写形式。
          number(newValue, oldValue) {
            console.log(newValue, oldValue);
          },
        },
      });

      //3、 如何后期添加监视？调用Vue相关的API即可。
      //3.1 语法：vm.$watch('被监视的属性名', {})
      /* vm.$watch('number2', {
            immediate : true,
            deep : true,
            handler(newValue, oldValue){
                console.log(newValue, oldValue)
            }
        }) */

      //3.2 这是后期添加监视的简写形式。
      vm.$watch("number2", function (newValue, oldValue) {
        console.log(newValue, oldValue);
      });
    </script>
  </body>