Vue渲染函数详解

　　

　　

Vue推荐在绝大多数情况下使用模板来创建HTML。然而在一些场景中,真的需要JavaScript的完全编程的能力,这就是渲染函数,它比模板更接近编译器。本文将详细介绍Vue渲染函数

　　

　　

下面是一个例子,如果要实现类似下面的效果,其中,H标签可替换
　　

　　 　　 　　& lt; h2> 　　& lt; name=" hello world " href=" https://www.yisu.com/zixun/# hello world”rel=巴獠縩ofollow”rel=巴獠縩ofollow”比; 　　你好世界! 　　& lt;/a> 　　& lt;/h2> 　　 　　

在HTML层,像下面这样定义来组件接口:

　　 　　 　　& lt; anchored-heading:水平=" 1 "在Hello world ! & lt;/anchored-heading> 　　 　　

当开始写一个通过水平支撑动态生成标题标签的组件,可能很快想到这样实现:

　　 　　 　　& lt;脚本type=" text/x-template " id=癮nchored-heading-template”比; 　　& lt; h2 v="===1”比; 　　& lt; slot> & lt;/slot> 　　& lt;/h2> 　　& lt; h3 v-else-if="===2”在 　　& lt; slot> & lt;/slot> 　　& lt;/h3> 　　& lt; h4 v-else-if="===3”比; 　　& lt; slot> & lt;/slot> 　　& lt;/h4> 　　& lt; h5 v-else-if="===4”比; 　　& lt; slot> & lt;/slot> 　　& lt;/h5> 　　& lt;仅有v-else-if="===5”比; 　　& lt; slot> & lt;/slot> 　　& lt;/h6> 　　& lt; h7 v-else-if="===6”比; 　　& lt; slot> & lt;/slot> 　　& lt;/h7> 　　& lt;/script> 　　 　　

JS代码如下
　　

　　 　　 　　Vue.component (anchored-heading, { 　　模板:“# anchored-heading-template”, 　　道具:{ 　　水平:{ 　　类型:数字, 　　要求:真正的 　　} 　　} 　　}) 　　 　　

在这种场景中使用模板并不是最好的选择:首先代码冗长,为了在不同级别的标题中插入锚点元素,需要重复地使用& lt; slot> & lt;/slot>

　　

虽然模板在大多数组件中都非常好用,但是在这里它就不是很简洁的了。那么,来尝试使用渲染函数重写上面的例子:

　　 　　 　　& lt; div id=袄印北? 　　& lt; anchored-heading:水平=" 2 "祝辞& lt;一个name=" Hello world " href=" https://www.yisu.com/zixun/" Hello world rel=巴獠縩ofollow”rel=巴獠縩ofollow”在Hello world ! & lt;/a> & lt;/anchored-heading> 　　& lt;/div> 　　& lt;脚本src=" https://www.yisu.com/zixun/vue.js "祝辞& lt;/script> 　　& lt; script> 　　Vue.component (anchored-heading, { 　　呈现:函数(createElement) { 　　返回createElement ( 　　“h”+。水平,//标记名称标签名称 　　slots.default美元。//子组件中的阵列 　　) 　　}, 　　道具:{ 　　水平:{ 　　类型:数字, 　　要求:真正的 　　} 　　} 　　}） 　　新Vue ({ 　　埃尔:“#例子” 　　}） 　　& lt;/script> 　　 　　

这样的代码精简很多,但是需要非常熟悉Vue的实例属性。在这个例子中,需要知道当不使用槽属性向组件中传递内容时,比如anchored-heading中的Hello world !,这些子元素被存储在组件实例中美元的slots.default中

　　

　　

在深入渲染函数之前,了解一些浏览器的工作原理是很重要的。以下面这段HTML为例:

　　 　　 　　& lt; div> 　　& lt; h2>我title 　　一些文本内容 　　& lt; !——TODO:添加口号——比; 　　& lt;/div> 　　 　　

当浏览器读到这些代码时,它会建立一个DOM节”点“树来保持追踪,如同会画一张家谱树来追踪家庭成员的发展一样. html的DOM节点树如下图所示:

　　

Vue渲染函数详解

　　

每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样,每个节点都可以有子节点(也就是说每个部分可以包含其它的一些部分)

　　

高效的更新所有这些节点会是比较困难的,不过所幸不必再手动完成这个工作了。只需要告诉Vue希望页面上的HTML是什么,这可以是在一个模板里:

　　 　　 　　& lt; h2> {{blogTitle}} & lt;/h2> 　　 　　

或者一个渲染函数里:

　　 　　 　　呈现:函数(createElement) { 　　返回createElement (h2, this.blogTitle) 　　} 　　 　　

在这两种情况下,Vue都会自动保持页面的更新,即便blogTitle发生了改变。

　　

【虚拟DOM】

　　

Vue通过建立一个虚拟DOM对真实DOM发生的变化保持追踪

Vue渲染函数详解