剖析Vue2源码——数据响应性的内核：initData与observe机制

2023-11-19 08:42:10

前言

Vue.js是一个受欢迎的前端框架，它提供了数据响应系统，使开发人员能够轻松地构建交互式用户界面。在Vue2中，initData和observer机制是数据响应性的核心，它们负责将数据与视图进行关联，并保证当数据发生变化时，视图能够自动更新。

initData

initData是Vue2中用于初始化数据的函数，它主要负责以下几个步骤：

将data选项中的数据转换成响应式数据。
将响应式数据绑定到vm实例上。
触发组件的beforeCreate生命周期钩子。

在Vue2中，数据响应性的实现是通过Object.defineProperty来完成的。initData会遍历data选项中的所有属性，并使用defineProperty将这些属性定义为响应式属性。当这些属性发生变化时，defineProperty会触发getter和setter方法，从而触发组件的更新。

observer

observer是Vue2中用于观察数据变化的函数，它主要负责以下几个步骤：

将需要观察的对象转换成响应式对象。
将响应式对象添加到观察者列表中。
当响应式对象发生变化时，通知观察者列表中的所有观察者。

在Vue2中，观察者列表是一个数组，它存储着所有需要被观察的对象。当响应式对象发生变化时，observer会遍历观察者列表，并调用每个观察者的update方法，从而触发组件的更新。

示例

以下是一个简单的Vue2组件，它演示了如何使用initData和observer机制来实现数据响应性：

Vue.component('my-component', {
  data() {
    return {
      count: 0
    }
  },
  template: `
    <div>
      <p>Count: {{ count }}</p>
      <button @click="increment">Increment</button>
    </div>
  `,
  methods: {
    increment() {
      this.count++
    }
  }
})

在这个组件中，data()方法返回了一个对象，该对象包含了一个count属性，其初始值为0。template属性定义了组件的模板，其中包含了一个p标签，该标签显示了count属性的值，以及一个按钮，当按钮被点击时，increment()方法将被调用，从而使count属性的值增加1。

当这个组件被渲染时，initData会将data()方法返回的对象转换成响应式数据，并将其绑定到vm实例上。当increment()方法被调用时，observer会检测到count属性发生了变化，并通知观察者列表中的所有观察者。观察者列表中唯一的观察者是组件本身，因此组件将触发其update方法，从而使视图更新，显示最新的count属性值。