具体可参考:
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E6%A6%82%E8%A7%88
- 生命周期
- 数据响应式区别 Object.defineProperty => proxy
- Diff 算法
- TS的支持
- 打包优化
- composition api
- ref/reactive/toRef/toRefs
- watch/watchEffect
- 函数组件
- Fragment, Teleport, Suspense
官网给的注意的新特性:
https://v3.cn.vuejs.org/guide/migration/introduction.html#%E5%BF%AB%E9%80%9F%E5%BC%80%E5%A7%8B
Vue 3 中一些需要关注的新功能包括:
- 组合式 API
- Teleport
- 片段
- 触发组件选项
-
来自
@vue/runtime-core的createRendererAPI,用于创建自定义渲染器 - 单文件组件组合式 API 语法糖 (
<script setup>) - 单文件组件状态驱动的 CSS 变量 (
<style>中的v-bind) - SFC
<style scoped>现在可以包含全局规则或只针对插槽内容的规则 - Suspense 实验性
全局 API
#模板指令
- 组件上
v-model用法已更改,以替换v-bind.sync <template v-for>和非v-for节点上的key用法已更改- 在同一元素上使用的
v-if和v-for优先级已更改 v-bind="object"现在排序敏感v-on:event.native修饰符已移除v-for中的ref不再注册 ref 数组
#组件
- 只能使用普通函数创建函数式组件
functionalattribute 在单文件组件 (SFC) 的<template>和functional组件选项中被废弃- 异步组件现在需要使用
defineAsyncComponent方法来创建 - 组件事件现在需要在
emits选项中声明
#渲染函数
- 渲染函数 API 更改
$scopedSlotsproperty 已移除,所有插槽都通过$slots作为函数暴露$listeners被移除或整合到$attrs$attrs现在包含class和styleattribute
#自定义元素
#其他小改变
-
destroyed生命周期选项被重命名为unmounted -
beforeDestroy生命周期选项被重命名为beforeUnmount defaultprop 工厂函数不再可以访问this上下文- 自定义指令的 API 已更改为与组件生命周期一致,且
binding.expression已移除 data选项应始终被声明为一个函数- 来自 mixin 的
data选项现在为浅合并 - Attribute 强制策略已更改
- 一些过渡的 class 被重命名
<TransitionGroup>不再默认渲染包裹元素- 当侦听一个数组时,只有当数组被替换时,回调才会触发,如果需要在变更时触发,则必须指定
deep选项 - 没有特殊指令的标记 (
v-if/else-if/else、v-for或v-slot) 的<template>现在被视为普通元素,并将渲染为原生的<template>元素,而不是渲染其内部内容。 - 已挂载的应用不会取代它所挂载的元素
- 生命周期的
hook:事件前缀改为vnode-
#被移除的 API
keyCode作为v-on修饰符的支持off 和 $once 实例方法
- 过滤器 (filter)
- 内联模板 attribute
$children实例 propertypropsData选项-
$destroy实例方法。用户不应再手动管理单个 Vue 组件的生命周期。 - 全局函数
set和delete以及实例方法$set和$delete。基于代理的变化检测已经不再需要它们了。