简单谈谈Vue数据响应式的理解？

响应式是一个抽象的概念，并不是一个具体的实例。是指能对外界的刺激做出反应。

Vue中的数据响应式，就是数据改变，UI页面做出响应。

Vue中的data是响应式，当修改Vue实例中的data属性时，UI页面中data会做出响应，

（Vue2）通过使用Object.defineProperty来实现数据响应式。

const vm = new Vue（options） option:({data:myDate})
 
options.data
会被Vue监听，
会被Vue实例代理，
每次对data的读写都会被Vue监控，
Vue会在data变化时更新UI

 

Vue中如何实现数据响应式？

 

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

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

 

2、定义完成的对象通过Object.defineProperty(obj,prop,descriptor)

 

参数

• obj：要在其上定义属性的对象。
• prop：要定义或修改的属性的名称。
• descriptor：将被定义或修改的属性描述符。

 

返回值

• 被传递给函数的对象。

let data = {};
data.c = 0;
Object.defineProperty(data, "n", {
  get() {
    return this.c;
  },
  set(value) {
    if (value < 0) return;
    this.c = value;
  }});
 
console.log(data.n);//输出0
data.n=-1
console.log(data.n)//输出0，当n=-1<0data的属性n不变
data.n=1
console.log(data.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') 可以添加d元素
    }
  }}).$mount("#app");

 

 

注意：

数组变异方式7个

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

会自动添加监听和代理，this.$set 作用于数组时，并不会自动添加监听和代理。

set 了之后再用 this.array[n] += 1 是否会触发 UI 更新（答案是不会）