vue面试题谈谈你对Vue 数据响应式的理解

什么是vue数据响应式

数据改变，UI页面做出响应。
当修改 Vue 实例中的 data 属性时，UI页面中的 data 会做出响应，Vue 是通过Object.defineProperty来实现数据响应的。
const vm = new Vue ({data:myDate})

image.png

Vue中如何实现数据响应式

1.通过getter和setter修改对象属性实现数据响应

Vue 中，用于设置 data 中的新增的 key 的 API 是Vue.set,vm.$set

//修改姓名
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.名}`);

2.定义完成的对象通过Object.defineProperty(obj,'n',{value:4})添加属性

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

3.给数组添加元素

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

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");

数组变异方式7个
push(),pop(),shift(),unshift(),splice(),sort(),reverse()会自动添加监听和代理，this.$set 作用于数组时，并不会自动添加监听和代理。set 了之后再用 this.array[n] += 1 是否会触发 UI 更新（答案是不会）