vue2子组件中定义的data为什么必须是一个function

是什么

需求:现在我们需要在一个组件中定义一个name变量,并且把这个变量显示在界面上,代码:


 

那么问题来了,为什么组件中的data需要是一个函数呢,可以将data声明为一个对象吗,这样不是更直接吗?代码:


 

如果是上面这种写法,不出意外的话,在vs code data处将会出现红线报错 data property in component must be a function,提示我们data必须是一个function。

为什么

好,重点来了,为什么呢?原因就是:通过函数返回数据对象,保证了每个组件实例都有一个唯一的数据副本,避免了组件间数据互相影响。

先上结论:

每个子组件注册后会被处理成一个VueComponent实例,类似下面的MyVueComponent(...), data属性会挂在他的原型链上面

当子组件中的data是一个Object时,代码:

function MyVueComponent(){
  
}
MyVueComponent.prototype.data = {
  name:'jack',
  age:22,
}
const componentA = new MyVueComponent();
const componentB = new MyVueComponent();
componentA.data.age=55;
console.log(componentA.data.age,componentB.data.age) // 55,55

可以看到,当componentA.data.age赋值为55时,componentB.data.age也被更改为55了

当子组件的data是一个function时,代码:

function MyVueComponent(){
  this.data = this.data()
}
MyVueComponent.prototype.data = function() {
    return  {
      age:22
    }
}
const componentA = new MyVueComponent();
const componentB = new MyVueComponent();
componentA.data.age=55;
console.log(componentA.data.age,componentB.data.age) // 55,22

可以看到,componentA.data.age更改后,并不会影响到componentB.data.age的值,也就是我们上面说的,避免了组件间数据互相影响

注意: 避免组件中数据相互影响,除了将data定义为function,还需要在data中返回一个全新的Object(拥有独立的内存地址),我们知道,js中对象的赋值是引用传递,代码:

const myData = {
  age:22
}
function MyVueComponent(){
  this.data = this.data()
}
MyVueComponent.prototype.data = function() {
    return myData
}
const componentA = new MyVueComponent();
const componentB = new MyVueComponent();
componentA.data.age=55;
console.log(componentA.data.age,componentB.data.age) // 55,55

可以看到,虽然我们将data定义成function了,但是在datareturn了对象myData,这里是引用传递,后续在修改data中的值时,其实修改的是同一个内存地址的数据,所以还是存在数据相互影响了。

再看细节:

当我们需要在一个父组件中使用子组件时,以全局子组件为例子,代码:

// app.vue

// main.js
import Vue from 'vue/dist/vue.esm.js'
import App from './App.vue'
Vue.component('app', App)
new Vue({
  el: '#app',
  template: ''
})

首先,执行Vue.component(...)注册子组件

调用Vue.component()这个方法,看一下Vue.component()的内部实现:

var ASSET_TYPES = [
  'component',
  'directive',
  'filter'
];
function initAssetRegisters (Vue) {
  ASSET_TYPES.forEach(function (type) {
    Vue[type] = function (
      id,
      definition
    ) {
      if (!definition) {
        return this.options[type + 's'][id]
      } else {
        /* istanbul ignore if */
        if (process.env.NODE_ENV !== 'production' && type === 'component') {
          validateComponentName(id);
        }
        // 关键逻辑
        if (type === 'component' && isPlainObject(definition)) {
          definition.name = definition.name || id;
          definition = this.options._base.extend(definition);
        }
        // ...略去部分无关代码
        this.options[type + 's'][id] = definition;
        return definition
      }
    };
  });
}

Vue初始化时会执行initAssetRegisters(...)这个方法,那么Vue.component(...)就出来了。

definition参数就是我们在上面例子中调用Vue.component(...)传进来的第二个参数,也就是:

{
  name: 'App',
  data() {
    return {
      name: 'haha'
    }
  }
}

接着会执行definition = this.options._base.extend(definition),会调用Vue.extend(...)将外部传进来的对象经过各种处理,最后构造出一个VueComponent的实例对象,当然,我们传进来的data对象也挂在里面,在浏览器debugger看下过程数据会比较清楚。代码:

Vue.extend = function (extendOptions) {
    extendOptions = extendOptions || {};
    var Super = this;
    var SuperId = Super.cid;
    var cachedCtors = extendOptions._Ctor || (extendOptions._Ctor = {});
    if (cachedCtors[SuperId]) {
      return cachedCtors[SuperId]
    }
    var name = extendOptions.name || Super.options.name;
    if (process.env.NODE_ENV !== 'production' && name) {
      validateComponentName(name);
    }
    var Sub = function VueComponent (options) {
      this._init(options);
    };
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    Sub.cid = cid++;
    Sub.options = mergeOptions(
      Super.options,
      extendOptions
    );
    Sub['super'] = Super;
    ASSET_TYPES.forEach(function (type) {
      Sub[type] = Super[type];
    });
    if (name) {
      Sub.options.components[name] = Sub;
    }
    Sub.superOptions = Super.options;
    Sub.extendOptions = extendOptions;
    Sub.sealedOptions = extend({}, Sub.options);
    cachedCtors[SuperId] = Sub;
    return Sub
};

接着,执行new Vue(...)

代码:

function Vue (options) {
  if (process.env.NODE_ENV !== 'production' &&
    !(this instanceof Vue)
  ) {
    warn('Vue is a constructor and should be called with the `new` keyword')
  }
  this._init(options)
}

执行顺序:this._init(...) -> initState(vm) ,也就是在initState(vm) 这个方法中会去初始化组件中data数据,看下代码:

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
}

看下initData(...)方法的内部实现:

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
    )
  }
  // ...略去部分无关代码
}

可以看到,在第二行代码,会先判断data是不是一个function
如果是function,接着调用getData(...)方法获取数据。
如果不是function,就直接获取组件中的data数据。

那什么情况下data不是一个function呢?
当我们使用new Vue(...) 实例的组件(一般是根节点)是不会被复用的。
因此也就不存在组件中数据相互影响的问题了。

你可能感兴趣的