举报投诉联系我们 手机版 热门标签 编程学
您的位置:编程学 > vue 3.0 Vue 3.0 介绍

vue 3.0 Vue 3.0 介绍

2023-03-19 09:18 VUE3教程

vue 3.0 Vue 3.0 介绍

vue 3.0

Vue 3.0 是 Vue.js 的下一代版本,它将提供更快的性能、更好的可扩展性和更多的新功能。Vue 3.0 将使用 TypeScript 作为其默认开发语言,并采用新的编译器来改进性能。它还将包含一个新的响应式系统,以及一个全新的 API,以帮助开发者构建更复杂的应用程序。

// 使用 TypeScript 的 Vue 3.0 示例代码
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

Vue 3.0 还将包含一些其他新特性,如 Composition API、Fragments、Portals 和 Suspense。Composition API 是一种新的方法,可以帮助开发者分解复杂组件,并把它们重新组合成单个组件。Fragments 允许开发者在单个根元素中渲染多个子元素,而 Portals 则允许在不同位置上呈现相同内容。Suspense 则是一项新特性,它可以帮助开发者优化应用中数据加载时间。

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" rel="external nofollow" ></script>

  • 通过 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 用法已更改
  • <template>v-for和非 - v-for 节点上 key 用法已更改
  • 在同一元素上使用的 v-ifv-for 优先级已更改
  • v-bind="object" 现在排序敏感
  • v-for 中的 ref 不再注册 ref 数组

#组件

  • 只能使用普通函数创建功能组件
  • functional 属性在单文件组件 (SFC) <template> 已被移除
  • 异步组件现在需要 defineAsyncComponent 方法来创建

#渲染函数

  • 渲染函数 API 改变
  • $scopedSlots property 已删除,所有插槽都通过 $slots 作为函数暴露
  • 自定义指令 API 已更改为与组件生命周期一致
  • 一些转换 class 被重命名了:
    • v-enter -> v-enter-from
    • v-leave -> v-leave-from
  • 组件 watch 选项和实例方法 $watch 不再支持点分隔字符串路径,请改用计算函数作为参数
  • 在 Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。VUE3.x 现在使用应用程序容器的 innerHTML

#其他小改变

  • destroyed 生命周期选项被重命名为 unmounted
  • beforeDestroy 生命周期选项被重命名为 beforeUnmount
  • prop default 工厂函数不再有权访问 this 是上下文
  • 自定义指令 API 已更改为与组件生命周期一致
  • data 应始终声明为函数
  • 来自 mixin 的 data 选项现在可简单地合并
  • attribute 强制策略已更改
  • 一些过渡 class 被重命名
  • 组建 watch 选项和实例方法 $watch 不再支持以点分隔的字符串路径。请改用计算属性函数作为参数。
  • <template> 没有特殊指令的标记 (v-if/else-if/elsev-forv-slot) 现在被视为普通元素,并将生成原生的 <template> 元素,而不是渲染其内部内容。
  • 在 Vue 2.x 中,应用根容器的 outerHTML 将替换为根组件模板 (如果根组件没有模板/渲染选项,则最终编译为模板)。Vue 3.x 现在使用应用容器的 innerHTML,这意味着容器本身不再被视为模板的一部分。

#移除 API

  • keyCode 支持作为 v-on 的修饰符
  • $on,$off 和 $once 实例方法
  • 过滤
  • 内联模板 attribute
  • $destroy 实例方法。用户不应再手动管理单个 Vue 组件的生命周期。

#支持的库

我们所有的官方库和工具现在都支持 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 中完整的细节,

  • beta
  • Github
  • RFCs

#Vuex

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

  • beta
  • Github

#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 介绍全部内容。
声明:本站所有文章资源内容,如无特殊说明或标注,均为采集网络资源。如若本站内容侵犯了原著者的合法权益,可联系本站删除。
相关文章
© 2024 编程学 bianchengxue.com 版权所有 联系我们
桂ICP备19012293号-7 返回底部