vue 响应式原理

原理是采用数据劫持结合发布者-订阅者模式来实现数据的响应式。首先当创建 vue实例后在初始化过程中会创建一个Observer对象,它通过Object.defineProperty来递归遍历data里的每个属性并转化成getter、setter。接着每个属性都会创建一个Dep的实例,主要是用来收集依赖和派发更新的。当执行render函数的时候,getter会把收集到的依赖也就是Watcher添加到Dep的subs数组里。当数据发生变化的时候setter会通知Dep,Dep就调用notify()方法来通知到每一个对应关联的Watcher,然后Watcher就调用自身的update()来进行视图更新。

补充一点,还需要compile来解析模板指令,来将模板中的变量替换成数据,然后初始化渲染页面,并将每个指令对应的节点都绑定更新函数,然后添加到监听数据的Watcher当中,一旦数据发生变化,就会收到通知,更新视图。
在这里插入图片描述
在这里插入图片描述

Observer对象:vue的数据对象在初始化过程中转为Observer对象;

Dep(发布者):。Observer和Watcher之间的纽带,每个Observer都有Dep实例,用来存储Watcher;
①subs 数组:存储所有的观察者
②addSub():添加观察者
③notify():当事件发生,调用所有观察者的 update() 方法

Watcher(订阅者):订阅者。将模板和Observer对象结合生成Watcher实例,自带update();有三种实例分为渲染 watcher (render watcher),计算属性 watcher (computed watcher),侦听器 watcher(user watcher)三种。

Object.defineProperty 的缺点
深度监听需要递归到底,一次性计算量大
无法监听新增属性、删除属性(要使用 Vue.set Vue.delete)
无法原生监听数组,需要特殊处理【对数组的方法重写,[‘push’, ‘pop’, ‘shift’, ‘unshift’, ‘splice’,‘sort’,‘reverse’] 这几个方法更改数组才会响应式变化,直接更改索引不会响应式改变】

为什么在 Vue3.0 采用了 Proxy,抛弃了 Object.defineProperty?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值