在 Vue 中，选项 el、template 和 render 分别起到什么作用？它们之间有哪些不同之处，各自适合在哪些情况下使用？
考察说明
考查对 Vue 实例挂载机制及渲染方式的理解，以及在不同场景下的选型能力。
回答思路
- 【回答框架 1】el 是 Vue 实例的挂载点，指定一个 DOM 元素作为容器。它可以是 CSS 选择器或 DOM 元素，例如 '#app'。Vue 会将实例的模板渲染到该元素内部，并替换其内容。在实例化后，el 对应的 DOM 会被 Vue 接管。
- 【回答框架 2】template 是模板字符串，定义了实例的渲染结构。它可以是字符串模板或 DOM 模板。Vue 会将模板编译为渲染函数，这个过程发生在运行时（如果使用完整版构建）或构建时（如果使用预编译）。template 支持模板语法，如插值、指令等。
- 【回答框架 3】render 函数是 JavaScript 编程式的渲染方式，接收 createElement 参数，返回虚拟 DOM。它不经过模板编译，直接生成虚拟 DOM，因此性能更高，但代码可读性较差。render 函数常用于需要完全编程控制的场景，例如高阶组件、函数式组件、动态渲染等。
- 【回答框架 4】三者的关系是：如果同时指定 el 和 template，则 template 模板会替换 el 的内容。如果指定 render 函数，则 render 的优先级最高，因为它在内部会直接生成虚拟 DOM，而不需要编译模板。所以，它们共同决定了 Vue 如何将组件渲染到页面。
- 【关键点 1】el 是挂载点，template 是模板，render 是渲染函数。
- 【关键点 2】render 优先级高于 template，template 优先级高于 el 的 innerHTML。
- 【关键点 3】完整版 Vue 包含编译器，可以在运行时编译 template，而运行时版不支持。
- 【关键点 4】render 函数提供编程灵活性，适合动态渲染场景。
- 【易错点 1】在运行时环境，如果未使用完整版 Vue 且未预编译，则 template 会编译错误。
- 【易错点 2】render 函数虽然灵活，但过度使用会降低团队维护效率。
- 【易错点 3】el 指定的元素必须是存在的，且不能是 html 或 body 标签。