【vue3笔记】vue3新特性

2023年4月8号,打卡第一篇vue3笔记

vue2 Options API:
比较分散,data中定义数据,methods中去用,watch中用到的话,写起来比较分散

vue3 Composition API(组合式api)
比较分明,逻辑可以写成一块,或者封装成hook

vue3新特性:

重写双向绑定,提升VDOM性能瓶颈,Fragment,Tree-Shaking支持,Composition API

重写双向绑定
vue 2 :基于Object.definePropert()实现,对数组不太友好,要重写数组,并且直接修改数组长度是监听不到的
vue3:基于es6的proxy,对数组比较友好

优化Vdom
vue2:每次更新diff,都是全量对比
vue3:只对比带有标记的,大大减少了非动态内容的对比消耗

Fragment
vue2: template里只能有一个根节点div标签
vue3:template里允许多个根节点div标签,给根节点加了虚拟节点,vue帮做了,虚拟节点并不会做渲染

Tree-Shaking
vue2:无法支持Tree-Shaking,无论使用什么功能,最终都会出现在生产代码中,因为vue实例是单例的,捆绑程序无法检测到该对象的哪些属性在代码中被使用到
vue3:保持代码运行结果不变的前提下,去除无用的代码。将全局api进行分块,如果不使用某些功能,将不会包含在基础包里,没用到就不会打包,减少体积,如果使用的话,可以单独页面引用,如 import {watch,computed} from ‘vue’

Composition API
vue2:无
vue3:独有,Setup语法糖式编程,如:ref、recative、watch、computed、toRefs、toRaws等

猜你喜欢

转载自blog.csdn.net/weixin_49668076/article/details/130034800