本期CodeTalks介绍了关于Vue和Vite生态系统的重要演讲，包括Evan You对Vite及其未来的讲解、VoidZero统一工具链的构想、Justin Schroeder展示的WebAssembly性能提升、Gant Laborde探讨的数学与计算机图形学，以及赵金江解析的Vue单文件组件工作原理。这些内容为开发者提供了深刻见解。
本文讨论了扩展组件时作用域样式未应用的问题，通过在vite.config.js中定义插件，可以在构建前修改单文件组件(SFC)，成功引入扩展组件样式。
Vue.js是简单、轻量且易学的开发者首选之一。它以单文件组件（SFCs）的形式组织文件，包括模板、脚本和样式部分。Vue.js具有灵活性，能够帮助构建和扩展项目。本文介绍了选项API和组合API、挂载时的视图模型和双向绑定等概念。
本文讨论了Vue单文件组件（SFC）的编译过程，介绍了如何使用`<script setup>`和`<template>`语法创建组件。通过示例代码，分析了`openBlock`、`createElementBlock`等函数的实现，解释了虚拟节点（VNode）的创建、管理及动态节点的处理方式。
本文介绍了Vue的生命周期、组件化、单文件组件、Vue脚手架和插件的使用。生命周期包括初始化、更新和销毁Vue实例。组件化提高代码复用性和维护性。单文件组件方便管理和维护。Vue脚手架快速搭建Vue项目。插件扩展Vue功能。还介绍了scoped样式避免样式冲突。
Vue3的@vue/compiler-core中的baseParse函数用于解析Vue单文件组件(SFC)中的template模板，将其编译成树形对象。该过程涉及插值、HTML标签及其属性的解析，最终生成对应的JavaScript对象。解析过程中采用前向匹配机制，核心逻辑与Vue的patch处理相似。
本文介绍了Vue 3中的@vue/compiler-sfc工具，主要用于编译单文件组件（SFC）。SFC包含模板、脚本和样式，通过parse函数将其转换为JavaScript代码。示例展示了如何创建简单组件并使用setup语法进行改造，以及如何编译模板和样式，生成最终的渲染函数和CSS代码。
Vue 3引入了cssVars特性，允许在单文件组件的CSS中使用变量。通过v-bind语法绑定变量值，支持动态样式更新，提升了样式的灵活性和响应性。
完成下面两步后，将自动完成登录并继续当前操作。
![Vue笔记[二]-组件化](https://cdn.chuckle.top/images/54-1.webp)
