watch

用于观察一个表达式或computed函数在Vue.js实例上的变化。回调函数调用时会从参数得到新数据(new value)旧数据(old value)。表达式只接受以点分割的路径,例如obj,obj.a.如果是比较复杂的表达式,可以用函数代替表达式。


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    姓名:<input type="text" v-model="obj.name"><br>
    年龄:<input type="text " v-model="obj.age"><br>
    <button @click="fn">
      点我修改
    </button>
  </div>
</body>
<script src="./vue.js"></script>
<script>
  // watch:
  // 1.只要被监听的数据发生改变,就会触发对应的逻辑代码
  // 2.如果被监听的数据是个对象,对象中的属性发生改变时,监听是不会触发上的


  let vm = new Vue({
    el: '#app',
    data: {
      obj: {
        name: "xiaoming",
        age: 18
      }
    },
    watch: {
    // 如果被监听的数据是个对象,对象中的属性发生改变时,监听是不会触发上的
      // obj: function () {
      //   console.log('obj改变了');
      // },
      // 单独监听obj中的name属性,只要其修改watch就会触发
      'obj.name': function (newValue, oldValue) {
      	// newValue为新值
      	// oldValue为旧值
      	console.log('obj改变了');
        console.log('obj改变了');
      }
    },
    methods: {
      fn() {
        this.obj = {} // 修改了obj中的内在指向
        // this.obj.name = "zhansang" //还是在obj中内存中修改不会触发watch
      }
    },
  })
</script>

</html>

watch深度监听

  • deeptrue开启,默认为false
  • 开启深度监听:只要obj中的任何一个属性发生改变,都会触发相应的代码
  • 数组也是同样如此
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="app">
      姓名:<input type="text" v-model="obj.name" /><br />
      年龄:<input type="text " v-model="obj.age" /><br />
    </div>
  </body>
  <script src="./vue.js"></script>
  <script>
    // watch:
    // 1.只要被监听的数据发生改变,就会触发对应的逻辑代码
    // 2.如果被监听的数据是个对象,对象中的属性发生改变时,监听是不会触发上的

    let vm = new Vue({
      el: '#app',
      data: {
        obj: {
          name: 'xiaoming',
          age: 18
        }
      },
      watch: {
        obj: {
          handler: function () {
            console.log('obj改变了')
          },
          // 开启深度监听:只要obj中的任何一个属性发生改变,都会触发相应的代码
          deep: true
        }
      }
    })
  </script>
</html>

watch的immediate

  • 在选项中指定immediate: true,将立即以表达式的当前值触发回调
 watch: {
        obj.name: {
          handler: function () {
            console.log('obj改变了')
          },
          // 立即以obj.name的当前值触发回调
          immediate: true
        }
      }

watch的数组格式

传入的回调数组,它们会被逐一调用

  • 有时我们需要在某一变量中调用多个操作
  watch: {
    'obj.name': {
      handler () {
        this.fn1 ()
        this.fn2 ()
      },
      immediate: true,
      deep: true
   	}
  },

  methods: {
    fn1 () {
      console.log('执行了fn1')
    },
    fn2 () {
       console.log('执行了fn2')
    } 
  }
  • fn1,fn2都需要在value变动的时候调用,如果需要两者的调用时机不同,以上写法就无法实现了,这就需要用到watch的数组格式了
  watch: {
    'obj.name': [
      {
      handler () {
        this.fn1 ()
      },
        deep: true
      },
      // 进入需立即执行一次fn2
      {
        handler () {
        this.fn2 ()
      },
        deep: true,
        immediate: true
      }
    ]
  },

  methods: {
    fn1 () {
      console.log('执行了fn1')
    },
    fn2 () {
       console.log('执行了fn2')
    }
  },

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐