VUErender函数使用及详解

VUErender函数使用及详解前言在平时的编程中，大部分都是通过模板创建html。但是，在一些特殊情况下，使用模板方法时，并不能很好地满足要求。这时候就需要JavaScript的编程能力来操作了。至此，渲染函数就该大展拳脚了。render在官网示例入口中的作用。官网的这个例子，使用组件通过solt将相同的内容放入h1-h6标签中。使用传统方法时，不仅代码冗长，而且在每一级标题中都要重复写，插入锚元素时还要重复一遍。使用render函数后，代码就简化了很多。Vue.component('anchored-heading',{render:function(createElement){returncreateElement('h'+this.level,//标签名this.$slots.default//子节点数组)},props:{level:{type:Number,required:true}}})render函数的作用是在场景中实现template时，代码繁琐，重复很多。这时候，可以大大简化代码。render函数说明在render函数的使用中，会用到一个参数createElement，而这个createElement参数，本质上也是一个函数，是vue中用来构建虚拟dom的工具。让我们来看看这个createElement。createElement方法中有三个参数：returncreateEement(,{},[])第一个参数（必选参数）：主要用于提供dom中的html内容，类型可以是字符串，一个对象或函数。第二个参数（对象类型，可选）：用于设置这个dom中的一些样式、属性、传入组件的参数、绑定事件等。第三个参数（类型为数组，数组元素类型为VNode，可选）：主要用于设置分发内容，比如其他新增组件。注意：组件树中的所有vnode必须是唯一的。通过传入createElement参数创建一个虚拟节点，然后返回节点进行渲染。总的来说，render函数的本质就是创建一个虚拟节点。render和template的区别是一样的：render函数和template一样，都是创建一个html模板。区别：Template适合简单逻辑，render适合复杂逻辑。用户模板相对容易理解，但不够灵活；自定义渲染功能灵活度高，但对用户要求高。render性能高，template性能低。用render函数渲染没有编译过程，相当于用户直接把代码发给程序。因此，使用它对用户要求高，容易出错。Render函数的优先级高于template，但是需要注意Mustache（双花括号）语法不能再使用注意：template和render不能一起使用，否则无效render比如封装一次性一组常用的按钮组件，按钮有四种样式（成功、错误、警告、默认）。模板方法如下：{{text}}