Vue关于data和this的解析总结：this.$data、this._data、this.xxx 为什么都能获取数据？data为什么是个函数？

如果 data 是个对象，那么整个vue实例将共享一份数据，也就是各个组件实例间可以随意修改其他组件的任意值，这样对于实际开发时很难受的。

但是 data 定义成一个函数，将会 return 出一个唯一的对象，不会和其他组件共享一个对象。

我们注册组件的时候实际上是建立了一个组件构造器的引用，只有使用组件的时候才会真正创建一个组件实例。

总而言之：

this. d a t a . x x x 、 t h i s . d a t a . x x x 、 t h i s . x x x 都 能 获 取 数 据 ， 先 让 t h i s . data.xxx、this._data.xxx、this.xxx 都能获取数据，先让 this. data.xxx、this.d​ata.xxx、this.xxx都能获取数据，先让this.data.xxx = this._data.xxx，然后用 call 让当前组件实例 this 继承了 this.$data 的值，也就是 getData 方法 return 出了一份用 call 改变指向将 $data 指向 this 的数据。

data 定义成一个函数，确保了各个组件实例能拥有一份只属于自己的唯一数据！

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue