在 Vue 中，组件模板可以有哪些不同的定义方式？
考察说明
考察对 Vue 组件模板定义方式的基本认识
回答思路
- 【回答框架 1】Vue 组件模板定义方式主要有三种。第一种是字符串模板，直接在组件选项中使用 template 属性，以字符串形式书写 HTML 结构，常用于简单组件或动态构造场景。
- 【回答框架 2】第二种是模板字符串（反引号），利用 ES6 模板字符串特性，可跨行书写，提高可读性，适合多行模板。
- 【回答框架 3】第三种是 DOM 模板，即在 HTML 文件中以 script 标签类型为 text/x-template 的方式定义，Vue 会将其内容作为模板。此外，还可使用 render 函数或 JSX，但严格来说它们属于渲染函数而非模板定义。
- 【关键点 1】字符串模板和模板字符串本质都是 JavaScript 字符串，编译时解析。
- 【关键点 2】DOM 模板受 HTML 解析规则影响，可能导致大小写和闭合标签问题。
- 【关键点 3】推荐使用单文件组件（SFC）中的 template 块，这是 Vue 官方推荐的组件定义方式。
- 【易错点 1】在 DOM 模板中，HTML 标签不区分大小写，可能导致组件名和 prop 大小写问题。
- 【易错点 2】模板字符串在某些浏览器中可能不兼容，需要转译。
- 【易错点 3】避免将模板字符串与字符串模板混淆，二者书写方式不同。