40 行原生代码理解 Vue 响应式

Vue 的一大核心是响应式,所以理解她的响应式实现是很重要的。为了帮助最核心的原理理解,我抽丝剥茧于 Vue 源码,实现了一个最简单的响应式系统。明白依赖如何收集;在哪个时机收集的;数据变化了又应该在哪个时机触发视图的更新。

 var data = {foo: 1}
 defineReactive(data)
 function defineReactive(data) {
     let _data = {}
     let dep = new Dep()
     for(let key in data) {
         _data[key] = data[key]
         Object.defineProperty(data, key, {
             get() {
                 dep.depend()
                 return _data[key]
             },
             set(newV){
                 _data[key] = newV
                 dep.notify()
             }
         })
     }
 }
 Dep.target = null
 function Dep(){
     this.subs = new Set()
 }
 Dep.prototype.depend = function () {
     if(Dep.target) {
         this.subs.add(Dep.target)
     }
 }
 Dep.prototype.notify = function () {
     for(let wacther of this.subs) wacther.update()
 }
 function Watcher(update, k) {
     Dep.target = this
     data[k]
     this.update = function () {
         update(data[k])
     }
     this.update()
     Dep.target = null
 }
 new Watcher((v) => {
     console.log('Value is updated to ', v)
 }, 'foo')

作者: 曾小乱

喜欢写点有意思的东西

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据