Vue3项目开发现阶段使用vite+ts应该已经成为标准范式，新的语法体验vue组合api结合脚本设置谁用谁知道，在开发和construction，vite作为下一代构建工具，想必大家都有所了解。使用ES6模块+ESbuild支持本地开发，速度和效率起飞。就一个字——酷。对于TypeScript，我觉得没有必要多说。我还没上车。快点~前言vite是一个构建工具，我们现在只需要知道怎么用就可以了，工具够用了，默认支持很多功能（cssmodule,less,scss），并且作为Vue之父友达的作品，对Vue也有很好的支持，目前使用率已经很高了。Nuxt等大型项目已经支持了。结合文档和社区，目前用的够用了，没必要再用了。担心疑难杂症~，上车~vue3，感觉最大的变化就是全面拥抱函数式编程，结合compositionapi，现在真的可以轻松管理复杂的业务代码，摒弃了很多以前的这个这个，Unfriendlymixin，使用现在的hooks处理，逻辑复用，功能模块拆分简直太方便了，语法，api使用也优雅方便很多，值得一试另一个亮点是vue3对TS的良好支持，现在项目可以完全拥抱TS的写法，然后结合我接下来推荐的setup和几个工具，结合使用。不太酷。对于TS，首先要做的就是定义类型，这和传统写JS有一些区别，但这一步是必须的，也是值得的。对你接下来的工作或者这个项目的未来都有很大的好处。比如这样一个场景，与后端接口对接：前期拿到接口文档，根据格式和类型定义对应的TS类型，结合Mock编写接口和业务逻辑。在使用的时候，我们可以通过TS高效的完成代码开发，同时大大的避免了错误。对于后期的维护迭代有很大的保障。import.meta使用vite作为构建工具，可以通过import.meta获取对应的方法，方便快速处理业务环境变量。获取import.meta.env//console.log(import.meta.env){"BASE_URL":"/","MODE":"development","DEV":false,"PROD":true,"SSR":false}注意：与.env/.env.development/.env.production等文件一起使用时设置环境变量,variablesKey需要加上前缀VITE_{"script":{"dev":"vite--modedevelopment"}}为防止环境变量意外泄露给客户端，只有前缀为VITE_的变量才会暴露给Vite处理该代码只会将import.meta.env.VITE_SOME_KEY暴露给您的客户端源代码VITE_SOME_KEY，但DB_PASSWORD不会。批处理文件import.meta.globEager//读取当前目录下所有.ts文件constmodules=import.meta.globEager('./**/*.ts')ref和reactive都可以??用来定义responsive的dataref主要用来定义基本类型。使用时需要通过.value:removeObject读取或修改基础类型，包括：String,Number,boolean,null,undefined。控制台打印数据结构为RefImpl//refconstcount=ref(0)count.value++console.log(count.value)定义基本类型时，响应式原理是类似于vue2.x的Object.defineProperty()，通过get和set读取和修改数据。但是，ref也可以定义引用类型的数据。注意在定义引用类型时，其内部实现是使用reactive通过打印数据在控制台查看结构，分别为：RefImpl、Proxyreactive只能定义引用类型，即Object，包括：Object、Array、Date，function，定义基本类型时，使用时会警告，直接通过属性读写//reactiveconststate=reactive({count:0})state.count++console.log(state.value)reactivedefaultsto响应式处理对象中的所有属性，可以实现深度监控。通过ES6Proxy实现响应式能力，可以监听属性的增删改查，解决defineProperty的缺陷，对嵌套属性有很好的支持，可以轻松实现a.b.c.d=xx响应式更新。Proxy和Reflect都是ES6语法。通常，它们一起使用以安全优雅的方式劫持属性。更新摘要模板tempalte会自动解包，在模板中使用时，不需要.value。对于引用类型，简单理解就是：ref本质上也是reactive的，ref(obj)等价于reactive({value:obj})，ref的底层实现也就是reactive可以查到。所谓响应式，其实就是通过劫持ref定义的数据，对属性进行响应式，每一层都是响应式的。watch和watchEffect监听响应式数据的变化。watch的基本语法与vue2类似，但是有一些不同的方法可以使用它来监视ref定义的响应式数据（基本类型）。函数式写法需要.value，监控的是值变化。常数计数=参考（0）；conststr=ref('abc');//1.普通写法//watch可以省略。valuewatch(count,(val,old)=>console.log({val,old}));//2.函数写法watch(()=>count.value,(val,old)=>console.log({val,old}),);//3.数组写法watch(()=>[count.value,str.value],(val,old)=>console.log({val,old}),);监听ref定义的响应式数据（引用类型）。需要明白的是，ref定义的引用类型内部是使用reactive实现的，所以需要通过.value获取reactive对象，然后监听属性constrefState=ref({count:0,str:'abc',});//1.普通写法,invalid//=>refState.valuevalidwatch(refState,(val,old)=>console.log({val,old}));//2.函数写法watch(()=>refState.value.count,(val,old)=>console.log({val,old}),);监听reactive定义的reactive数据需要监听state.countconststate=reactive({count:0,str:'abc',a:{b:{c:'a-b-c',},},});//1.普通写法//结果:val,old新旧值相同,//watch(state,(val,old)=>console.log({val,old}));//2.函数写法//结果：只有当指定的属性发生变化时才会触发watch(()=>state.value.a.b.c,//只监听指定的属性(val,old)=>控制台.log({val,old}),);watchEffect接收一个函数，不需要设置监听对象，这个方法会自动接管函数内部使用的依赖，当依赖更新时，触发函数执行函数会初始化默认ExecuteoncewatchEffect(()=>{if(state.count>1){//只要count发生变化，这个watchEffect函数就会执行一次//当count>1时，做相应的行为}})watch,watchEffectsummaryuse看的时候，有需要考虑的情况很多。Watch更注重结果。WatchEffect强调过程。从用法上看，watchEffect好像比较好用~shallowRef和shallowReactive递归监控和非递归监控。ref和reactive都是递归监控，即数据采集。每一层都是响应式的。如果数据量比较大，会消耗很多性能。非递归监控只会监控第一层数据。当以使用//
