当前位置: 首页 > Web前端 > vue.js

[Vue]Featurelearning-renderfunction

时间:2023-04-01 00:41:59 vue.js

vue中view的渲染流程如下图所示。渲染功能是首选。如果渲染函数不存在,将搜索模板。最后编译模板生成render函数,通过render函数完成视图渲染。(Vue的视图模板其实是通过render函数渲染的)render函数返回虚拟DOM,vue框架根据虚拟DOM生成真实DOM。(virtualDOM->actualDOM)render函数让我们可以使用js构建DOM。我们可以自定义Render函数来实现更灵活的功能。render函数与props、data和computed处于同一级别。它接受一个createElement函数作为参数,通常缩写为h。如下所示。createElement(缩写为h)是render函数的参数,它本身就是一个三参数函数。第一个参数是必需的,可以是String|对象|FunctionString,表示HTML标签名Object,包含数据的组件对象Function,返回包含标签名或组件选项对象的异步函数。第二个参数是可选的,对应模板中属性的数据对象是常用的class|风格|属性|domProps|on第三个参数可选,代表子虚拟节点(VNodes),由createElement()构造,也可以放置字符串。如果放置一个字符串,该字符串将被创建为第一个参数创建的dom节点下的文本。注意:任何时候需要将文本放置在dom元素中。也就是第三个参数的位置总是需要放一些东西,如果不是[...],就是"str"。举一些h函数的例子。使用渲染功能的示例。实现一个示例组件,接收一个标签数组作为参数,创建一个与标签内容相同的html标签,标签内容为对应标签的索引。使用render函数实现以下功能。同步更新到自己的语雀,格式比较好,可以移步https://www.yuque.com/diracke...