Vue 的 watch 原来可以这样监听数据

watch 的作用可以监控一个值的变换，并调用因为变化需要执行的方法。可以通过watch动态改变关联的状态，通常有三种写法写法。

第一种: 普通用法

export default {
  data: {
    testName: 'testNameTxt'
  },
  watch: {
    testName(newName, oldName) {
      // ... do something
      this.nameChange();
    }
  },
  methods:{
    nameChange(){
      // ... do something
    }
  }
}

直接写一个监听处理函数，当每次监听到 cityName 值发生改变时，执行函数。
也可以在所监听的数据后面直接加字符串形式的方法名：

export default {
  data: {
    testName: 'testNameTxt'
  },
  watch: {
    testName: 'nameChange'
  },
  methods:{
    nameChange(){
      // ... do something
    }
  }
}

第二种: immediate 和 handler

如第一种使用 watch 时有一个特点 : 当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。

如果我们需要在最初绑定值的时候也执行函数，又该怎么办呢 ?
这时就需要用到 immediate 属性。

举个栗子

比如当父组件向子组件动态传值时，子组件props首次获取到父组件传来的默认值时，也需要执行函数，此时需要将 immediate 设为 true 即可。

export default {
 data: {
   testName: 'testNameTxt'
 },
 watch: {
   testNam{
     handler(newName, oldName) {
        // ... do something
        this.nameChange();
     },
     immediate: true
   }
 },
 methods:{
   nameChange(){
     // ... do something
   }
 }
}

监听的数据后面写成对象形式，包含 handler 方法和 immediate，之前我们写的函数其实就是在写这个 handler 方法；

immediate 表示在watch中首次绑定的时候，是否执行 handler，值为true则表示在watch中声明的时候，就立即执行handler方法，值为false，则和一般使用watch一样，在数据发生变化的时候才执行handler。

让 handler 指向 methods 中的方法

watch: {
    studen: {
        handler: 'sayHello',
        immediate: true  // 创建组件后立即执行一次
    }
},
methods: {
    sayHello() {
        console.log(this.studen)
    }
}

触发多个监听方法，使用数组可以设置多项，形式包括字符串、函数、对象

watch: {
    name: [
        'sayHello1',
        function(newVal, oldVal) {
            // ...
        },
        {
            handler: 'sayHello2',
            immaediate: true
        }
    ]
},
methods: {
    sayHello1() {
        console.log('sayHello1==>', this.name)
    },
    sayHello2() {
        console.log('sayHello2==>', this.name)
    }
}

第三种: deep 深度监听

当需要监听一个对象的改变时，普通的 watch 方法无法监听到对象内部属性的改变，只有 data 中的数据才能够监听到变化，此时就需要deep属性对对象进行深度监听。

export default {
  data: {
    testObj: {name:'test', age:18}
  },
  watch: {
    testObj: {
      handler(newName, oldName){
        // ... do something
        this.nameChange();
      },
      deep: true,
      immediate: true
    }
  },
  methods:{
    nameChange(){
      // ... do something
    }
  }
}

设置 deep: true 则可以监听到 testObj.name 的变化，此时会给 testObj 的所有属性都加上这个监听器，当对象属性较多时，每个属性值的变化都会执行 handler。
如果只需要监听对象中的一个属性值，还可以这样写(使用字符串的形式监听对象属性):

export default {
  data: {
    testObj: {name:'test', age:18}
  },
  watch: {
    'testObj.name': {
      handler(newName, oldName){
        // ... do something
        this.nameChange();
      },
      deep: true,
      immediate: true
    }
  },
  methods:{
    nameChange(){
      // ... do something
    }
  }
}

好啦, watch的三种使用方法到这就结束了, 希望能帮助到你呦, 欢迎点赞, 留言~

最后编辑于：2020.07.15 10:07:57