Vue数据响应式

图示理解Vue数据响应式

const myData = {
  n: 0
};
console.log(myData);

const vm = new Vue({
  data: myData,
  template: `<div>{{n}}<button @click="add">+10</button></div>`,
  methods: {
    add() {
      //this.n += 10;
      myData.n += 10;
    }
  }
}).$mount("#app");

setTimeout(() => {
  myData.n = 10;
  console.log(myData);
  console.log(vm);
}, 3000);

getter和setter

let obj3 = {
  姓: "高",
  名: "圆圆",
  get 姓名() {
    return this.姓 + this.名;
  },
  set 姓名(xxx) {
    this.姓 = xxx[0];
    this.名 = xxx[1];
  },
  age: 18
};
obj3.xxx = "邓超";

Object.defineProperty

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

let _x = 0;
Object.defineProperty(obj3, "xxx", {
  getAge() {
    return _x;
  },
  set(x) {
    _x = x;
  }
});
console.log(obj3);

代理和监听

代理（设计模式）

• 对某个对象的属性读写，全权由另外一个对象vm负责
• vm就是某个对象的代理
• 例如obj.n不用，用vm.n来操作obj.n

/* 
vm = new Vue({data:myData})
会让vm成为myData的代理（proxy）
会对myData的所有属性进行监控
监控原因：为防止myData的属性变了，vm不知道
vm知道了属性变更就可以调用render(data)
UI = render(data)
*/
let data3 = proxy({ data: { n: -1 } });

function proxy({ data }) {
  //o就是一个代理，是谁的代理呢？就是data的代理
  //作用：中转 租房中的客户 中介（事情交给了中介做） 房东（省心）
  const o = {};
  Object.defineProperty(o, "n", {
    get() {
      return data.n;
    },
    set(v) {
      if (v < 0) return;
      data.n = v;
    }
  });
  return o;
}
console.log(`需求四:${data3.n}`);

let data4 = { n: 0 };
let data5 = proxy({ data: data4 });
console.log(`需求四:${data5.n}`);

监听

let myData1 = { n: 0 };
let data6 = proxy2({ data: myData1 });

function proxy2({ data }) {
  let v = data.n;
  Object.defineProperty(data, "n", {
    get() {
      return v;
    },
    set(v) {
      if (v < 0) return;
      data.n = v;
    }
  });
}
//加上几句话就会进行监听
let d = {};
Object.defineProperty(d, "n", {
  get() {
    return d.n;
  },
  set(v) {
    if (d.n < 0) return;
    d.n = v;
  }
});

总结

• 响应式

1. 你打我一拳，我会喊疼，那我就是响应式的
2. 若一个物体对外界的刺激做出反应，它就是响应式的

• Vue的data是响应式的

1. const vm = new Vue({data:{n:0}})
2. 修改vm.n，那么UI中的n就会响应
3. Vue2是通过Object.defineProperty来实现数据响应式

• 响应式页面

1. 如果改变窗口的大小，网页会对内容做出响应，那就是响应式页面

Vue data中的bug

• 原因：Object.defineProperty导致的问题
• Object.defineProperty(obj,‘n’,{…})，必须要有一个‘n’，才能监听和代理obj.n
• 要是有人没给一个’n’，bug就出现啦
• 另外要注意Vue只会检查第一层属性

Vue.set 和 this.$set

作用

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

举例

this.$set(this.obj,'m',100);

Vue中的数组变异

数组的变异方法有7个

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