关于watch的常见用法

首先来看一下vue官方给出的文档描述

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

类型: { [key: string]: string | Function | Object | Array }

简单来说 watch可以监听一个数据的改变,并且改变后让vue做点什么

1.最基础的用法:

　　有一个vue的组件,data里面有个name=张三,有个按钮绑定了changeName方法让name发生改变

<template>
  <button @click="changeName"></button>
</template>

<script>
  data() {
    return {
      name: "张三"
    } 
  },
  methods: {
　  changeName() {
　　  this.name = "李四"
    }
  }

</script>

　　然后来监听name这个数据,

watch: {
  name(newVal, oldVal) {
    console.log(`我改名了,我之前叫${oldVal},现在叫${newVal}`)      
  }  
}

 　　当我们点击这个按钮的时候,会发现控制台输出了"我改名了,我之前叫张三,现在叫李四"

　　可以发现监听对象触发的函数有两个形参,第一个形参是改变后的数据,而第二个形参是改变前的数据

　　这个时候我们把数据改造一下,实际工作中我们可能用到的数据是很复杂的.例如嵌套了好几层

data() {
  return {
    info: {
      name: "张三"
    }
  }
},
methods: {
  changeName() {
    this.info.name= "李四"
  }
},
watch: {
  info(newVal, oldVal){
    console.log("我发生了改变")
  }
}

　　这个时候发现,控制台上并没有任何的打印.这个是因为一般的监听是监听不到该数据下属性值的变化的.

　　于是vue也给我们提供了深度监听的方法.

2.进阶用法

　　深度监听只用添加一个属性: deep = true即可

watch: {
  info: {
    handler(newVal, oldVal) {
      console.log("我发生了改变", newVal, oldVal)
    }  
    deep: true
  }
}

　　加入了新属性之后,监听的数据对应的值不再是一个函数了,而是一个对象,原先的函数对应的是对象下面的handler的属性值,监听数组的话遵循vue的监听数组方法,这里不做多余的介绍

      以上可知,watch能监听到数据的改变,并且触发对应的函数,那如果现在有一个新的需求, 就是我在组件初始化的时候就需要知道这个人的姓名怎么办的?

 　 有人会说,那可以在created函数里面打印就可以了,但是这么做的话会造成代码的重复,如果是相同的功能的话就没有必要再去写一份重复的代码,vue也给我们提供了一个属性,那就是immediate,跟deep的用法一样,也是直接添加属性和属性值即可

watch: {
  info: {
    handler(newVal, oldVal) {
      console.log("我发生了改变", newVal, oldVal)
    }  
    deep: true,
    immediate: true  
  }
}

　　这样的话当你的组件初始化的时候,其实是监听器第一次绑定监听数据的时候,handler的这个函数就可以直接触发了,不需要借用created函数了,而且触发的时机是在created函数之前的.

3.注意事项

　　1.监听所触发的函数不能用箭头函数,使用箭头函数的时候,this指向的就不是当前的vue实例了

4.拓展

　　1.与computed之间的区别

　　我们知道vue实例下还提供了一个computed的对象,学名计算属性.也是可以通过数据的改变来进行某些操作.下面就简单来总结一下他们之间的区别,有时面试的时候也会问到

　　　　(1) 功能方面,两者都可以通过数据的改变来进行某些操作.但是watch只能对某一个数据进行监听,而computed的只要函数内部涉及到的变量发生改变,就都会重新进行计算.当然有利也有弊,当需要在数据变化时执行异步或开销较大的操作时，watch方式是最有用的。简单来说就是涉及异步操作然后需要设定不同中间值等，这时候就使用watch。

　　　　(2) 性能方面,由于computed计算有缓存.所以watch性能方面是差于computed的.不过依照上一点.watch适用于执行异步或开销较大的操作