关于Vue实例中render函数的理解

定义:字符串模板的代替方案,Vue 选项中的 render 函数若存在,则 Vue 构造函数不会从 template 选项或通过 el选项指定的挂载元素中提取出的 HTML 模板编译渲染函数。

目前我们最常用的创建组件方式都是创建.vue为后缀的单文件组件,每一个单文件组件就是一个Vue实例,他们最后<template></template>中的模板字符串通过webpackloaderVue Loader最后都会编译成render:(createElement: () => VNode) => VNode (h())形式。

createElement:它更准确的名字可能是 createNodeDescription,因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点,包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”,也常简写它为“VNode”

其中createElement()函数的第二个参数是一个Object,第二个参数这个对象中包含的配置https://cn.vuejs.org/v2/guide/render-function.html#%E6%B7%B1%E5%85%A5%E6%95%B0%E6%8D%AE%E5%AF%B9%E8%B1%A1对应上使用template的字符模板中标签的style、class等属性

顺带提一下这里面涉及到的Vue版本知识点:
如果使用到template则需要使用到Runtime + Compiler 构建的 Vue 库
如果使用的是render则只需要使用Runtime构建的 Vue 库

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值