欢迎来到☆槿畔☆的博客

当前端web项目中应用了ts，我们不可能对成千上百的接口进行 interface的类型定义，现将接口swagger文档编译成接口文件和interface各种类型定义的工具，极大提高效率，现已开源。

vite项目按需引入优化optimized dependencies changed. reloadingnew dependencies optimized

vite githooks生命周期pre-commit触发拦截不符合规则的代码

vite.config.ts中环境判断

vue3+ts+vite实战开发之，swagger工具自动集成

vue3+ts的实战开发，重点讲述了api的调用规则，api的interface如何定义等因素。

vue3+vite框架中使用qiankunjs，由于qiankun还没有对vue3版本和vite进行适配，这里将引导大家如何去在新技术中使用乾坤。

vue3从0到1现在开发发布了视频教学，欢迎大家前往收藏学习点击前往----》vue3从0到1

我们现在来根据官方提供的基础的脚手架搭建一个完整vue-cli这里采用vite，至于优势就不用我多说了吧，像传统的webpack采用的是通过entry入口文件把所有项目用到的模块进行打包编译，有时候启动一个项目就要几十秒钟，更新文件也非常的慢。而vite从本质上讲，是让浏览器接管捆绑器的部分工作：Vite只需要根据浏览器的要求按需转换和提供源代码即可，这就让其速度体验上获得了巨大的飞跃。具体的介绍配置可以去看一下官网-----》vite官网废话不多说，首先我们用官方提供的简易的脚手架搭建（.

function watchEffect(effect, options) { return doWatch(effect, null, options);//⭐️⭐️返回一个watch函数}/** *⭐️⭐️⭐️⭐️⭐️doWatch * @param {*} source effect函数 * @param {*} { immediate, deep, flush, onTrack, onTrigger } 监听函数option配置 */function doWatch(sour.

const reactiveMap = new WeakMap();//reactive入口函数⭐️⭐️⭐️⭐️⭐️function reactive(target) { // if trying to observe a readonly proxy, return the readonly version. if (target && target["__v_isReadonly" /* IS_READONLY */]) { return.

大家都知道vue2的时候是使用了Object.defineProperties方法通过set和get来进行数据的劫持，从而达到响应式数据。在vue3中则是使用es6 proxy代理，将对象进行转化拦截，使用weakMap做弱引用缓存。当触发代理的get时就会调用track，在track里面会把对应的effect收集到targetMap（targetMap就是map数据）set时会执行trigger，trigger函数如果有获取有对应的effect，就会触发effect。下面通过手动一个案例来进行

每一次的重大升级，毫无疑问是带来了巨大的优势，vue也不例外，vue3.0比2.0快两倍以上，Tree-shaking更加的友好。要知道在2.0版本中使用ts简直就是没事找事的存在，还不如不使用，于是3.0中补充了typescript和pwa的支持。解决了2.0中数组对象无法深度的响应式的问题。同时composition api 可以和 options API 可以同时存在。现在之所以还没有大面积的使用和版本迁移，需要考虑：1.主要是ui库还不健全，更新最快的element也还在beta版本；