大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
小编这次要给大家分享的是浅谈vue渲染方式render和template,文章内容丰富,感兴趣的小伙伴可以来了解一下,希望大家阅读完这篇文章之后能够有所收获。
创新互联建站主要从事网站制作、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务高唐,10余年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18982081108
render函数详解
Vue中的Render函数中有一个参数,这个参数是一个函数通常我们叫做h。其实这个h叫做createElement。Render函数将createElement的返回值放到了HTML中
createElement这个函数中有3个参数
第一个参数(必要参数):主要用于提供DOM的html内容,类型可以是字符串、对象或函数
第二个参数(类型是对象,可选):用于设置这个DOM的一些样式、属性、传的组件的参数、绑定事件之类
第三个参数(类型是数组,数组元素类型是VNode,可选):主要是指该结点下还有其他结点,用于设置分发的内容,包括新增的其他组件。注意,组件树中的所有VNode必须是唯一的
// @return {VNode} createElement( // {String | Object | Function} // 一个HTML标签字符串,组件选项对象,或者一个返回值类型为String/Object的函数。该参数是必须的 'div', // {Object} // 一个包含模板相关属性的数据对象,这样我们可以在template中使用这些属性,该参数是可选的。 { attrs: { name: headingId, href: '#'+headingId }, style: { color: 'red', fontSize: '20px' }, 'class': { foo: true, bar: false }, // DOM属性 domProps: { innerHTML: 'baz' }, // 组件props props: { myProp: 'bar' }, // 事件监听基于 'on' // 所以不再支持如 'v-on:keyup.enter' 修饰语 // 需要手动匹配 KeyCode on: { click: function(event) { event.preventDefault(); console.log(111); } } } // {String | Array} // 子节点(VNodes)由 createElement() 构建而成。可选参数 // 或简单的使用字符串来生成的 "文本节点"。 [ 'xxxx', createElement('h2', '一则头条'), createElement(MyComponent, { props: { someProp: 'xxx' } }), this.$slots.default ] )
什么时候用render函数?
假设我们要封装一套按钮组件,按钮有四个样式(success、error、warning、default)。首先,你可能会想到如下实现
{{ text }}
虽然我们这样实现没有问题,但是如果现在有十几个样式的情况下我们就需要写N多个判断,如果遇到了这种情况我们就可以选择使用render函数。
其实简单的来说就是template适合简单的组件封装,然后render函数适合复杂的组件封装
template与render函数对比
template----html的方式做渲染
render----js的方式做渲染
render(提供)是一种编译方式
render里有一个函数h,这个h的作用是将单文件组件进行虚拟DOM的创建,然后再通过render进行解析。
h就是createElement()方法:createElement(标签名称,属性配置,children)
template也是一种编译方式,但是template最终还是要通过render的方式再次进行编译。
区别:
1、render渲染方式可以让我们将js发挥到极致,因为render的方式其实是通过createElement()进行虚拟DOM的创建。逻辑性比较强,适合复杂的组件封装。
2、template是类似于html一样的模板来进行组件的封装。
3、render的性能比template的性能好很多
4、render函数优先级大于template
案例一:template和render的方式渲染标题标签:
Document 标题 标题 标题
案例二:render方式模拟button:
Document 成功 提示 报错 默认
看完这篇关于浅谈vue渲染方式render和template的文章,如果觉得文章内容写得不错的话,可以把它分享出去给更多人看到。