Appearance
24.Vue 组件 data 为什么必须是个函数？
根实例对象
data可以是对象也可以是函数“单例”，不会产生数据污染情况组件实例对象
data必须为函数，目的是为了防止多个组件实例对象之间共用一个data，产生数据污染。所以需要通过工厂函数返回全新的 data 作为组件的数据源
js
function Vue() {}
Vue.extend = function (options) {
function Sub() {
// 会将data存起来
this.data = this.constructor.options.data;
}
Sub.options = options;
return Sub;
};
let Child = Vue.extend({
data: { name: "xxx" },
});
// 两个组件就是两个实例, 希望数据互不干扰
let child1 = new Child();
let child2 = new Child();
console.log(child1.data.name);
child1.data.name = "jw";
console.log(child2.data.name);function Vue() {}
Vue.extend = function (options) {
function Sub() {
// 会将data存起来
this.data = this.constructor.options.data;
}
Sub.options = options;
return Sub;
};
let Child = Vue.extend({
data: { name: "xxx" },
});
// 两个组件就是两个实例, 希望数据互不干扰
let child1 = new Child();
let child2 = new Child();
console.log(child1.data.name);
child1.data.name = "jw";
console.log(child2.data.name);Vue3 一切从组件开始，所以 data 都为函数形式。