众所周知vue提供了很多黑魔法，比如单文件组件(SFC)、指令、宏函数、css scoped等。这些都是vue提供的开箱即用的功能，大家平时用这些黑魔法的时候有没有疑惑过一些疑问呢。
- 我们每天写的vue代码一般都是写在*.vue文件中，但是浏览器却只认识html、css、js等文件类型，明显是不认识*.vue文件的，我们写的*.vue文件是如何在浏览器中运行的呢？
- vue提供了很多指令，比如大家常用的v-model语法糖指令，那你知道这个所谓的语法糖指令到底是什么东西吗？
- 文档上说了宏函数不需要import导入，那运行的时候函数都没地方定义不就报错了吗？
- 还有css scoped是如何实现样式隔离的呢？
说到这里不得不推荐一本开源电子书：vue3编译原理揭秘。上面这些问题的答案全部都在这本电子书中，更加难能可贵的是这本书通熟易懂到初中级前端都能看懂。这本书的核心思想是通过debug的方式带你搞清楚vue3中的编译黑魔法。