创新互联VUE3教程：Vue3.0介绍

INFO

刚接触 Vue.js？先从基础指南开始吧。

本指南主要是为有 Vue 2 经验的用户希望了解 Vue 3 的新功能和更改而提供的。在试用 Vue 3 之前，你不必从头阅读这些内容。虽然看起来有很多变化，但很多你已经了解和喜欢 Vue 的部分仍是一样的。不过我们希望尽可能全面，并为每处变化提供详细的例子。

  • 快速开始
  • 值得注意的新特性
  • 重大改变
  • 支持的库

#概览

点击此处实现

开始学习 Vue 3 Vue Mastery。

#快速开始

  • 通过 CDN：
  • 通过 Codepen 的浏览器 playground
  • 脚手架 Vite：
  npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

  • 脚手架 vue-cli：
  npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset

#值得注意的新特性

Vue 3 中需要关注的一些新功能包括：

  • 组合式 API
  • Teleport
  • 片段
  • 触发组件选项
  • createRenderer API 来自 @vue/runtime-core 创建自定义渲染器
  • 单文件组件组合式 API 语法糖 (``) 实验性
  • 单文件组件状态驱动的 CSS 变量 (``) 实验性
  • 单文件组件 `` 现在可以包含全局规则或只针对插槽内容的规则

#非兼容的变更

提示

我们仍在开发 Vue 3 的专用迁移版本，该版本的行为与 Vue 2 兼容，运行时警告不兼容。如果你计划迁移一个非常重要的 Vue 2 应用程序，我们强烈建议你等待迁移版本完成以获得更流畅的体验。

下面列出了从 2.x 开始的重大更改：

#Global API

  • 全局 Vue API 已更改为使用应用程序实例
  • 全局和内部 API 已经被重构为可 tree-shakable

#模板指令

  • 组件上 v-model 用法已更改