vue原始碼學習 vm destroy方法

2021-10-13 05:28:05 字數 907 閱讀 3219

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

實現原理:

第一部分:防止多次執行

vue.prototype.$destroy = function () 

callhook(vm, 'beforedestroy');

vm._isbeingdestroyed = true;

}

解釋:

1. 為了防止vm.$destroy被反覆執行,先對屬性_isbeingdestroyed進行判斷,為true則說明vue.js例項正在被銷毀,直接使用return 語句 退出函式執行邏輯;

2. 屬性_isbeingdestroyed為false,則呼叫callhook函式觸發beforedestroy鉤子函式;

第二部分:清理當前元件與父元件之間的連線

需要將當前元件例項從父元件例項的$children屬性中刪除即可。

說明: vue例項的$children屬性儲存了所有子元件

var parent = vm.$parent;

if (parent && !parent._isbeingdestroyed && !vm.$options.abstract)

解釋:

1. 判斷當前例項有無父級,同時父級沒有被銷毀且不是抽象元件,那麼將自己從父級的子列表中刪除,也就是將自己的例項從父級的$children屬性中刪除;

2. 事實上,子元件在不同父元件中是不同的vue例項,所以乙個子元件例項的父級只有乙個,銷毀操作也只需要從父級的子元件列表中銷毀當前這個vue例項

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是以前的版本,檔案結構會和...