# 前言： 翻别人代码时，总结发现极大部分使用`vue3`的人只会用`ref`和`reactive，其实有更好性能的api可以用

目前在Vue官网显最新版本已经是Vue3.5，其中主要包含了几个小改动，我留着到日常最常用的改动就是props了，肯定是用Vue3的人必用的，所以针对性讲解。

搜集资源 Vue3 入门指南与实战案例 Vue在线演练场 Vue3.0中Ref与Reactive的区别是什么 Composition API RFC Vue.js 中使用defineAsyncComp

不知道喜欢 vue3 的小伙伴和我是不是一样，刚上手vue3 的时候 对自定义hooks 一脸懵逼，在一些视频网站学习的时候老师讲解到自定义hooks 最喜欢用 加减乘除来描述看了跟没看一样

我们每天写的vue代码都是写在vue文件中，但是浏览器却只认识html、css、js等文件类型。本文通过debug的方式带你一步一步的搞清楚vue文件是如何编译为js文件的，看不懂你来打我。

setup语法糖经过编译后是什么样子的？为什么在setup顶层定义的变量可以在template中可以直接使用？为什么import一个组件后就可以直接使用，无需使用components 选项来显式注册?

使用defineModel时，为什么子组件内没有任何关于props的定义和emit事件触发的代码？修改defineModel返回值会修改父组件上绑定的变量，这是否破坏了vue的单向数据流呢？

我们每天写vue代码时都会使用到这些宏，但是你有没有思考过vue中的宏到底是什么？为什么这些宏不需要手动从vue中import？为什么只能在setup顶层中使用这些宏？

你知道v-model指令是如何变成组件上的modelValue属性和@update:modelValue事件呢？这一过程是在编译时还是运行时进行的呢？