vue源码解析—— watch/computed的实现逻辑和区别

watch 和 computed 是 Vue 中的两个重要的响应式属性，它们在实现机制和使用上存在一些区别。

• watch：用于监听数据的变化，并在数据变化时执行回调函数。可以使用 deep 配置项来开启深度监听，监听数据的子属性变化。可以使用 immediate 配置项来立即执行回调函数。
• computed：用于计算数据，并在数据变化时重新计算数据。可以使用 get 函数来计算数据，并在依赖的数据变化时重新计算数据。可以使用 set 函数来设置数据，并在数据变化时执行回调函数。

  Vue 2 中，使用 Object.defineProperty 来实现数据响应式，并且在数据变化时通过 getter 函数来依赖收集和发布订阅。在 Vue 3 中，使用 Proxy 来实现数据响应式，并且在数据变化时通过 get 函数来依赖收集和发布订阅。这也导致了在源码实现上vue2和vue3的不同。

watch 和 computed

watch用法

watch 用于监听数据的变化，当数据变化时，可以执行相应的操作。它可以用在数据的深层次监听、异步操作、或者需要在数据变化后执行某个操作的场景。

new Vue({
  data: {
    message: 'hello'
  },
  watch: {
    message(newVal, oldVal) {
      console.log('message changed:', newVal, oldVal)
    }
  }
})

在上面的例子中，我们监听了 message 数据的变化，当 message 数据变化时，就会执行 console.log 函数。 

watch 还有一些高级用法，比如监听对象的变化，可以使用 deep 选项，如下： 

new Vue({
  data: {
    user: {
      name: 'John',
      age: 27
    }
  },
  watch: {
    user: {
      handler(newVal, oldVal) {
        console.log('user changed:', newVal, oldVal)
      },
      deep: true
    }
  }
})

computed用法

computed 用于计算数据，它可以基于数据的变化，动态地计算出新的数据。computed 的值会被缓存，只有当它依赖的数据发生变化时，才会重新计算。

computed 的基本用法如下：

new Vue({
  data: {
    message: 'hello',
    r