vue之响应式原理学习笔记

响应式原理

Object.defineProperty

可以给对象添加属性value

可以给对象添加getter/setter

getter/setter用于对属性的读写监控

啥是代理（设计模式）

对myData对象的读写，全权由另一个对象vm负责

那么vm就是myData的代理（类比房东租房）

比如我们可以用vm.n来操作myData.n

vm =new Vue({data:mydata})

1. 会让vm成为myData的代理（proxy）
2. 会对myData的所有属性进行监控
3. 为什么要监控呢，主要是为了防止myData的属性变了，vm不知道
4. vm知道了要干嘛呢，知道属性变了就可以调用render(data),
5. UI=render(data)

数据响应式

什么是响应式呢

我打你一拳，你会喊疼，那你就是响应式的，简单的来说，如果一个物体能对外界的刺激做出反应，那么它就是响应式的。

Vue的data是响应式

const vm = new Vue({data:{n:0}})

我如果修改vm.n，那么UI中的n就会来响应我。

Vue2通过Object.defineProperty来实现数据响应式

什么是响应式网页呢

如果我改变窗口大小，网页就会做出响应，那就是响应式网页。

这里我们说一下Object.defineProoerty的BUG

Object.defineProoerty(obj,‘n’,{…})

这里我们必须要传入一个n才能监听和代理obj.n

但是当前端比较水没有给n时会发生什么情况呢

这时的Vue会给出一个警告

主要就是因为Vue没法监听一开始不存在的元素

解决方法

1. 一开始就把key声明好，后面不再加属性就可以了
2. 使用Vue.set或者this.$set

Vue.set和this.$set

作用：

新增key

自动创建代理和监听（如果没有创建过）

触发UI更新（但并不会立刻更新）

eg:

this.$set(this.object,'m',100)