vue watch的使用

vue模板

<template>
    <input type="text" v-model="name"/>
</template>

<script>
export default {
    data(){
        return{
            name:'',
        }
    },
}
</script>

一：常用用法 值第一次绑定的时候，不会执行监听函数

//1、
watch: {
    name(newVal,oldVal) {
      // ...
    }
},

//2、
watch: {
  'name': function (val) {
    
  }
},

用法二：立即执行(immediate和handler)

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

watch: {
    name: {
    　　handler(newVal,oldVal) {
    　　// ...
    　　},
    　　immediate: true
    }
} 

用法三：深度监听

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

dat(){
   return {
     person: {id: 1, name: '咸鱼'}
   }
},
watch: {
    person: {
      handler(newVal,oldVal) {
      // ...
      },
      deep: true,
      immediate: true
    }
} 

设置deep: true 时会给person的所有属性都加上这个监听器。如果只需要监听对象中的一个属性值，则可以使用字符串的形式监听：

watch: {
    'person.name': {
      handler(newVal,oldVal) {
      // ...
      },
      deep: true,
      immediate: true
    }
}

数组（一维、多维）的变化不需要通过深度监听，对象数组中对象的属性变化则需要deep深度监听。