簡易版Vue響應式流程原始碼實現

new vue(,

vhtml: 'vhtml'}},
methods: ,
changeobject() }}
})

class vue

// **屬性
_proxy(data) ,
set(v) }})
})}}

需實現：

響應式處理：

class observer else 

} walk(data) 
object.keys(data).foreach(key => )
} definereactive(obj, key, val) 
return val
},set(v) }})
}}

需實現：

class dep

// 收集依賴
addsub(dep) 
} // 通知更新
notify() )
}}

需實現：

class watcher

// 更新函式
update() 
}

需實現：

編譯解析的指令或者表示式的同時，new watcher建立watcher，傳入更新函式。資料發生變化後，會通知所有watcher執行更新函式，即重新渲染相對應的dom更新

class compiler

compiler(el) else if (this.istextnode(node)) 
if(node.childnodes && node.childnodes.length) 
})} // 解析文字節點
compilertextelement(node) \}/
const text = node.textcontent
if (reg.test(text)) )
}} // 編譯元素節點
compilerelement(node) 
const methodupdater = dir + 'updater'
// 執行對應的更新函式，
this[methodupdater] && this[methodupdater](node, this.$vm[key], key)
new watcher(this.$vm, key, (val, key) => )
} else if (this.isondirective(attrname)) 
})} oneventlistener(node, eventname, methodname) )
} // 處理v-text
textupdater(node, value) 
// 處理v-html
htmlupdater(node, value) 
// 處理v-model
modelupdater(node, value, key) )
} // 判斷是否是指令
isdirective(attrname) 
// 判斷是否是事件指令 @
isondirective(attrname) 
// 判斷是否是文字節點 且 是差值表示式
istextnode(node) \}/.test(node.textcontent)
}}

count: }
obj: }
v-html: 
v-model: inputval：}
v-on:v-on
@click
changeobject

/* 

覆蓋陣列的原型方法
*/const arrayproto = array.prototype
// 複製陣列原型
const arraymethodsproto = object.create(arrayproto)
// 要覆蓋的7個方法
const methodstopatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]function def (obj, key, val) )
}methodstopatch.foreach(function (method) 
// if (inserted) ob.observearray(inserted)
// 通知更新
ob.dep.notify()
return result
})})

簡易版promise原始碼實現

首先我們先看一下promise是如何使用的 通過promise構建出來的物件有三種狀態，pending 進行中 fulfilled 已成功 rejected 已失敗 狀態只能由 pending 變為 fulfilled 或由 pending 變為 rejected 且狀態改變之後不會在發生變化，會一...

Vue響應式原始碼分析

初始化資料initdata時呼叫obsreve函式。observe函式主要做了3件事 如果不是物件則啥都不做退出。物件已經是響應式的了，有 ob 了，直接返回這個依賴收集器。物件還不是響應式的，執行new observer observer中主要做了3件事 新建乙個new dep 依賴收集器,定義到...

Vue 響應式原理 原始碼

整個函式結束，相當於初始化所有屬性和vue內建事件 如 emit 並且使所有屬性變為響應式。初始化所有option api 對其中的使用者自定義資料data 進行 observe 此函式用來新建乙個類observer的例項，類observer的constructor中用walk 函式進行遍歷每個屬性...