Vue3新变化

1."新"

在 API 特性方面:

  • Composition API:可以更好的逻辑复用和代码组织,同一功能的代码不至于像以前一样太分散,虽然 Vue2 中可以用 minxin 来实现复用代码,但也存在问题,比如:方法或属性名会冲突、代码来源也不清楚等
  • SFC Composition API语法糖:
  • Teleport传送门:可以让子组件能够在视觉上跳出父组件(如父组件overflow:hidden)
  • Fragments:支持多个根节点,Vue2 中,编写每个组件都需要一个父级标签进行包裹,而Vue3 不需要,内部会默认添加 Fragments
  • SFC CSS变量:支持在 <style></style> 里使用 v-bind,给 CSS 绑定 JS 变量(color: v-bind(str)),且支持 JS 表达式 (需要用引号包裹起来);
  • Suspense:可以在组件渲染之前的等待时间显示指定内容,比如loading
  • v-memo:新增指令可以缓存 html 模板,比如 v-for 列表不会变化的就缓存,简单说就是用内存换时间

在 框架 设计层面:

  • 代码打包体积更小:许多VueAPI可以被Tree-Shaking,因为使用了es6moduletree-shaking 依赖于 es6模块的静态结构特性;
  • 响应式的优化:用 Proxy 代替 Object.defineProperty,可以监听到数组下标变化,及对象新增属性,因为监听的不是对象属性,而是对象本身,还可拦截 applyhas 等方法;
  • 虚拟DOM的优化:保存静态节点直接复用(静态提升)、以及添加更新类型标记(patchflag)(动态绑定的元素)
    • 静态提升:静态提升就是不参与更新的静态节点,只会创建一次,在之后每次渲染的时候会不停的被复用;
    • 更新类型标记:在对比VNode的时候,只对比带有更新类型标记的节点,大大减少了对比Vnode时需要遍历的节点数量;还可以通过 flag 的信息得知当前节点需要对比的内容类型;
    • 优化的效果:Vue3的渲染效率不再和模板大小成正比,而是与模板中的动态节点数量成正比;
  • Diff算法 的优化:Diff算法 使用 最长递增子序列 优化了对比流程,使得 虚拟DOM 生成速度提升 200%

在 兼容性 方面:

  • Vue3 不兼容 IE11,因为IE11不兼容Proxy

其余

  • v-if的优先级高于v-for,不会再出现vue2v-forv-if混用问题;
  • vue3v-model可以以v-model:xxx的形式使用多次,而vue2中只能使用一次;多次绑定需要使用sync
  • Vue3TS 编写,使得对外暴露的 api 更容易结合 TypeScript

2.watch 与 watchEffect

  • watch作用是对传入的某个或多个值的变化进行监听;触发时会返回新值和老值;也就是说第一次不会执行,只有变化时才会重新执行
  • watchEffect是传入一个立即执行函数,所以默认第一次也会执行一次;不需要传入监听内容,会自动收集函数内的数据源作为依赖,在依赖变化的时候又会重新执行该函数,如果没有依赖就不会执行;而且不会返回变化前后的新值和老值

watch加Immediate也可以立即执行

3.Fragments

Fragments 的出现,让 Vue3 一个组件可以有多个根节点(Vue2 一个组件只允许有一个根节点)

  • 因为虚拟DOM是单根树形结构的,patch 方法在遍历的时候从根节点开始遍历,这就要求了只有一个根节点;
  • Vue3 允许多个根节点,就是因为引入了 Fragment,这是一个抽象的节点,如果发现组件是多根的,就会创建一个 Fragment 节点,将多根节点作为它的 children

4.Teleport传送门

Teleportvue3推出的新功能,也就是传送的意思,可以更改dom渲染的位置。

比如日常开发中很多子组件会用到dialog,此时dialog就会被嵌到一层层子组件内部,处理嵌套组件的定位、z-index和样式都变得困难。Dialog从用户感知的层面,应该是一个独立的组件,我们可以用<Teleport>包裹Dialog, 此时就建立了一个传送门,传送到任何地方:<teleport to="#footer">

相关推荐
w_y_fan16 小时前
flutter_native_splash: ^2.4.7
android·前端·flutter
穿花云烛展16 小时前
项目实战4:奇思妙想console
前端
穿花云烛展16 小时前
项目实践3:一个冲突引起的灾难
前端·github
代码小学僧17 小时前
windows 电脑解决 Figma 提示 PingFang font missing 问题
前端·设计师
Java陈序员17 小时前
免费高颜值!一款跨平台桌面端视频资源播放器!
vue.js·typescript·electron
Asort17 小时前
JavaScript设计模式(十九)——观察者模式 (Observer)
前端·javascript·设计模式
Sherry00717 小时前
【译】 CSS 布局算法揭秘:一次思维转变,让 CSS 从玄学到科学
前端·css
老前端的功夫17 小时前
虚拟列表:拯救你的万级数据表格
前端
colorFocus17 小时前
vue在页面退出前别忘记做好这些清理工作
前端·vue.js
星链引擎17 小时前
4sapi生成式 AI 驱动下的智能聊天机器人
前端