Vue之watch源码解读

回顾 watch 的用法

watch 是 Vue 中的一个监听数据变化的一个方法，我们在阅读源码之前先来回顾一下 watch 的用法

监听基本数据类型

<div>
  {
  { name }}
  <button @click="changeName">改变name</button>
</div>

export default {
  data() {
    return {
      name: 'maoxiaoxing',
    }
  },
  watch: {
    name(val, oldval) {
      console.log(val, oldval)
    }
  },
  methods: {
    changeName() {
      this.name = this.name === 'maoxiaoxing' ? 'yangxiaoA' : 'maoxiaoxing'
    }
  }
}

watch 可以接收两个参数，一个是变化之后的数据，一个是变化之前的数据，你可以基于这两个值处理一些逻辑

监听对象

<div>
  {
  { obj.name }}
  <button @click="changeName">改变name</button>
</div>

export default {
  data() {
    return {
      obj: {
        name: 'maoxiaoxing',
      }
    }
  },
  watch: {
    obj: {
      handler(val, oldval) {
        console.log(val, old