vue 3.x 如何高效学成？本文详解

前言

本文所分享的是关于 vue 3.x 在用法上的改变，而不是在代码实现上的不同。

虽然 vue2 到 vue3 的实现大改，但在用法上变化基本不大，比较明显的一个变化就是添加了 setup(){} 函数了，几乎所有的配置变成了以函数的方式进行定义。即使是这样，但小改动还是很多的。本文主要分享的是 vue 2.x 与 vue 3.x 之间一些常见用法的差异。虽然记录的不多，但也不算少。本文资料来源：github.com/vuejs/rfcs/…

当然这里默认你已经熟练掌握了 vue 2.x 的使用，下面我们就来看看。

 

 

新增

composition-api

1.逻辑复用和代码组织

这是 vue 3.0 的一个核心变更了。除了改了我们定义状态的书写方式外，也为我们提供体验更棒的逻辑复用和代码组织，新的方式可以让你把同一个业务逻辑的代码（状态，计算属性，方法等）都放到一块。这听起来可能有点不明不白，但如果你写过比较复杂的组件，你就会发现，这个好。旧版本的 created、beforeCreated 钩子函数已费弃，在 vue 3.0 中用 setup 代替。
另外注意：光理论是不够的。在此赠送2020最新企业级 Vue3.0/Js/ES6/TS/React/node等实战视频教程，想学的可进裙 519293536 免费获取，小白勿进哦！

2.更好的类型推断

更好的支持 TypeScript。

可以看这篇文章：github.com/vuejs/rfcs/…

或者阅读这篇（中文）：vue-composition-api-rfc.netlify.app/zh/

完整的 API：vue-composition-api-rfc.netlify.app/zh/api.html

teleport 组件

teleport 组件它只是单纯的把定义在其内部的内容转移到目标元素中，在元素结构上不会产生多余的元素，当然也不会影响到组件树，它相当于透明的存在。为什么要有这个组件？为了有更好的代码组织体验。比如：有时，组件模板的一部分在逻辑上属于此组件，但从技术角度来看(如：样式化需求），最好将模板的这一部分移动到 DOM 中的其他位置。

比如：一些 UI 组件库的 模态窗、对话框、通知，下拉菜单等需要通过 z-index 来控制层级关系，如果都只是在不同的组件或者元素层级中，那么 z-index 的层级顺序就难以保证。可能你会说很多 UI 库不是都已经是这样的实现了的吗？至于这个 UI 库是如何实现的，我猜应该是直接操作 DOM。为什么还要提供这个 teleport 组件呢？可能是因为vue 本身的使命使然：尽量不让开发者直接操作 DOM，这些事都统一由 VUE 来完成。开发者可以把更多的时间放在业务的开发上。

<teleport to="#modals">
  <div>Adiv> teleport> <teleport to="#modals"> <div>Bdiv> teleport>  <div id="modals"> <div>Adiv> <div>Bdiv> div> 复制代码

更多细节可看：github.com/vuejs/rfcs/…

Suspense

加载异步组件，在异步组件加载完成成并完全渲染之前 suspense 会先显示 #fallback 插槽的内容 。

<Suspense>
  <template>
    <Suspended-component /> template> <template #fallback> Loading... template> Suspense> 复制代码

#fallback 其实是插件 v-solt 的简写，而第一个 template 没有给，则为默认插槽。

变更

插槽 slot 语法

github.com/vuejs/rfcs/…

适用版本：Version: 2.x，Version: 3.x

未来版本的 vue 中可以说合二为一了（slot 和 slot-scope）

<foo>
  <bar slot="one" slot-scope="one"> <div slot-scope="bar"> {{ one }} {{ bar }} div> bar> <bar slot="two" slot-scope="two"> <div slot-scope="bar"> {{ two }} {{ bar }} div> bar> foo>  <foo> <template v-slot:one="one"> <bar v-slot="bar"> <div>{{ one }} {{ bar }}div> bar> template> <template v-slot:two="two"> <bar v-slot="bar"> <div>{{ two }} {{ bar }}div> bar> template> foo> 复制代码

我觉得这是好事，合二为一，不会让人有一点点的困惑。

简写

<TestComponent>
  <template #one="{ name }">Hello {{ name }}template> TestComponent> 复制代码

指令动态参数

适用版本：Version: 2.x，Version: 3.x

<div v-bind:[key]="value">div>  <div :[key]="value">div>  <div v-on:[event]="handler">div>  <div @[event]="handler">div>  <foo> <template v-slot:[name]> Hello template> foo>   <foo> <template #[name]> Default slot template> foo> 复制代码

简单地说就是指令名，事件名，插槽名，都可以使用变量来定义了。

Tree-shaking

适用版本：Version: 3.x

在 vue 3 中不会把所有的 api 都打包进来，只会 打包你用到的 api

import Vue from 'vue'

Vue.nextTick(() => {}) const obj = Vue.observable({})  import Vue, { nextTick, observable } from 'vue' Vue.nextTick // undefined nextTick(() => {}) const obj = observable({}) 复制代码

即我们在项目中用什么什么，就只会打包什么，不会像 vue 2.x 那样全部 api 都打包。

.sync 大变样

适用版本： vue 3.x

<MyComponent v-bind:title.sync="title" />  <MyComponent v-model:title="title" /> 复制代码

也就是说，vue 3.0 又去掉了 .sync ，合并到了 v-model 里，而 v-model 的内部实现也有了小调整

元素

<input v-model="xxx">

 <input :model-value="xxx" @update:model-value="newValue => { xxx = newValue }" > 复制代码

组件

"xxx"/>




复制代码

不过好像组 alpha 版本的还不支持 v-model:aaa="xxx"

函数组件

适用版本： vue 3.x

const FunctionalComp = {
  functional: true,
  render(h) {
    return h('div', `Hello! ${props.name}`) } }  import { h } from 'vue' const FunctionalComp = (props, { slots, attrs, emit }) => { return h('div', `Hello! ${props.name}`) } 复制代码

不再需要 functional:true 选项，