codecamp

Vue 3.0 介绍

INFO

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

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

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

#概览

点击此处实现

开始学习 Vue 3 Vue Mastery

#快速开始

  • 通过 CDN:<script src="https://unpkg.com/vue@next"></script>

  • 通过 Codepen 的浏览器 playground

  npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue3

  npm install -g @vue/cli # OR yarn global add @vue/cli
  vue create hello-vue3
  # select vue 3 preset

#值得注意的新特性

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

#非兼容的变更

提示

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

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

#Global API

#模板指令

#组件

#渲染函数

#其他小改变

#移除 API

#支持的库

我们所有的官方库和工具现在都支持 Vue 3,但大多数仍然处于 beta 状态,并在 npm 的 next dist 标签下发布。我们正计划在 2020 年底前稳定所有项目,并将其转换为使用 latest 的 dist 标签

#Vue CLI

从 v4.5.0 开始,vue-cli 现在提供了内置选项,可在创建新项目时选择 Vue 3 预设。现在可以升级 vue-cli 并运行 vue create 来创建 Vue 3 项目。

#Vue Router

Vue Router 4.0 提供了 Vue 3 支持,并有许多突破性的变化,查看 README 中完整的细节,

#Vuex

Vuex 4.0 提供了 Vue 3 支持,其 API 与 3.x 基本相同。唯一的突破性变化是插件的安装方式

#Devtools Extension

我们正在开发一个新版本的 Devtools,它有一个新的 UI 和经过重构的内部结构,以支持多个 Vue 版本。新版本目前处于测试阶段,目前只支持 Vue 3。Vuex 和路由器的集成也在进行中。

  • Chrome:从 Chrome web 商店中安装
    • 提示:beta 版本可能与 devtools 的稳定版本冲突,因此你可能需要暂时禁用稳定版本,以便 beta 版本正常工作。
  • Firefox:下载签名扩展 (assets 下的 .xpi 文件)

#IDE 支持

推荐使用 VSCode 和我们官方拓展 Vetur,它为 Vue 3 提供了全面的 IDE 支持

#其他项目

项目 npm 仓库
@vue/babel-plugin-jsx rc [Github]
eslint-plugin-vue beta [Github]
@vue/test-utils beta [Github]
vue-class-component beta [Github]
vue-loader beta [Github]
rollup-plugin-vue beta [Github]
Vue 3.0 资源
Vue 3.0 v-for中的Ref数组
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

Vue.js 3.0 风格指南

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }