html：

組件頁面渲染的基本流程

main.js：

import Vue from "vue";

import Home from "./home.vue";

new Vue({

el: "#app",

template: "",

components: { Home }

});

home.vue

{{text}}

export default {

name: "home",

data() {

return {

text: '測試'

};

},

mounted() {

},

methods: {

}

};

運行時，home.vue中的template會被vue編輯器轉換成render函數，并放到在home.vue文件默認導出的組件對象上。當某組件通過components引用home組件時，就是引用該組件對象。

編譯器生成的render函數：

var render = function() {

var _vm = this

var _h = _vm.$createElement

var _c = _vm._self._c || _h

return _c(

"div",

{ staticClass: "home" },

[

_c("a",

[_vm._v(_vm._s(_vm.text))]

)

]

)

}

組件對象:

{

beforeCreate: []

beforeDestroy: []

data: function() {}

methods: {}

mounted: function() {}

name: "home"

render: function() {}

staticRenderFns: []

__file: "src/page/home/index.vue"

_compiled: true

}

組件渲染頁面時會先調用render函數，render函數返回組件的VNode節點實例。每個標簽(包括文本節點)生成VNode節點實例。先創建子標簽的節點實例，并作為參數，在創建父標簽的節點實例時將它添加到實例的children數組中，形成樹形結構。

如果標簽是組件標簽，則會在components找到的組件對象，并使用extend方法生成組件的構造函數，并將組件對象保存在構造函數的options上。而構造函數會保存在組件標簽的VNode節點實例上。

當render執行完成，返回的VNode節點實例作為參數，傳入到patch方法中，patch會返回組件的根元素，并賦值給組件實例$el屬性上。

在patch方法中，每個VNode實例生成對應的DOM元素，并保存在VNode實例的elm上。根據節點實例children保存的子節點，創建DOM元素，并添加到父元素中，形成DOM樹。最后返回DOM樹中的根元素。

如果是包含組件構造器的VNode節點實例，會先使用構造器創建組件實例，調用組件render方法，執行以上操作，生成VNode節點樹，根據VNode節點樹再生成DOM樹，并將DOM樹的根元素添加到父元素中，完成組件的頁面渲染。

// 生成組件實例，并添加組件根標簽到父標簽中：

function createComponent (vnode, insertedVnodeQueue, parentElm, refElm) {

var i = vnode.data;

if (isDef(i)) {

var isReactivated = isDef(vnode.componentInstance) && i.keepAlive;

if (isDef(i = i.hook) && isDef(i = i.init)) {

i(vnode, false /* hydrating */);

}

// after calling the init hook, if the vnode is a child component

// it should've created a child instance and mounted it. the child

// component also has set the placeholder vnode's elm.

// in that case we can just return the element and be done.

if (isDef(vnode.componentInstance)) {

initComponent(vnode, insertedVnodeQueue);

insert(parentElm, vnode.elm, refElm);// 將組件根節點上的elm添加到父標簽中。

if (isTrue(isReactivated)) {

reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);

}

return true

}

}

}

總結

以上是生活随笔為你收集整理的html页面渲染vue组件,Vue组件页面渲染的基本流程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。