- vue 2.0 options api
- vue 3.0 composition api
快速开始
如果你想要在一个新项目里快速尝试 Vue 3:
通过 CDN:``
Codepen 上的浏览器内试验田
CodeSandbox 上的浏览器内沙盒
通过脚手架 Vite:
npm init vite hello-vue3 -- --template vue # 或 yarn create vite hello-vue3 --template vue
通过脚手架 vue-cli:
npm install -g @vue/cli # 或 yarn global add @vue/cli vue create hello-vue3 # 选择 vue 3 preset
值得注意的新特性
Vue 3 中一些需要关注的新功能包括:
- 组合式 API
- Teleport
- 片段
- 触发组件选项
- 来自
@vue/runtime-core
的createRenderer
API,用于创建自定义渲染器 - 单文件组件组合式 API 语法糖 (``)
- 单文件组件状态驱动的 CSS 变量 (`` 中的
v-bind
) - SFC `` 现在可以包含全局规则或只针对插槽内容的规则
- Suspense 实验性
#非兼容的变更
下面列出了从 2.x 开始的非兼容的变更:
#全局 API
#模板指令
- 组件上
v-model
用法已更改,以替换v-bind.sync
- ` 和非 `v-for` 节点上的 `key` 用法已更改
- 在同一元素上使用的
v-if
和v-for
优先级已更改 v-bind="object"
现在排序敏感v-on:event.native
修饰符已移除v-for
中的ref
不再注册 ref 数组
#组件
- 只能使用普通函数创建函数式组件
- `functional` attribute 在单文件组件 (SFC) 的 ` 和 `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 被重命名
- `` 不再默认渲染包裹元素
- 当侦听一个数组时,只有当数组被替换时,回调才会触发,如果需要在变更时触发,则必须指定
deep
选项 - 没有特殊指令的标记 (
v-if/else-if/else
、v-for
或v-slot
) 的现在被视为普通元素,并将渲染为原生的
元素,而不是渲染其内部内容。 - 已挂载的应用不会取代它所挂载的元素
- 生命周期的
hook:
事件前缀改为vnode-
#被移除的 API
keyCode
作为v-on
修饰符的支持- on、off 和 $once 实例方法
- 过滤器 (filter)
- 内联模板 attribute
$children
实例 propertypropsData
选项$destroy
实例方法。用户不应再手动管理单个 Vue 组件的生命周期。- 全局函数
set
和delete
以及实例方法$set
和$delete
。基于代理的变化检测已经不再需要它们了。