不定时更新
computed原理
Vue的响应式系统
当把一个普通的js对象传给Vue实例的data时,Vue将遍历这个对象的所有属性,并使用Object.defineProperty把这些属性全部转换为getter/setter
目的:在data被访问和修改的时候通知变化
组成:
- observe:遍历data中的属性,使用Object.defineProperty把它们转化为getter/setter,这一步被称为数据劫持
- dep:每个属性都拥有自己的消息订阅器dep,用于存放所有订阅了该属性的观察者对象
- watcher:观察者对象,通过dep实现对响应属性的监听,当监听到改变时,触发自己的回掉函数
computed监听的原理步骤
- 数据劫持:组件初始化,computed和data建立各自的响应系统,observe遍历data的属性,并使用Object.defineProperty把它们转化为getter/setter
- computed初始化:注册一个watcher观察者对象,实例化一个dep消息订阅器
- computed调用:
- 触发getter
- 调用watcher.depend()向自身的dep中添加所监听data属性的watcher
- 当data中某个被监听的数据发生变化时,出发setter,遍历dep,调用watcher.update()完成更新
双向绑定原理
model=>view:使用基本的事件监听即可实现
view=>model:原理的computed相似,也是通过数据劫持+观察者模式来实现
步骤:
- 数据劫持:使用Object.defineProperty()给data添加getter和setter属性,
- 创建一个消息订阅器类dep,存放订阅者,订阅者是收集的发生变化的数据
- 创建一个观察者类watcher,在初始化时把自己添加进dep,观察者是view需要修改的节点