Vue.js 源码剖析：如何处理 data 数据？

2024-02-20 18:05:36

Vue.js 作为一款流行的前端框架，以其简洁易用和丰富的功能受到了众多开发者的喜爱。在 Vue.js 中，data 选项是一个非常重要的概念，它允许我们在组件中定义响应式数据。当 data 选项中的数据发生变化时，Vue.js 会自动更新视图，从而实现数据的双向绑定。

那么，Vue.js 是如何处理 data 数据的呢？本文将通过分析 Vue 源码，为你揭秘 Vue.js 的内部实现。

1. Vue.js 如何将 data 选项转换为响应式数据？

在 Vue.js 中，data 选项可以是一个对象或一个函数。如果 data 选项是一个对象，那么 Vue.js 会直接将这个对象转换为响应式数据。如果 data 选项是一个函数，那么 Vue.js 会在组件实例化时调用这个函数，并将其返回值转换为响应式数据。

无论 data 选项是一个对象还是一个函数，Vue.js 都会调用 initData 方法来将 data 选项中的数据转换为响应式数据。initData 方法位于 src/core/instance/state.js 文件中，其代码如下：

export function initData (vm) {
  let data = vm.$options.data

  data = vm._data = typeof data === 'function'
    ? data.call(vm, vm)
    : data || {}

  // proxy data on instance
  const keys = Object.keys(data)
  const props = vm.$options.props
  const methods = vm.$options.methods
  let i = keys.length
  while (i--) {
    const key = keys[i]
    if (process.env.NODE_ENV !== 'production') {
      if (methods && hasOwn(methods, key)) {
        warn(
          `The data property "${key}" is already declared as a method and ` +
          `will be overwritten.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      warn(
        `The data property "${key}" is already declared as a prop and ` +
        `will be overwritten.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

在 initData 方法中，Vue.js 首先会检查 data 选项是否是一个函数。如果是，则调用这个函数，并将返回值作为 data 选项的值。如果不是，则直接使用 data 选项的值。

接下来，Vue.js 会将 data 选项的值赋给 vm._data 属性。vm._data 属性是一个响应式对象，它包含了组件的所有响应式数据。

然后，Vue.js 会遍历 data 选项中的所有属性，并将其代理到 vm 实例上。这样，就可以通过 vm 实例直接访问 data 选项中的数据。

最后，Vue.js 会调用 observe 方法来对 data 选项中的数据进行观察。observe 方法位于 src/core/observer/index.js 文件中，其代码如下：

export function observe (value, asRootData) {
  if (!isObject(value) || isVue(value)) {
    return
  }
  let ob
  if (hasOwn(value, '__ob__') && value.__ob__ instanceof Observer) {
    ob = value.__ob__
  } else if (
    shouldConvert(value)
  ) {
    ob = new Observer(value)
  }
  if (asRootData && ob) {
    ob.vmCount++
  }
  return ob
}