vue.js 原始碼剖析-響應式原理、虛擬 dom、模板編譯和元件化
一、簡答題
1、請簡述 vue 首次渲染的過程。
解答:
定義 vue 的建構函式
初始化 vue 的例項成員
初始化完畢後呼叫 new vue()
呼叫 this._init()
呼叫$mount 將模板編譯成rander函式
執行mount方法
呼叫mountcomponent
watcher
2、請簡述 vue 響應式原理。
解答:
initdata(vm) vm 資料的初始化
observe(value, asrootdata) 負責為每乙個 object 型別的 value 建立乙個 observer 例項
observer 對物件、陣列做響應化處理
definereactive()
陣列的響應式處理
const arrayproto = array.prototype
// 使用陣列的原型建立乙個新的物件
export const arraymethods = object.create(arrayproto)
// 修改陣列元素的方法
const methodstopatch = [
'push',
'pop',
'shift',
'unshift',
'splice',
'sort',
'reverse'
]/**
* intercept mutating methods and emit events
*/methodstopatch.foreach(function (method)
// 對插入的新元素,重新遍歷陣列元素設定為響應式資料
if (inserted) ob.observearray(inserted)
// notify change
// 呼叫了修改陣列的方法,呼叫陣列的ob物件傳送通知
ob.dep.notify()
return result
})})
dep 類
watcher 類
3、請簡述虛擬 dom 中 key 的作用和好處。
解答:
示列**:
設定key後key變化後會認為是不同節點
當設定 key 的時候
4、請簡述 vue 中模板編譯的過程。
解答:
part3 模組五作業
1 vue 3.0 效能提公升主要是通過哪幾方面體現的?解答 編譯優化 原始碼體積優化 vite 2 vue 3.0 所採用的 composition api 與 vue 2.x使用的options api 有什麼區別?解答 vue 3.0 3 proxy 相對於 object.defineprop...
part3 模組五作業
vue 3.0 效能提公升主要是通過哪幾個方面體現的?答 編譯優化 原始碼體積優化 tree shaking vite vue 3.0 所採用 composition api 與 vue 2.0x 使用的 options api 有什麼區別?答 vue 3.0 proxy 相比於 objct.def...
關於除錯 part 3
歡迎喜歡交流和熱心的iphone開發朋友加入qq群參與討論 186739796,驗證碼 csdn。常見錯誤收集貼 方法名錯誤 product edit scheme,在environment varibles中 新增 nszombieenabled yes 最後結果 關於出現殭屍訊號sigbat或者...