丰城网站建设公司,北京社招网站,网站开发过程记录,做网站的技术支持我们分成语法层面和非语法层面讲一下#xff08;持续更新中#xff09; 一、语法层面的改进升级 1. 开发方式 Vue2使用Options API #xff08;选项式API#xff09;进行模板开发#xff0c;props、data、watch、computer、method等都是分块固定位置放#xff1b;Vue3则使…我们分成语法层面和非语法层面讲一下持续更新中 一、语法层面的改进升级 1. 开发方式 Vue2使用Options API 选项式API进行模板开发props、data、watch、computer、method等都是分块固定位置放Vue3则使用Composition API组合式API进行开发 2.指令 v-if和v-for指令在Vue2中v-for比v-if的优先级高Vue3中v-if比v-for的优先级高 3.setup setup相当于是vue2中的beforeCreate、created生命周期 4.引入了新的API ref()computed()reactive()readonly()watchEffect()watchPostEffect()watchSyncEffect()watch() 5.生命周期钩子函数 onMounted()onUpdated()onUnmounted()onBeforeMount()onBeforeUpdate()onBeforeUnmount()onErrorCaptured()onRenderTracked()onRenderTriggered()onActivated()onDeactivated()onServerPrefetch() 二、非语法层面的改进升级 1.Patch flag Vue 3引入了Patch flag的概念用于标记组件在更新过程中的一些特殊情况例如组件的props发生变化或只需要强制更新等。这样可以在1.Diff算法 【2.Diff算法】中更快速地定位需要更新的组件减少了比较的工作量提高了更新性能。 2.最长递增子序列算法 Vue2 和 Vue3 的 diff 算法虽然都采用了双端比较的方式但是它们的最大差异在于 Vue3 引入了基于动态规划的优化方案从而在性能方面有了很大的提升。 Vue 3.0 的 diff 算法采用了最长递增子序列算法能够减少不必要的 DOM 操作提升性能。 3.静态标记和提升 Vue 3.0 中编译器会对静态节点进行标记在更新时可以直接跳过这些静态节点对于这部分静态内容Vue 3将其提升为常量避免了每次渲染都进行比较的开销减少 DOM 操作进一步提高了渲染性能。 4.缓存数组 Vue 3.0 中编译器会对静态节点进行标记在更新时可以直接跳过这些静态节点减少 DOM 操作提升性能。 5.动态删除操作 Vue 3.0 中对于动态删除操作采用了异步队列的方式进行能够将多个删除操作合并为一个减少 DOM 操作提升性能。 6.Fragments优化 在Vue 2中Fragments片段会引入额外的虚拟DOM层级导致Diff算法需要进行更多的比较操作。而在Vue 3中对Fragments进行了优化可以直接将其内部的内容合并到父级中减少了虚拟DOM层级提高了Diff算法的效率。 7.动态属性的快速路径 Vue 3通过快速路径Fast Path优化了动态属性的处理。对于动态属性Vue 3会使用更快速的路径进行处理减少了比较的开销提高了Diff算法的性能。
