Vue 的?_render?方法是實(shí)例的一個(gè)私有方法，它用來把實(shí)例渲染成一個(gè)虛擬 Node? ,返回的是一個(gè)VNode??

?

在 Vue 的官方文檔中介紹了?render?函數(shù)的第一個(gè)參數(shù)是?createElement，那么結(jié)合之前的例子：

<div id="app"> {{ message }} </div>

相當(dāng)于我們編寫如下?render?函數(shù)：

render: function (createElement) { return createElement('div', { attrs: { id: 'app' }, }, this.message) }

再回到?_render?函數(shù)中的?render?方法的調(diào)用：

vnode = render.call(vm._renderProxy, vm.$createElement)

可以看到，render?函數(shù)中的?createElement?方法就是?vm.$createElement?方法：

export function initRender (vm: Component) { // ... // bind the createElement fn to this instance // so that we get proper render context inside it. // args order: tag, data, children, normalizationType, alwaysNormalize // internal version is used by render functions compiled from templates vm._c = (a, b, c, d) => createElement(vm, a, b, c, d, false) // normalization is always applied for the public version, used in // user-written render functions. vm.$createElement = (a, b, c, d) => createElement(vm, a, b, c, d, true) }

實(shí)際上，vm.$createElement?方法定義是在執(zhí)行?initRender?方法的時(shí)候，可以看到除了?vm.$createElement?方法，還有一個(gè)?vm._c?方法，它是被模板編譯成的?render?函數(shù)使用，而?vm.$createElement?是用戶手寫?render?方法使用的， 這倆個(gè)方法支持的參數(shù)相同，并且內(nèi)部都調(diào)用了?createElement?方法。

#總結(jié)

轉(zhuǎn)載于:https://www.cnblogs.com/guangzhou11/p/11298032.html

總結(jié)

以上是生活随笔為你收集整理的Vue.js 技术揭秘学习 （3） render的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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