|Vue3.0高阶实战:开发高质量音乐Web app( 四 )


Vue3.0中的优化策略
静态节点提升
vue3.0进行编译时会将节点进行分类存储如果需要编译的是静态节点 , 就将节点存储到编译函数外 , 后续更新时直接使用 , 不需要再进行编译更新 , 大大节省了编译时间
补丁标记和动态属性记录
Vue3.0中进行模板编译时遇到节点中需要动态编译元素 , 会根据元素类别不同 , 通过位运算进行标记 。 标记之后diff算法渲染时根据标记的不同进行不同的处理 , 减少部分不必要操作 , 大大提高的渲染性能 。
缓存事件处理程序
编译器在编译回调函数时 , 会优先从缓存中进行查找 , 若找到则进行使用 , 查找不到则进行生成新的会的回调函数 , 同时存放到缓存中 。 方便下次更新时使用 , 避免每次重新创建大大减少了性能损耗
区块block
对于一个父元素存在很多个子元素 , 编译器进行出处理时会将此父元素下所用的动态子元素查找出来 , 同时存放到以此父元素创建的block对象的动态子元素数组中 。 后面进行更新时diff算法会直接比较动态子元素数组中元素变化进行更新大大提升更新效率 。
总结
Vue在2.0的基础上进行了翻天覆地式的改变不仅将2.0中存在的缺点进行了优化 , 还完全向下兼容对之前版本的Vue的开发者特别友好 , 再加上Vue3.0中新的优化策略对资源的节约和性能的提升使Vue3.0更加强大更值得去使用开发项目 , 虽然美中不足的兼容性暂时未进行优化(Vue3.0基本上已经放弃了IE)但是不妨碍Vue3.0雄起 , 期待Vue3.0在以后大放异彩 。