介绍
刚接触 Vue.js?先从开始吧。
本指南主要是为有 Vue 2 经验的用户希望了解 Vue 3 的新功能和更改而提供的。在试用 Vue 3 之前,你不必从头阅读这些内容。虽然看起来有很多变化,但很多你已经了解和喜欢 Vue 的部分仍是一样的。不过我们希望尽可能全面,并为每处变化提供详细的例子。
开始学习 Vue 3 Vue Mastery (opens new window)。
通过 CDN:
通过 的浏览器 playground
- 创建自定义渲染器
- 单文件组件 Composition API 语法糖 (
<script setup>
) (opens new window) 实验性 - 实验性
- 单文件组件
<style scoped>
现在可以包含全局规则或只针对插槽内容的规则 (opens new window)
提示
我们仍在开发 Vue 3 的专用迁移版本,该版本的行为与 Vue 2 兼容,运行时警告不兼容。如果你计划迁移一个非常重要的 Vue 2 应用程序,我们强烈建议你等待迁移版本完成以获得更流畅的体验。
下面列出了从 2.x 开始的重大更改:
模板指令
组件
渲染函数
一些转换 class 被重命名了:
v-enter
->v-enter-from
v-leave
->v-leave-from
destroyed
生命周期选项被重命名为unmounted
beforeDestroy
生命周期选项被重命名为beforeUnmount
- prop
default
工厂函数不再有权访问 是上下文 data
应始终声明为函数- attribute 强制策略已更改
- 组建 watch 选项和 不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
<template>
没有特殊指令的标记 (v-if/else-if/else
、v-for
或v-slot
) 现在被视为普通元素,并将生成原生的<template>
元素,而不是渲染其内部内容。- 在 Vue 2.x 中,应用根容器的
outerHTML
将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue 3.x 现在使用应用容器的innerHTML
,这意味着容器本身不再被视为模板的一部分。
移除 API
keyCode
支持作为v-on
的修饰符- 过滤
$destroy
实例方法。用户不应再手动管理单个 Vue 组件的生命周期。
我们所有的官方库和工具现在都支持 Vue 3,但大多数仍然处于 beta 状态,并在 npm 的 next
dist 标签下发布。我们正计划在 2020 年底前稳定所有项目,并将其转换为使用 latest
的 dist 标签。
Vue CLI
从 v4.5.0 开始,vue-cli
现在提供了内置选项,可在创建新项目时选择 Vue 3 预设。现在可以升级 vue-cli
并运行 来创建 Vue 3 项目。
Vue Router
Vue Router 4.0 提供了 Vue 3 支持,并有许多突破性的变化,查看 README (opens new window) 中完整的细节,
Vuex 4.0 提供了 Vue 3 支持,其 API 与 3.x 基本相同。唯一的突破性变化是插件的安装方式 (opens new window)。
Devtools Extension
我们正在开发一个新版本的 Devtools,它有一个新的 UI 和经过重构的内部结构,以支持多个 Vue 版本。新版本目前处于测试阶段,目前只支持 Vue 3。Vuex 和路由器的集成也在进行中。
Chrome:
- 提示:beta 版本可能与 devtools 的稳定版本冲突,因此你可能需要暂时禁用稳定版本,以便 beta 版本正常工作。
- Firefox:下载签名扩展 (opens new window) (assets 下的
.xpi
文件)