当前位置:   article > 正文

为什么vue中data必须是一个函数_vue data为什么是函数

vue data为什么是函数

本文从JavaScript原型链角度来解释为什么vue中的data必须是一个函数

VUE组件中的data必须是函数

类别引用数据类型

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

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

例如:

  1. const MyComponent = function() {};
  2. MyComponent.prototype.data = {
  3. a: 1,
  4. b: 2
  5. }
  6. const component1 = new MyComponent();
  7. const component2 = new MyComponent();
  8. component1.data.a === component2.data.a; // true
  9. component1.data.b = 5;
  10. component2.data.b //5

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

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

  1. const MyComponent = function() {
  2. this.data = this.data();
  3. };
  4. MyComponent.prototype.data = function() {
  5. return {
  6. a:1,
  7. b:2
  8. }
  9. };

这样么一个实例的data属性都是独立的,不会相互影响了。

所以,你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的,跟vue本身设计无关。其实vue不应该把这个方法取名为data(),应该叫setData或其他更容易理解的方法名。

 

 

 

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/616772
推荐阅读
相关标签
  

闽ICP备14008679号