具体可参考:
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
的createRenderer
API,用于创建自定义渲染器 - 单文件组件组合式 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 数组
#组件
- 只能使用普通函数创建函数式组件
functional
attribute 在单文件组件 (SFC) 的<template>
和functional
组件选项中被废弃- 异步组件现在需要使用
defineAsyncComponent
方法来创建 - 组件事件现在需要在
emits
选项中声明
#渲染函数
- 渲染函数 API 更改
$scopedSlots
property 已移除,所有插槽都通过$slots
作为函数暴露$listeners
被移除或整合到$attrs
$attrs
现在包含class
和style
attribute
#自定义元素
#其他小改变
-
destroyed
生命周期选项被重命名为unmounted
-
beforeDestroy
生命周期选项被重命名为beforeUnmount
default
prop 工厂函数不再可以访问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
。基于代理的变化检测已经不再需要它们了。