Vue的常见问题(二) - Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

最新推荐文章于 2023-08-19 09:10:03 发布

莫名就

最新推荐文章于 2023-08-19 09:10:03 发布

阅读量321

点赞数

分类专栏： # vue2的理解与应用文章标签： vue js

本文链接：https://blog.csdn.net/qq_36782473/article/details/109189894

版权

vue2的理解与应用专栏收录该内容

7 篇文章 0 订阅

订阅专栏

vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

一、案例分析
二、源码分析
- 1. 关于data的初始化
- 2. 关于自定义组件和根实例的创建
三、结论

一、案例分析

<!DOCTYPE html> <html> 
<head> 
    <title>Vue</title> </head> 
<body> 
    <div id="demo"> 
        <h1>vue组件data为什么必须是个函数? </h1> 
        <comp></comp> 
        <comp></comp> 
        <p>{{text}}</p>
    </div> 
    <script src="../../dist/vue.js"></script> 
    <script> 
        Vue.component('comp', { 
            template:'<div @click="counter++">{{counter}}</div>',             
            data: {counter: 0} 
            // data: () { return { counter: 0 } }
        }) 
        // 创建实例 
        const app = new Vue({ 
            el: '#demo', 
            data: { text: 'mua' }
        }); 
    </script> 
</body> 
</html>

运行结果：
在这里插入图片描述
错误信息：要求Vue组件的data必须是个函数。

二、源码分析

不知道如何查看源码的同学可以看下《vue2源码解析(一) - new Vue()的初始化过程》这篇文章内容。

1. 关于data的初始化

源码位置：src/core/instance/state.js

function initData (vm: Component) {
  let data = vm.$options.data
  data = vm._data = typeof data === 'function'
    ? getData(data, vm)
    : data || {}
  if (!isPlainObject(data)) {
    data = {}
    process.env.NODE_ENV !== 'production' && warn(
      'data functions should return an object:\n' +
      'https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function',
      vm
    )
  }
  // 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(
          `Method "${key}" has already been defined as a data property.`,
          vm
        )
      }
    }
    if (props && hasOwn(props, key)) {
      process.env.NODE_ENV !== 'production' && warn(
        `The data property "${key}" is already declared as a prop. ` +
        `Use prop default value instead.`,
        vm
      )
    } else if (!isReserved(key)) {
      proxy(vm, `_data`, key)
    }
  }
  // observe data
  observe(data, true /* asRootData */)
}

观察源码发现，在这个initData()方法中会对data对象的类型进行判断。若是function类型，则执行getData()获取它返回值做响应式处理；否则直接获取做响应式处理。

假如，我们在声明组件时，data是一个object类型，不是function类型。那么，在进行data初始化时，是不是会直接把data的数据直接作用到组件的构造函数上呢？当多个相同组件实例并存（如上面的案例中，页面中存在两个comp组件）时，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，就会造成状态污染。

简单的来说，就是在使用全局API component()时，只是为组件构建了构造函数，只走了一次initData()，将来$mount()挂载时，才会调用组件构造函数创建挂载组件。
关于Vue的组件化原理，可以看下《vue2源码解析(二) - 组件化原理》这篇文章了解更多。

但是，为什么Vue的根实例则没有此限制？可以直接将data设置成object对象。

2. 关于自定义组件和根实例的创建

源码位置：src/core/instance/init.js

export function initMixin (Vue: Class<Component>) {
  Vue.prototype._init = function (options?: Object) {
    const vm: Component = this
    // a uid
    vm._uid = uid++

    let startTag, endTag
    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      startTag = `vue-perf-start:${vm._uid}`
      endTag = `vue-perf-end:${vm._uid}`
      mark(startTag)
    }

    // a flag to avoid this being observed
    vm._isVue = true
    // merge options
    if (options && options._isComponent) {
      // optimize internal component instantiation
      // since dynamic options merging is pretty slow, and none of the
      // internal component options needs special treatment.
      initInternalComponent(vm, options)
    } else {
      vm.$options = mergeOptions(
        resolveConstructorOptions(vm.constructor),
        options || {},
        vm
      )
    }
    /* istanbul ignore else */
    if (process.env.NODE_ENV !== 'production') {
      initProxy(vm)
    } else {
      vm._renderProxy = vm
    }
    // expose real self
    vm._self = vm
    initLifecycle(vm)
    initEvents(vm)
    initRender(vm)
    callHook(vm, 'beforeCreate')
    initInjections(vm) // resolve injections before data/props
    initState(vm)
    initProvide(vm) // resolve provide after data/props
    callHook(vm, 'created')

    /* istanbul ignore if */
    if (process.env.NODE_ENV !== 'production' && config.performance && mark) {
      vm._name = formatComponentName(vm, false)
      mark(endTag)
      measure(`vue ${vm._name} init`, startTag, endTag)
    }

    if (vm.$options.el) {
      vm.$mount(vm.$options.el)
    }
  }
}

观察源码发现，在这个initMinix()方法中会对vm实例对象的类型进行判断if (options && options._isComponent)。若是自定义组件，则去初始化组件（构建组件构造函数），否则进行根实例相关操作。

通过《vue2源码解析(二) - 组件化原理》，我们知道自定义组件是可以多实例的，根组件是单实例的。也就是说，根实例根本就不会操存在状态污染的问题，从而也就不会有data必须是函数的限制。

三、结论

Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；
采用函数形式定义，在initData()时会将其作为工厂函数返回全新data对象，有效规避多实例之间状态污染问题。而在Vue根实例创建过程中则不存在该限制，也是因为根实例只能有一个，不需要担心这种情况。

莫名就

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue的常见问题(二) - Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？

vue组件data为什么必须是个函数而Vue的根实例则没有此限制？一、案例分析二、源码分析1. 关于data的初始化2. 关于自定义组件和根实例的创建三、结论一、案例分析<!DOCTYPE html> <html> <head> <title>Vue</title> </head> <body> <div id="demo"> <h1>vue组件data为
复制链接

扫一扫

专栏目录