Vue3新版本特性英文翻译
在Vue Mastery开始学习Vue 3。快速开始 通过CDN：<script src="https:/unpkg.com/vuenext"></script> Codepen的浏览器内游乐场 通过Vite脚手架： npm init vite-app hello-vue3 # OR yarn create vite-app hello-vue31个 通过vue-cli搭建支架： npm install -g vue/cli # OR yarn global add vue/cli vue create hello-vue3 # select vue 3 preset123显着的新功能Vue 3中需要关注的一些新功能包括： 合成API 传送 碎片 发出组件选项 createRenderervue/runtime-core用于创建自定义渲染器的API SFC成分API语法糖（<script setup>）实验性的 SFC状态驱动的CSS变量（<style vars>）实验性的 SFC<style scoped>现在可以包括全局规则或仅针对广告位内容的规则重大变化信息我们仍在致力于Vue 3的专用迁移构建，该版本具有Vue 2兼容的行为以及使用不兼容的运行时警告。如果您打算迁移不平凡的Vue 2应用程序，我们强烈建议您等待迁移版本以获得更流畅的体验。以下是从2.x进行的重大更改的列表：全局API Global Vue API更改为使用应用程序实例 全局和内部API已重组为可摇树的模板指令 v-model组件上的用法已重新设计 key<template v-for>和非v-for节点上的使用情况已更改 v-if和v-for在同一元素上使用时的优先级已更改 v-bind="object"现在对订单敏感 ref内部v-for不再注册引用数组组件 功能组件只能使用普通函数创建 functional单文件组件（SFC）上的属性<template>和functional组件选项已弃用 异步组件现在需要defineAsyncComponent创建方法渲染功能 渲染功能API已更改 $scopedSlots属性被删除，所有插槽都通过$slotsas函数公开自定义元素 现在在模板编译期间执行自定义元素白名单 特殊is道具的使用仅限于保留<component>标签其他小的变化 在destroyed生命周期的选项已更名为unmounted 在beforeDestroy生命周期的选项已更名为beforeUnmount 道具default工厂功能不再可以访问this上下文 自定义指令API更改为与组件生命周期保持一致 该data选项应始终声明为函数 data现在，mixin中的选项已被浅层合并 属性强制策略已更改 一些过渡班改名了 当观看数组时，回调仅在替换数组时触发。如果需要触发突变，则deep必须指定该选项。 <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实例方法 筛选器 内联模板属性 $destroy实例方法。用户不应再手动管理各个Vue组件的生命周期。支持图书馆我们所有的官方库和工具现在都支持Vue 3，但是其中大多数仍处于beta状态，并next在NPM上的dist标签下分发。我们计划在latest2020年底之前稳定并切换所有项目以使用dist标签。Vue CLI从v4.5.0开始，vue-cli现在提供了内置选项，可以在创建新项目时选择Vue 3预设。您可以立即升级vue-cli并运行vue create以创建Vue 3项目。Vue路由器Vue路由器4.0提供Vue 3支持，并且具有许多重大更改。查看其自述文件以获取全部详细信息。 Github RFC威克斯Vuex 4.0通过与3.x大致相同的API提供了Vue 3支持。唯一的重大变化是插件的安装方式。 GithubDevtools扩展我们正在开发具有新UI和重构内部结构的Devtools的新版本，以支持多个Vue版本。新版本目前处于测试阶段，仅支持Vue 3（目前）。Vuex和路由器的集成也在进行中。 对于Chrome：从Chrome网上应用店安装o 注意：Beta通道可能与devtools的稳定版本冲突，因此您可能需要暂时禁用稳定版本以使Beta通道正常工作。 对于Firefox：下载签名的扩展名（.xpi资产下的文件）IDE支持建议将VSCode与我们的官方扩展Vetur一起使用，该扩展为Vue 3提供全面的IDE支持。v-用于数组引用破在Vue 2中，使用ref内部的属性v-for将使用$refsref数组填充相应的属性。当存在v-fors时，此行为变得模棱两可且效率低下。在Vue 3中，这种用法将不再在中自动创建数组$refs。要从单个绑定中检索多个引用，请绑定ref到提供更大灵活性的函数（这是一个新功能）：<div v-for="item in list" :ref="setItemRef"></div>1个使用Options API：export default data() return itemRefs: , methods: setItemRef(el) this.itemRefs.push(el) , beforeUpdate() this.itemRefs = , updated() console.log(this.itemRefs) 123456789101112131415161718使用Composition API：import ref, onBeforeUpdate, onUpdated from vueexport default setup() let itemRefs = const setItemRef = el => itemRefs.push(el) onBeforeUpdate() => itemRefs = ) onUpdated() => console.log(itemRefs) ) return itemRefs, setItemRef 1234567891011121314151617181920注意： itemRefs不必是数组：它也可以是通过引用的迭代键设置引用的对象。 itemRefs如果需要的话，这也可以使之反应并观察。异步组件新总览以下是发生变化的高级概述： defineAsyncComponent明确定义异步组件的新帮助器方法 component选项重命名为loader 加载程序函数本身不接收resolve和reject传递参数，必须返回Promise有关更深入的解释，请继续阅读！介绍以前，异步组件是通过简单地将组件定义为返回promise的函数来创建的，例如：const asyncPage = () => import(./NextPage.vue)1个或者，对于带有选项的更高级的组件语法：const asyncPage = component: () => import(./NextPage.vue), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent12345673.x语法现在，在Vue 3中，由于功能组件被定义为纯函数，因此需要通过将异步组件定义包装在新的defineAsyncComponent帮助器中来明确定义异步组件定义：import defineAsyncComponent from vueimport ErrorComponent from ./components/ErrorComponent.vueimport LoadingComponent from ./components/LoadingComponent.vue/ Async component without optionsconst asyncPage = defineAsyncComponent() => import(./NextPage.vue)/ Async component with optionsconst asyncPageWithOptions = defineAsyncComponent( loader: () => import(./NextPage.vue), delay: 200, timeout: 3000, errorComponent: ErrorComponent, loadingComponent: LoadingComponent)123456789101112131415从2.x进行的另一个更改是，component现在将该选项重命名为loader，以便准确传达无法直接提供组件定义的信息。import defineAsyncComponent from vueconst asyncPageWithOptions = defineAsyncComponent( loader: () => import(./NextPage.vue), delay: 200, timeout: 3000, error: ErrorComponent, loading: LoadingComponent)123456789此外，与2.x不同，加载器函数不再接收resolve和reject参数，并且必须始终返回Promise。/ 2.x versionconst oldAsyncComponent = (resolve, reject) => /* .
