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()
已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页