Vue.js 技术揭秘学习 (3) render
2023-09-11 14:22:18 时间
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
方法。
#总结
相关文章
- Vue.js 开发实践:实现精巧的无限加载与分页功能
- VUE - vuex state的使用
- 2-5 vue基础语法
- Vue.js
- [Vue-rx] Cache Remote Data Requests with RxJS and Vue.js
- [Vue-rx] Watch Vue.js v-models as Observable with $watchAsObservable and RxJS
- vue.js 3.2.22:菜单每行依次滑动出现的动画
- vue.js3:使用clipboard.js实现复制到剪贴板(vue@3.2.37 / clipboard@2.0.11)
- vue.js 3.2.20: 用rem实现移动端和pc的兼容
- vue3.x:用webpack-bundle-analyzer分析chunk文件过大的原因(vue.js 3.0.5/@vue/cli 4.5.13)
- typora及vue主题安装
- vue指令:v-pre原样输出,不解析插值表达式
- Vue.js 组件(component)demo小案例
- vue:export default 和 export 区别(difference between Vue 'export default' and 'new Vue')
- Vue.js:Vue-Router动态路由从服务器接口获取路由数据
- 关于vue.js的使用经验总结
- Vue——slot
- Vue.js——60分钟快速入门
- vue-ant design示例大全——按钮本地css/js资源
- Vue学习笔记——vue-router