watch中的深度监听

Silent Land

已于 2022-08-07 21:16:37 修改

阅读量4.1w

点赞数 21

分类专栏： # Vue2 experience 文章标签： javascript vue.js 前端

于 2020-11-26 11:29:29 首次发布

本文链接：https://blog.csdn.net/weixin_44757417/article/details/110181404

版权

Vue2 同时被 2 个专栏收录

36 篇文章 3 订阅

订阅专栏

experience

29 篇文章 0 订阅

订阅专栏

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深度监听

deep 为true开启，默认为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')
    }
  },