admin 发表于 2021-9-11 22:48:58

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

Vue 3 中需要关注的一些新功能包括:
[*]组合式 API
[*]Teleport
[*]片段
[*]触发组件选项
[*]createRenderer API 来自 @vue/runtime-core 创建自定义渲染器
[*]单文件组件组合式 API 语法糖 (<script setup>) 实验性
[*]单文件组件状态驱动的 CSS 变量 (<style vars>) 实验性
[*]单文件组件 <style scoped> 现在可以包含全局规则或只针对插槽内容的规则
#非兼容的变更提示我们仍在开发 Vue 3 的专用迁移版本,该版本的行为与 Vue 2 兼容,运行时警告不兼容。如果你计划迁移一个非常重要的 Vue 2 应用程序,我们强烈建议你等待迁移版本完成以获得更流畅的体验。
下面列出了从 2.x 开始的重大更改:#Global API
[*]全局 Vue API 已更改为使用应用程序实例
[*]全局和内部 API 已经被重构为可 tree-shakable
#模板指令
[*]组件上 v-model 用法已更改
[*]<template v-for> 和非 - v-for 节点上 key 用法已更改
[*]在同一元素上使用的 v-if 和 v-for 优先级已更改
[*]v-bind="object" 现在排序敏感
[*]v-for 中的 ref 不再注册 ref 数组
#组件
[*]只能使用普通函数创建功能组件
[*]functional 属性在单文件组件 (SFC) <template> 和 functional 组件选项被抛弃
[*]异步组件现在需要 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/else、v-for 或 v-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 RouterVue Router 4.0 提供了 Vue 3 支持,并有许多突破性的变化,查看 README 中完整的细节,
[*]https://img.shields.io/npm/v/vue-router/next.svg
[*]Github
[*]RFCs
#VuexVuex 4.0 提供了 Vue 3 支持,其 API 与 3.x 基本相同。唯一的突破性变化是插件的安装方式。
[*]https://img.shields.io/npm/v/vuex/next.svg
[*]Github
#Devtools Extension我们正在开发一个新版本的 Devtools,它有一个新的 UI 和经过重构的内部结构,以支持多个 Vue 版本。新版本目前处于测试阶段,目前只支持 Vue 3。Vuex 和路由器的集成也在进行中。
[*]Chrome:从 Chrome web 商店中安装

[*]提示:beta 版本可能与 devtools 的稳定版本冲突,因此你可能需要暂时禁用稳定版本,以便 beta 版本正常工作。
[*]Firefox:下载签名扩展 (assets 下的 .xpi 文件)
#IDE 支持推荐使用 VSCode 和我们官方拓展 Vetur,它为 Vue 3 提供了全面的 IDE 支持
页: [1]
查看完整版本: Vue 3 中需要关注的一些新功能