vue3和vue2对比
1.vue3的优化类型判断对比vue2的优化：从flow.js改成typescript。数据劫持优化：由Object.defineProperty改为Proxy，原因是：对于比较深的对象，Object.defineProperty需要递归遍历所有属性，将所有属性变成响应对象，降低了性能。变成了响应对象编译阶段的优化：模板编译优化，槽编译优化，事件监听函数缓存优化，diff算法重写槽优化，将槽编译成惰性函数，将槽渲染的决定权交给子的优势组件模板编译：在编译阶段通过对静态模板的解析，编译生成BlockTree。BlockTree是一个嵌套块，根据动态节点指令切割模板。每个区块内部的节点结构是固定的，每个区块只需要用一个Array来跟踪它包含的动态节点diff算法。原因是：在vue2的单个组件中，VDOMdiff需要遍历整个DOM树，update需要重新生成DOM树；vue3的VDOM增加了静态标签、静态提升、事件缓存，并且会预缓存DOM树，通过contextTree获取缓存的DOM，只diff动态节点text
//静态节点text
//静态节点{{message}}
//动态节点text
//静态节点text
//静态节点优化
逻辑复用：从mixins改为hook函数，因为：定义的变量名容易冲突变量数据来源不明确//hookimport{ref,onMounted,onUnmounted}来自'vue'exportdefault()=>{constwidth=ref(window.innerWidth);constheight=ref(window.innerHeight);constupdate=()=>{width.value=window.innerWidth;height.value=window.innerHeight;}onMounted(()=>{window.addEventListener("resize",update)})onUnmounted(()=>{window.removeEventListener("resize",update)})return{width,height}}二、vue3相对到vue2vue3vue2setup()生命周期的变化开始创建组件beforeCreate()+created()onBeforeMount()组件挂载到页面之前beforeMount()onMounted()组件挂载到页面之后Mounted()onBeforeUpdate()组件更新前beforeUpdate()onUpdated()组件更新后updated()onBeforeUnmount()组件卸载前beforeDestroy()onUnmount()组件卸载前destroyed()onActivated()activated()onDeactivated()deactivated()全局API更改##BeforeimportVuefrom'vue'importAppfrom'./App.vue'Vue.use(...)Vue.component(...)Vue.prototype.customProperty=...newVue({render:h=>h(App)}).$mount('#app')##Afterimport{createApp}from'vue'importAppfrom'./App.vue'constapp=createApp(App)app.use(...)app.component(...)app.config.globalProperties.customProperty=...app.mount('#app')globalpopup##Beforeimportvuefrom'vue'importtoastComponentfrom'./toast.vue'constToastCons构造器=vue.extend(toastComponent)functionshowToast(){consttoastDom=newToastConstructor({...})}vue.prototype.$toast=showToast##之后
...
子组向父组传值##Beforeexportdefault{methods:{change(){this.$emit("todata",params);}}}##AfterexportdefaultdefineComponent({emits:["todata"],setup(props,{emit}){constchange=()=>{constparams={user:"ylw"};emit("todata",params);};}})三、组件内部的使用//sfc组件//jsx组件import{defineComponent,ref,computed,watchEffect}from'vue'exportdefaultdefineComponent({constnumberRef:Ref
=ref(1)setup(){constnumber=numberRef.valuereturn()=>{return()}}})4.Vite和webpack的特点Vite是一个基于vite的开发服务器浏览器的原生ES导入。它使用浏览器按需在服务器端解析导入、编译和返回，完全跳过了打包这一步。服务器已准备就绪；而webpack开发环境需要编译打包es6、es7等，然后启动开发服务器vite支持热更新：vite按需加载，webpack全部加载vite依赖es模块的特性。vite的打包原理打包流程原理webpack标识入口->逐层识别依赖->分析/转换/编译/输出代码->打包后的代码逐层递归识别依赖，构建依赖图->转换AST语法树->处理代码->转换为浏览器可识别的代码vite-Based在浏览器原生ES模块上，使用浏览器解析导入，服务端按需编译并返回vite的改进点webpack缺点vite改进点服务器启动慢将应用模块分为依赖和源代码两种；使用esbuild构建；在浏览器请求源码时转换，按需提供源码基于nodejsesbuild（Go语言编写）预建依赖，比node快10-100倍热更新效率低；编辑单个文件将重建整个包；HMR更新速度随规模递减HMR基于原生ESM，更新速度与应用规模无关；利用http2的缓存+压缩的优势，vite的缺点不如webpack，loader和插件不够丰富。生产环境esbuild对css和代码分割不够友好，一直没有大规模大量使用。会隐藏一些问题
