vue2 computed实现原理

在 Vue 2 的实现中，`computed` 属性是一个对象，它的属性是计算属性的名称，值是一个函数，用于计算计算属性的值。例如：

new Vue({
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

在这个例子中，`reversedMessage` 是一个计算属性的名称，它的值是一个函数，用于计算 `message` 属性的反转字符串。

Vue 2 的 `computed` 实现原理如下：

1. 在组件实例化时，Vue 会遍历 `computed` 对象，将每个计算属性转换为一个响应式对象。

2. 每个计算属性对象都有一个 `get` 方法和一个 `set` 方法。当计算属性被读取时，Vue 会调用 `get` 方法计算计算属性的值，当计算属性被设置时，Vue 会调用 `set` 方法。

3. 在计算属性的 `get` 方法中，Vue 会检查计算属性所依赖的数据是否发生了变化。如果依赖的数据发生了变化，Vue 会重新计算计算属性的值。

4. 在计算属性的 `set` 方法中，Vue 会将新的值存储到计算属性对应的响应式对象中，并触发视图更新。

总的来说，Vue 2 的 `computed` 实现原理就是将计算属性转换为响应式对象，并在计算属性被读取时计算属性的值，依赖的数据发生变化时重新计算计算属性的值。