什么是数据响应式

数据，大家都知道，响应式，举个简单的例子，就是打你一巴掌，你会感到疼或者躲避，你的身体对我这一巴掌能做出反应就是响应

Vue中如何实现数据响应式

const vm = new Vue({data:{n:0}})

如果修改vm.n，UI就会做出响应，改变vm.n的显示值

修改对象属性

//修改姓名
let obj3 = {
  姓: "yang",
  名: "kerry",
  age: 18,
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    //设置姓名为obj3.姓名
    this.姓 = xxx[0];
    this.名 = xxx.substring(1);
  }
};
obj3.姓名 = "高圆圆";
console.log(`姓名：${obj3.姓}${obj3.名}`);

通过getter 和setter实现的数据响应

定义好的对象添加属性

let data2 = {};
data2._n = 0;
Object.defineProperty(data2, "n", {
  get() {
    return this._n;
  },
  set(value) {
    if (value < 0) return;
    this._n = value;
  }
});
console.log(data2.n);//输出0
data2.n=-1
console.log(data2.n)//输出0，当n=-1<0data的属性n不变
data2.n=1
console.log(data2.n)//输出1

上面的可以通过Object.definePropoty实现的数据响应

给数组添加元素

//一般没人这么写，我这样写是为了引用完整版 Vue
import Vue from "vue/dist/vue.js";

Vue.config.productionTip = false;

new Vue({
  data: {
    array: ["a", "b", "c"]
  },
  template: `
    <div>
      {{array}}
      <button @click="setD">set d</button>
    </div>
  `,
  methods: {
    setD() {
      Vue.set(this.array,3,'d');//可以实现添加d元素
      //this.array[3] = "d"; //请问，页面中会显示 'd' 吗？，不会显示
      // 等下，你为什么不用 this.array.push('d')
    }
  }
}).$mount("#app");

通过Vue.set(this.array,3,'d')实现数据响应
也可以通过this.array.push('d');实现数据响应

内容主要来源于饥人谷前端体系课