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

首先看个例子

new  Vue({
    el: '#app',
    template: `<div>{{demo}}</div>`,
    data: {
        demo: 123
    }
})

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

我们大致可以通过js原型链来对比下:

var Component = function() {};
Component.prototype.data = {
    demo: 123
}
var component1 = new Component();
var component2 = new Component();
component1.data.demo = 456;
console.log(component2.data.demo); // 456

从上面可以看出,两个实例都引用同一个对象,其中一个改变的时候,另一个也发生改变。

每一个vue组件都是一个vue实例,通过new Vue()实例化,引用同一个对象,如果data直接是一个对象的话,那么一旦修改其中一个组件的数据,其他组件相同数据就会被改变。

而data是函数的话,每个vue组件的data都因为函数有了自己的作用域,互不干扰。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容