vue之watch总结

1、immediate属性

<div class="main">
  fullName: <span>{{fullName}}</span><br>
  <input type="text" v-model="lastName">
</div>
  data () {
    return {
      firstName: 'zhang',
      lastName: 'hang',
      fullName: ''
    }
  },
   watch: {
    lastName (val, oldVal) {
      this.fullName = this.firstName + val
    }
 }   

上面的代码是通过监听lastName的变化，在页面显示对应的fullName值。我们刚打开页面的时候发现fullName的值是空的，这是因为watch里面的lastName方法在第一次是不会执行的，只有data里面的lastName改变时它才会执行。如果我们想要它一开始就执行有没有什么方法呢？方法就是添加immediate属性，我们修改之后的代码如下

// immediate:true代表如果在 wacth 里声明了 lastName 之后，就会立即先去执行里面的handler方法
    lastName: {
      handler (val, oldVal) {
        this.fullName = this.firstName + val
      },
      immediate: true
    }

修改之后再次查看页面我们发现fullName对应的值就变成了zhanghang了。

2、deep属性

我们在data里面定义一个obj对象，obj里面有个值为helllo的a属性，我们想在watch里面监听obj的a属性

   <div class="main">
     obj.a: <span>{{obj.a}}</span><br>
     <input type="text" v-model="obj.a">
   </div>
     data () {
    return {
      firstName: 'zhang',
      lastName: 'hang',
      fullName: '',
      obj: {
        a: 'hello'
      }
    }
  },
  watch: {
      obj: {
      handler (val, oldVal) {
        console.log('val====', val)
      }
    }
  }

我们改变obj.a，发现页面值变化了，但是watch里面并没有打印。原来是因为默认情况下 handler 只监听obj这个属性它的引用的变化，我们只有给obj赋值的时候它才会监听到。现在我们要监听它的属性就需要用到deep属性了。

watch: {
    obj: {
      handler (val, oldVal) {
        console.log('val====', val)
      },
      deep: true
    }
}

这样我们就能监听到obj的a属性变化了。
在这里我们也可以使用字符串的形式直接监听a属性

watch: {
   'obj.a': {
      handler (val, oldVal) {
        console.log('val====', val)
      }
    }
}

3、watch监听数组

  data () {
    return {
      arr: ['js', 'html', 'css', 'vue', 'react']
    }
  },
  methods: {
    cli() {
       this.arr.push('less')
    }
  },
  watch: {
    arr:{
      handler(val, oldVal) {
        console.log('val====', val)
      }
    }
  }

当我们通过push方法改变数组时，watch是能够正常监听到数组的变化的。

注意：通过以下两种方式改变数组watch监听不到
（1）当你利用索引直接设置一个项时，比如：this.arr[1] = ‘less’
（2）直接修改数组长度，比如：this.arr.length = 4

有两种方法可以解决第一种watch监听不到的方式：
方法一：利用数组的splice方法

this.arr.splice(1,1,‘less’)

方法二：利用vue的$set

this.$set(this.arr, 1, ‘sass’)

解决第二种watch监听不到的方法同样可以使用数组的splice方法
this.arr.splice(3)

4、watch监听对象

我们在前面介绍deep属性时知道使用deep属性可以监听到对象的每一个属性，但是我们发现如果我们新增或者删除对象的某个属性时，watch就又监听不到了 。

  data () {
    return {
      firstName: 'zhang',
      lastName: 'hang',
      fullName: '',
      obj: {
        a: 'hello'
      },
      arr: ['js', 'html', 'css', 'vue', 'react']
    }
  },
    methods: {
    cli() {
     // 新增b属性
      this.obj.b = 'world'
      console.log('this.obj====', this.obj)
    }
  },
  watch: {
      obj: {
      handler (val, oldVal) {
        console.log('obj  val====', val)
      },
      deep: true
    },
  }

运行上面代码，watch里面并没有打印。同样我们可以使用vue.$set来新增属性。

 methods: {
    cli() {
      this.$set(this.obj, 'b', 'world')  
    }
  },

删除某个属性使用vue.$delete