跳到主要内容

data

2023年05月02日
柏拉文
越努力，越幸运

一、认识​

data 用于声明组件初始响应式状态的函数。该函数应当返回一个普通 JavaScript 对象，Vue 会将它转换为响应式对象。实例创建后，可以通过 this.$data 访问该响应式对象。组件实例也代理了该数据对象上所有的属性，因此 this.a 等价于 this.$data.a。所有会用到的顶层数据属性都应该提前在这个对象中声明。

二、语法​

2.1 对象​

export default {
  data: {

  }
}

2.2 函数​

export default {
  data(){

  }
}

三、问题​

3.1 组件 data 定义函数与对象的区别?​

定义组件的时候, 逻辑如下:

function Component(){

}

Component.prototype.data = {
    a: 1,
    b: 2
}

创建两个组件实例, 如下所示:

const componentA = new Component();
const componentB = new Component();

修改 componentA 组件中 data 的值, componentB 组件中的值也发生了变化。

因此, 组件 data 定义对象时, 多个组件的 data 使用的是同一个内存地址, 每个组件实例对象的数据受到了其他组件实例对象的数据污染。组件 data 定义函数时, 每一个组件实例会返回全新的 data，使每个组件实例对象不会受到其他实例对象的数据污染。