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

?

在 Vue 的官方文檔中介紹了?render?函數的第一個參數是?createElement，那么結合之前的例子：

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

相當于我們編寫如下?render?函數：

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

再回到?_render?函數中的?render?方法的調用：

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

可以看到，render?函數中的?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) }

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

#總結

轉載于:https://www.cnblogs.com/guangzhou11/p/11298032.html

總結

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

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