Vue 数据响应式

响应式是一种设计模式，数据响应就是当数据发生变化时，界面（UI）会根据数据的变化而做出相应变化。Vue 中 data 就是响应式。

getter 和 setter

get 语法将对象属性绑定到查询该属性时将被调用的函数。

当尝试设置属性时，set 语法将对象属性绑定到要调用的函数。

let obj = {
  姓: "刘",
  名: "德华",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(name){
    this.姓 = name[0]
    this.名 = name.substring(1)
  },
  age: 18
};

obj.姓名 = '张学友'

console.log(`姓 ${obj.姓}，名 ${obj.名}`) // 姓 张，名 学友

Object.defineProperty() 方法

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。语法是：Object.defineProperty(obj, prop, descriptor)

这方法：

• 可以给对象添加属性 value
• 可以给对象添加 getter / setter
• getter / setter 用于对属性的读写进行监控

const object1 = {};
Object.defineProperty(object1, 'property1', {
  value: 42,
  writable: false
});

object1.property1 = 77;
console.log(object1.property1); // 打印出了 42

Vue.set 和 this.$set

作用是：

• 新增 key
• 自动创建代理和监听（如果没有创建过）
• 触发 UI 更新（但并不会立即更行）

Vue.set(this.obj,'b',1)
或者
this.$set(this.obj,'b',1)
// this.obj 是对象
// 'b' 是属性
//  1 是属性值