是什么
需要：当初咱们须要在一个组件中定义一个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(...) 实例的组件（个别是根节点）是不会被复用的。
因而也就不存在组件中数据相互影响的问题了。
发表回复