从源代码中理解Vue2中的watch和computed的使用方法

Vue2是一个流行的前端框架，它采用了一种名为“响应式编程”的编程范式。响应式编程的核心思想是，当数据发生变化时，与该数据绑定的视图也会自动更新。Vue2通过watch和computed两个API来实现响应式编程。

一、watch

watch用于监听数据的变化，当数据发生变化时，执行相应的回调函数。watch有两种形式：函数形式和数组形式。

1.1 函数形式

watch: {
  name: function (newVal, oldVal) {
    // 当name发生变化时执行此回调函数
  }
}

1.2 数组形式

watch: [
  'name',
  function (newVal, oldVal) {
    // 当name发生变化时执行此回调函数
  }
]

函数形式的watch可以更方便地访问新值和旧值，而数组形式的watch则更简洁。

1.3 state.js

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count: {
      // 当count发生变化时执行此回调函数
      handler(newVal, oldVal) {
        console.log(`count changed from ${oldVal} to ${newVal}`)
      },
      // 立即执行一次回调函数
      immediate: true
    }
  }
}

1.4 observer/watcher.js

class Watcher {
  constructor(vm, expOrFn, cb, options) {
    this.vm = vm
    this.getter = parsePath(expOrFn)
    this.cb = cb
    this.options = options
    this.value = this.get()
  }

  get() {
    window.target = this // 当前watcher
    let value = this.getter.call(this.vm, this.vm)
    window.target = null // 重置
    return value
  }

  update() {
    const oldValue = this.value
    this.value = this.get()
    this.cb.call(this.vm, this.value, oldValue)
  }
}

二、computed

computed用于计算一个新的值，并将其作为响应式数据。computed属性的特点是：

• 它是基于其他响应式数据的计算结果。
• 当依赖的数据发生变化时，computed属性的值也会自动更新。

computed: {
  fullName: function () {
    return this.firstName + ' ' + this.lastName
  }
}

在源代码中，computed属性是通过一个叫做“依赖收集器”的机制实现的。当一个computed属性被访问时，依赖收集器会收集该属性所依赖的响应式数据。当这些响应式数据发生变化时，依赖收集器会通知computed属性，computed属性会重新计算其值。

总结

通过对Vue2中watch和computed的使用方法的分析，我们更深入地理解了Vue2是如何实现响应式编程的。watch用于监听数据的变化，并执行相应的回调函数。computed用于计算一个新的值，并将其作为响应式数据。通过这两个API，Vue2可以很好地实现数据与视图的绑定，从而构建出响应式的web应用程序。