Vue——模板和样式

Posted 2021-03-04 bien94

　　使用单文件组件的好处是可以提高响应速度，提升体验效果。

　　（一）模板预编译　　

• 当使用 DOM 内模板或 javascript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。
• 预编译模板最简单的方式就是使用单文件组件——相关的构建设置会自动把预编译处理好，所以构建好的代码已经包含了编译出来的渲染函数而不是原始的模板字符串。

　　（二）提取组件的CSS

• 当使用单文件组件时，组件内的 CSS 会以 <style> 标签的方式通过 JavaScript 动态注入。
• 如果使用服务端渲染，这会导致一段“无样式内容闪烁 (fouc)”。
• 将所有组件的 CSS 提取到同一个文件可以避免上述问题，也会让 CSS 更好地进行压缩和缓存。