乐趣区

关于vue.js:vue2子组件中定义的data为什么必须是一个function

jiezi

是什么

需要：当初咱们须要在一个组件中定义一个 name 变量，并且把这个变量显示在界面上，代码：

<template>
  <div>
    {{name}}
  </div>
</template>
<script>
export default {data() {
    return {name: 'syz'}
  }
}
</script>

那么问题来了，为什么组件中的 data 须要是一个函数呢，能够将 data 申明为一个对象吗，这样不是更间接吗？代码：

<template>
  <div>
    {{name}}
  </div>
</template>
<script>
export default {
  data: {name: 'syz'}
}
</script>

如果是下面这种写法，不出意外的话，在 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 了，然而在 data 中return了对象 myData，这里是援用传递，后续在批改data 中的值时，其实批改的是同一个内存地址的数据，所以还是存在数据相互影响了。

再看细节：

当咱们须要在一个父组件中应用子组件时，以全局子组件为例子，代码：

// app.vue
<template>
  <div id="app">
    {{name}}
  </div>
</template>
<script>
export default {
  name: 'App',
  data() {
    return {name: 'haha'}
  }
}
</script>
// main.js
import Vue from 'vue/dist/vue.esm.js'
import App from './App.vue'
Vue.component('app', App)
new Vue({
  el: '#app',
  template: '<app></app>'
})

首先，执行 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(...) 实例的组件（ 个别是根节点 ）是不会被复用的。
因而也就不存在组件中数据相互影响的问题了。

退出移动版