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: '測(cè)試'

};

},

mounted() {

},

methods: {

}

};

運(yùn)行時(shí)，home.vue中的template會(huì)被vue編輯器轉(zhuǎn)換成render函數(shù)，并放到在home.vue文件默認(rèn)導(dǎo)出的組件對(duì)象上。當(dāng)某組件通過components引用home組件時(shí)，就是引用該組件對(duì)象。

編譯器生成的render函數(shù)：

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))]

)

]

)

}

組件對(duì)象:

{

beforeCreate: []

beforeDestroy: []

data: function() {}

methods: {}

mounted: function() {}

name: "home"

render: function() {}

staticRenderFns: []

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

_compiled: true

}

組件渲染頁面時(shí)會(huì)先調(diào)用render函數(shù)，render函數(shù)返回組件的VNode節(jié)點(diǎn)實(shí)例。每個(gè)標(biāo)簽(包括文本節(jié)點(diǎn))生成VNode節(jié)點(diǎn)實(shí)例。先創(chuàng)建子標(biāo)簽的節(jié)點(diǎn)實(shí)例，并作為參數(shù)，在創(chuàng)建父標(biāo)簽的節(jié)點(diǎn)實(shí)例時(shí)將它添加到實(shí)例的children數(shù)組中，形成樹形結(jié)構(gòu)。

如果標(biāo)簽是組件標(biāo)簽，則會(huì)在components找到的組件對(duì)象，并使用extend方法生成組件的構(gòu)造函數(shù)，并將組件對(duì)象保存在構(gòu)造函數(shù)的options上。而構(gòu)造函數(shù)會(huì)保存在組件標(biāo)簽的VNode節(jié)點(diǎn)實(shí)例上。

當(dāng)render執(zhí)行完成，返回的VNode節(jié)點(diǎn)實(shí)例作為參數(shù)，傳入到patch方法中，patch會(huì)返回組件的根元素，并賦值給組件實(shí)例$el屬性上。

在patch方法中，每個(gè)VNode實(shí)例生成對(duì)應(yīng)的DOM元素，并保存在VNode實(shí)例的elm上。根據(jù)節(jié)點(diǎn)實(shí)例children保存的子節(jié)點(diǎn)，創(chuàng)建DOM元素，并添加到父元素中，形成DOM樹。最后返回DOM樹中的根元素。

如果是包含組件構(gòu)造器的VNode節(jié)點(diǎn)實(shí)例，會(huì)先使用構(gòu)造器創(chuàng)建組件實(shí)例，調(diào)用組件render方法，執(zhí)行以上操作，生成VNode節(jié)點(diǎn)樹，根據(jù)VNode節(jié)點(diǎn)樹再生成DOM樹，并將DOM樹的根元素添加到父元素中，完成組件的頁面渲染。

// 生成組件實(shí)例，并添加組件根標(biāo)簽到父標(biāo)簽中：

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);// 將組件根節(jié)點(diǎn)上的elm添加到父標(biāo)簽中。

if (isTrue(isReactivated)) {

reactivateComponent(vnode, insertedVnodeQueue, parentElm, refElm);

}

return true

}

}

}

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。