Vue3 学习笔记（七）——模板

合集 - Vue3知识(12)

1.VUE3 学习笔记（一）——Vue3介绍2023-02-272.VUE3 学习笔记（二）——开发环境安装与部署项目2021-12-083.VUE3 学习笔记（三）——Nodejs版本升级、降级与版本共存2022-05-244.VUE3 学习笔记（四）——目录介绍2022-01-215.VUE3 学习笔记（五）——页面启动逻辑分析2023-02-276.Vue3 学习笔记（六）——Vue应用的使用2023-02-27

7.Vue3 学习笔记（七）——模板2023-04-18

8.Vue3 学习笔记（八）——Vue语法2023-04-189.Vue3 学习笔记（九）——Vue组件的使用2023-04-1810.Vue3 学习笔记（十）——生命周期2023-04-2511.Vue3 学习笔记（十一）——倾听器watch2023-05-0312.Vue3 学习笔记（十二）——插件Plugins2023-05-07

收起

1、概念

  由于Vue 是一种基于 HTML 的模板语言（前端框架）。Vue模板能够声明式地将Vue组件实例绑定到网页DOM 上。所有的 Vue 模板在语法层面上都是合法的 HTML，可以被符合规范的浏览器和 HTML 解析器解析。

2、Vue模板做了什么？

  1）在Vue的底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。

  2）结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，操作最少的 DOM对象。

3、使用Vue模板时需要注意什么？

  1）当使用 DOM 内嵌模板 (直接写在 HTML 文件里的模板) 时，我们需要避免在名称中使用大写字母，因为浏览器会强制将其转换为小写。单文件组件内的模板不受此限制。

    例如：<a :[someAttr]="value"> ... </a>；将会在 DOM 内嵌模板中被转换为 :[someattr]。如果你的组件拥有 “someAttr” 属性而非 “someattr”，这段代码将不会工作。

4、可不可以不使用Vue模板？

  如果你对虚拟 DOM 的概念比较熟悉，并且偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板。但请注意，这将不会享受到和模板同等级别的编译时优化。

  见：Vue3 学习笔记（十三）——渲染函数API（模板的代替方案）与服务端渲染 (SSR)（后补）