vue 元件是否渲染完畢 Vue 原始碼之元件渲染

2021-10-17 06:13:03 字數 476 閱讀 6215

上篇講了 new vue 發生了哪些事情的大致流程,即如圖所示,今天來分析下元件是如何渲染的基本流程。

import vue from 'vue'

// 這裡的 h 是 createelement 方法

})new vue 發生了什麼?

首先會執行 vm 例項初始化過程,然後進入到 $mount,因為手寫了 render 函式,所以跳過 compile 過程,否則會將 template 編譯成 render 函式,接著直接執行 render 函式,實際上就是執行 createelement 方法,在這個方法中會對傳入的第乙個引數(tag),進行各種判斷,我們這裡傳入的是乙個元件物件,所以會進入到 createcomponent 方法中,這個方法會生成乙個元件 vnode,接著這個元件 vnode 會作為引數給到 patch 方法,其中核心的方法是 createelm 方法,這個方法會對不同的 vnode 有不同的處理方式,目的就是讓 vnode 轉變成 真實的 dom;

vue動態渲染元件

component 動態渲染元件 使用來動態渲染元件 使用方式 mycomponent component keep alive vue.component briup success vue.component briup error newvue methods changeerror chan...

vue強制重新整理元件 強制Vue重新渲染元件的方法

強制vue重新渲染元件的方法 閱讀 217 有時候,依賴 vue 響應方式來更新資料是不夠的,相反,我們需要手動重新渲染元件來更新資料。或者,我們可能只想拋開當前的dom,重新開始。那麼,如何讓vue以正確的方式重新呈現元件呢?強制 vue 重新渲染元件的最佳方法是在元件上設定 key。當我們需要重...

強制 Vue 重新渲染元件

有時候,依賴 vue 響應方式來更新資料是不夠的,相反,我們需要手動重新渲染元件來更新資料。或者,我們可能只想拋開當前的dom,重新開始。那麼,如何讓vue以正確的方式重新呈現元件呢?強制 vue 重新渲染元件的最佳方法是在元件上設定 key。當我們需要重新渲染元件時,只需更 key 的值,vue ...