浅析Vue数据响应式什么是Vue的数据响应式当数据发生变化时，UI对这种变化有所反应，即会更新UI。数字n在页面上显

什么是Vue的数据响应式

当数据发生变化时，UI对这种变化有所反应，即会更新UI。

new Vue({
      data: {
        n: 0
      },
      template: `
        <div>
          {{n}}
          <hr/>
          <button @Click ="add">+1</button/>
        </div>
       `,
      methons: {
        add(){
          this.n += 1;
        }
    }
}).$mount("#app")

数字n在页面上显示的是0，当我按下+1按钮时，数字+1，这就是数据响应式

当修改 Vue 实例中的 data 属性时，UI页面中的 data 会做出响应，Vue 通过Object.defineProperty给每个属性添加响应式逻辑达到响应式的效果。 const vm = new Vue ({data:myDate})

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<0  data的属性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");

Vue中数组的7个变异方法

Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。

这些被包裹过的方法包括：

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

浅析Vue数据响应式