【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等