![Vue.js应用测试](https://wfqqreader-1252317822.image.myqcloud.com/cover/354/33501354/b_33501354.jpg)
上QQ阅读APP看书,第一时间看更新
1.4.2 模板和渲染函数
Vue为我们提供了以声明方式渲染DOM的方法。换句话说,我们要对Vue应渲染的DOM节点进行描述。
描述DOM节点的主要方法有两种:模板和渲染函数。模板会使用HTML语法来描述DOM节点,如例1.4中的代码所示。
例1.4 一个模板字符串
![](https://epubservercos.yuewen.com/C2541B/17890094408653006/epubprivate/OEBPS/Images/013-2-i.jpg?sign=1739528023-cBQoRa3vhhYdKSo87iuVI6jTAGivoT5f-0-9fc30d9fd9dd53d8865ce6f6c752a63a)
为了使用Vue从模板生成DOM节点,需要将模板转换为渲染函数,这个过程称为编译模板。如例1.5所示,你可以在Vue选项中直接使用渲染函数,从而取代模板字符串的使用。
例1.5 使用渲染函数
![](https://epubservercos.yuewen.com/C2541B/17890094408653006/epubprivate/OEBPS/Images/013-3-i.jpg?sign=1739528023-9OBCUuWxb8wIvHlGlu2UjyL2dZborITr-0-cb72ed1974ca588c592be7ccd8f244de)
Vue运行渲染函数生成一个虚拟DOM,即一个以JavaScript描述实现的DOM,见例1.6。它将虚拟DOM与真实DOM进行比较,并更新真实DOM以映射虚拟DOM。
例1.6 简单的虚拟DOM
![](https://epubservercos.yuewen.com/C2541B/17890094408653006/epubprivate/OEBPS/Images/014-i.jpg?sign=1739528023-RiFX1sQUXRvE15R02l2YbefuI8RSwpnz-0-03fb28355cb437c08351082efc481eb1)
注释 如果想了解更多有关渲染函数或虚拟DOM的内容,可以阅读Vue文档http://mng.bz/dP7N和http://mng.bz/VqwP。
渲染函数比模板更难阅读。大多情况下,我们应该使用模板编写组件,但这样做的同时,我们需要明白Vue需要将模板编译成渲染函数。
模板使代码更易于阅读,但大型模板仍难以理解。Vue有一个组件系统,可以将模板拆分为独立单元,从而使代码变得更易于阅读和维护。本书的很多内容都是关于Vue组件的单元测试,因此需要很好地了解Vue组件是什么。