
上QQ阅读APP看书,第一时间看更新
1.4.2 模板和渲染函数
Vue为我们提供了以声明方式渲染DOM的方法。换句话说,我们要对Vue应渲染的DOM节点进行描述。
描述DOM节点的主要方法有两种:模板和渲染函数。模板会使用HTML语法来描述DOM节点,如例1.4中的代码所示。
例1.4 一个模板字符串

为了使用Vue从模板生成DOM节点,需要将模板转换为渲染函数,这个过程称为编译模板。如例1.5所示,你可以在Vue选项中直接使用渲染函数,从而取代模板字符串的使用。
例1.5 使用渲染函数

Vue运行渲染函数生成一个虚拟DOM,即一个以JavaScript描述实现的DOM,见例1.6。它将虚拟DOM与真实DOM进行比较,并更新真实DOM以映射虚拟DOM。
例1.6 简单的虚拟DOM

注释 如果想了解更多有关渲染函数或虚拟DOM的内容,可以阅读Vue文档http://mng.bz/dP7N和http://mng.bz/VqwP。
渲染函数比模板更难阅读。大多情况下,我们应该使用模板编写组件,但这样做的同时,我们需要明白Vue需要将模板编译成渲染函数。
模板使代码更易于阅读,但大型模板仍难以理解。Vue有一个组件系统,可以将模板拆分为独立单元,从而使代码变得更易于阅读和维护。本书的很多内容都是关于Vue组件的单元测试,因此需要很好地了解Vue组件是什么。