Vue2-data

1# data 属性

在 Vue.js 中创建 Vue 实例时，Vue 会递归地将 data 对象的属性转换为 getter/setter，以便实现数据的响应式变化。

var vm = new Vue({
  data: {
    name: "lee",
  },
  created() {
    // data 中的属性会自动被 Vue 实例代理
    // 并转换成相应的 getter/setter
    console.log(this.$data);
    /*
    name: "lee"
    get name: ƒ reactiveGetter()
    set name: ƒ reactiveSetter(newVal)
    */
  },
});
console.log(vm.$data);
/*
name: "lee"
get name: ƒ reactiveGetter()
set name: ƒ reactiveSetter(newVal)
*/

知识点：this.$data 和 vm.$data 都指向同一个 Vue 实例的数据对象。不同点在于前者适用于在实例内部方法或生命周期钩子函数中使用，后者适用于在实例外部对数据进行访问和操作。

2# 注意事项

（1）属性冲突

属性名以 _ 或 $ 开头的属性不会被 Vue 实例代理，以避免与 Vue 内部属性和 API 方法冲突，但仍可通过 vm.$data._property 的方式访问这些属性。

// 创建一个 Vue 实例
var vm = new Vue({
  el: "#app",
  data: {
    _aValue: "a-value",
    $bValue: "b-value",
  },
  mounted() {
    // 属性名以 `_` 或 `$` 开头的属性不会被 Vue 实例代理
    console.log(this._aValue); // 输出：undefined
    console.log(this.$bValue); // 输出：undefined
      
    // 可以通过 this.$data 来访问这些属性
    console.log(this.$data); 
    // 输出: a-value
  },
});

// 尽管属性不会被代理，仍然可以通过 vm.$data 来访问这些属性
console.log(vm.$data._aValue); // 输出: a-value
console.log(vm.$data.$bValue); // 输出: b-value

（2）组件数据

当定义一个组件时，需要将 data 声明为返回初始数据对象的函数。这样做是为了确保每个实例都有独立的数据对象，避免潜在的数据共享问题。

注意：在 Vue.extend() 中 data 选项必须是函数。

// [Vue warn]: The "data" option should be a function 
// 			   that returns a per
Vue.extend({
  data: {
    counter: 0,
  },
});

// 同上，因为 Vue.component 会自动调用 Vue.extend()
Vue.component("my-component", {
  data: {
    counter: 0,
  },
});

（3）箭头函数

在 data 属性上使用箭头函数时，函数内部的 this 不会指向这个组件的实例，但仍可以接收第一个参数作为当前组件的实例。

new Vue({
  data: (vm) => ({ aThis: vm, bThis: this }),
  created() {
    console.log(this.aThis == this); // true
    console.log(this.bThis == window); // true

    console.log(this.$data);
    // 输出： { aThis: Vue, bThis: Window }
  },
});