vue原始碼學習 vm forceUpdate方法

2021-10-13 05:28:05 字數 576 閱讀 1428

vue原始碼版本為2.6.11(cdn位址為: 

如何實現的? 

只需要執行watcher的update方法,就可以讓例項重新渲染。

vue.js的每乙個例項都有乙個watcher。當狀態發生改變時,會通知到元件級別,然後元件內部使用虛擬dom進行更詳細的重新渲染操作。事實上,元件就是vue.js例項,所以元件級別的watcher和vue.js 例項上的watcher說的是同乙個watcher.

實現**如下:

vue.prototype.$forceupdate = function () 

};

vm._watcher就是vue.js例項的watcher,每當元件依賴的資料傳送變化時,都會自動觸發vue,js例項中_watcher的update方法。

重新渲染的實現原理不難,vue.js得自動渲染是通過變換偵測來偵測資料,即當資料發生變化時,vue,js例項重新渲染。而vm.$$forceupdate是手動通知vue.js例項重新渲染。

vue原始碼學習

new vue發生了什麼 此處只針對最簡單基礎的new vue過程,一般專案中採用.vue單檔案元件的形式開發,下面會介紹 對於 runtime compile 版本 初始化乙個 vue 例項的一系列相關環境 watcher,lifecycle,methods等等 compile 將 templat...

Vue原始碼學習筆記

最近偷懶好久沒有寫部落格了,一直想繼續vue學習系列,想深入vue原始碼來寫。結果發現自己層次不夠,對js的理解差好多。所以一直想寫一直擱置著。最近重新振作決心看完vue原始碼,並且以我們這類前端小白的角度來一步步弄懂vue原始碼。vue.js 本質上就是乙個包含各種邏輯的乙個function。而我...

vue原始碼學習筆記

最近在看vue的原始碼,因為本人比較小白,所以很多地方理解起來會有一定難度,好在有很多大分享了vue原始碼相關的文章,整理一下吧 vue.js 原始碼學習筆記 囧克斯,這篇文章是老師推薦的,裡面總結了vue原始碼中比較值得關注的地方,不過文章應該寫的比較早了,文中講的vue是以前的版本,檔案結構會和...