为什呢vue组件中的data必须是函数？

妖狐艹你老母 2022-03-27 05:50 282阅读 0赞

类比引用数据类型  
Object是引用数据类型,如果不用function 返回,每个组件的data 都是内存的同一个地址,一个数据改变了其他也改变了;

关于JS中的数据类型:[https://blog.csdn.net/Web\_J/article/details/86352432][https_blog.csdn.net_Web_J_article_details_86352432]

javascipt只有函数构成作用域(注意理解作用域,只有`函数的{}`构成作用域,`对象的{}`以及 `if(){}`都不构成作用域)，data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立,不会相互影响。

看下例子：![gif.latex][]

const MyComponent = function() {};
    MyComponent.prototype.data = {
        a: 1,
        b: 2,
    }
    const component1 = new MyComponent();
    const component2 = new MyComponent();
    
    component1.data.a === component2.data.a; // true;
    component1.data.b = 5;
    component2.data.b // 5

如果两个实例同时引用一个对象,那么当你修改其中一个属性的时候,另外一个实例也会跟着改;

两个实例应该有自己各自的域才对,需要通过下面的方法来进行处理

const MyComponent = function() {
        this.data = this.data();
    };
    MyComponent.prototype.data = function() {
        return {
            a: 1,
            b: 2,
        }
    };

这样么一个实例的data属性都是独立的,不会相互影响了.  
所以，vue组件的data必须是函数。这都是因为js本身的特性带来的，跟vue本身设计无关

[https_blog.csdn.net_Web_J_article_details_86352432]: https://blog.csdn.net/Web_J/article/details/86352432
[gif.latex]: https://private.codecogs.com/gif.latex?