问:说一下vue响应式数据的理解?
七娃博客
531人阅读
数组:通过重写数组方法来实现
对象:对象内部通过defineReactive方法,使用Object.defineProperty,将属性进行劫持(只会劫持已存在的属性);每个属性都拥有自己的dep属性,存放他所依赖的watcher,当属性变化后会通知自己对应的watcher去更新。
另外,对象层级过深,性能就会差;不需要响应数据的内容不要放到data中;
let state = {count:0} let active; function defineReactive(obj){ for(let key in obj){ let value = obj[key]; let dep = []; Object.defineProperty(obj, key,{ get(){ if(active){ dep.push(active) } return value; }, set(newValue){ value=newValue; dep.forEach(watcher=>watcher()) } }) } } defineReactive(state); let watcher = (fn)=>{ active = fn; fn(); active = null; } watcher (()=>{ app.innerHTML = state.count; }) watcher(()=>{ console.log(state.count) })
主题开源不易,支持一下作者吧!
使用支付宝打赏
使用微信打赏
评论 | 0 条评论
登录之后才可留言,前往登录