美文网首页前端开发那些事儿
从源码中分析Vue组件中的data为什么必须是个函数,而vue的

从源码中分析Vue组件中的data为什么必须是个函数,而vue的

作者: Grit_1024 | 来源:发表于2020-12-22 00:43 被阅读0次

第一个问题:组件中的data为什么必须是个函数

源码中:src/core/instance/state.js 112行,initData()方法里面,每次函数执行都会返回一个全新的data对象,若不是函数(程序甚至无法通过vue检测)则返回同一个data,所以如果组件中的data不是函数,在多组件中则会造成状态污染

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
    )
  }

第二个,vue的根实例没有这个限制

因为根实例也就只有一个,不存在这种情况

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

链接:https://www.jianshu.com/p/42e20c8ea39d
来源:简书

相关文章

  • vue 中的 data 为什么是函数?

    new Vue() 实例中,data可以是直接是一个对象,为什么在vue组件中,data必须是一个函数呢?因为组件...

  • 微信小程序和vue的区别

    数据类型 vue组件中data必须是函数 data(){return{}},new Vue中的选项可以是函数也可以...

  • 为什么vue中data必须是一个函数

    首次发表在个人博客 本篇文章从javascript原型链来解释为什么vue中data必须是一个函数 vue组件中的...

  • vue组件data为什么必须是函数?

    首先看个例子 在new vue()中,data可以直接是一个对象,为什么在vue组件中,data必须是一个函数呢?...

  • vue组件data为什么必须是函数

    首先看个例子 在new vue()中,data可以直接是一个对象,为什么在vue组件中,data必须是一个函数呢?...

  • Vue组件data必须是函数

    Vue组件data必须是函数 一、组件data() 函数 定义一个组件 注册组件Vue.component('cp...

  • vue初级面试题

    1.在vue中,为什么 data必须是一个工厂函数而不能是一个对象。 在组件的复用中,如果data是一个对象的话,...

  • vue细节笔记

    组件中的 data 必须是一个函数,然后 return 一个对象,而 new Vue 实例里,data 可以直接是...

  • 2018-12-27

    Vue组件中的data必须是一个function的原因分析 组件可以有自己的data,并且data必须是一个fu...

  • vue题库

    为什么vue组件中data必须是一个函数? 组件是可复用的,当复用组件时,由于数据对象指向的是同一个data对象,...

网友评论

    本文标题:从源码中分析Vue组件中的data为什么必须是个函数,而vue的

    本文链接:https://www.haomeiwen.com/subject/xlvqnktx.html