【轉載】vue 3.x 如何有驚無險地快速入門 —— 一文掃遍 vue2 與 3 的差異點

前言

本文所分享的是關於 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 代替。

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>A</div>
</teleport>
<teleport to="#modals">
  <div>B</div>
</teleport>
    
<!-- result-->
<div id="modals">
  <div>A</div>
  <div>B</div>
</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）

<!-- vue 2.x -->
<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>
    
<!-- vue 3.x -->
<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

<!-- v-bind with dynamic key -->
<div v-bind:[key]="value"></div>
    
<!-- v-bind shorthand with dynamic key -->
<div :[key]="value"></div>
    
<!-- v-on with dynamic event -->
<div v-on:[event]="handler"></div>
    
<!-- v-on shorthand with dynamic event -->
<div @[event]="handler"></div>
    
<!-- v-slot with dynamic name -->
<foo>
  <template v-slot:[name]>
    Hello
  </template>
</foo>
    
<!-- v-slot shorthand with dynamic name -->
<!-- pending #3 -->
<foo>
  <template #[name]>
    Default slot
  </template>
</foo>

簡單地說就是指令名，事件名，插槽名，都可以使用變量來定義了。

Tree-shaking

適用版本：Version: 3.x

在 vue 3 中不會把所有的 api 都打包進來，只會打包你用到的 api

<!-- vue 2.x -->
import Vue from 'vue'

Vue.nextTick(() => {})

const obj = Vue.observable({})

<!-- vue 3.x -->
import Vue, { nextTick, observable } from 'vue'

Vue.nextTick // undefined

nextTick(() => {})

const obj = observable({})

即我們在項目中用什麼什麼，就只會打包什麼，不會像 vue 2.x 那樣全部 api 都打包。

.sync 大變樣

適用版本： vue 3.x

<!-- vue 2.x -->
<MyComponent v-bind:title.sync="title" />

<!-- vue 3.x -->
<MyComponent v-model:title="title" />

也就是說，vue 3.0 又去掉了 .sync ，合併到了 v-model 裏，而 v-model 的內部實現也有了小調整

元素

<input v-model="xxx">

<!-- would be shorthand for: -->

<input
  :model-value="xxx"
  @update:model-value="newValue => { xxx = newValue }"
>

組件

<MyComponent v-model:aaa="xxx"/>

<!-- would be shorthand for: -->

<MyComponent
  :aaa="xxx"
  @update:aaa="newValue => { xxx = newValue }"
/>

不過好像組 alpha 版本的還不支持 v-model:aaa="xxx"

函數組件

適用版本： vue 3.x

<!-- vue 2.x -->
const FunctionalComp = {
  functional: true,
  render(h) {
    return h('div', `Hello! ${props.name}`)
  }
}
    
<!-- vue 3.x -->
import { h } from 'vue'
const FunctionalComp = (props, { slots, attrs, emit }) => {
  return h('div', `Hello! ${props.name}`)
}

不再需要 functional:true 選項，<template functional> 不再支付

異步組件也必需通過 api 方法創建

import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => import('./Foo.vue'))

全局 api

適用版本： vue 3.x

在 vue 2.x 中

import Vue from 'vue'
import App from './App.vue'

Vue.config.ignoredElements = [/^app-/]
Vue.use(/* ... */)
Vue.mixin(/* ... */)
Vue.component(/* ... */)
Vue.directive(/* ... */)

Vue.prototype.customProperty = () => {}

new Vue({
  render: h => h(App)
}).$mount('#app')

在 vue 3.x 中

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.isCustomElement = tag => tag.startsWith('app-')
app.use(/* ... */)
app.mixin(/* ... */)
app.component(/* ... */)
app.directive(/* ... */)

app.config.globalProperties.customProperty = () => {}

app.mount(App, '#app')

可以看到，創建實例的方式也改變了。一些全局的 api 方法也不在全局上了，而是放到了實例上。

更多的改變可以看這裏：github.com/vuejs/rfcs/…

v-model

適用版本：Version 3.x

1.原來的方式保留

<input v-model="foo">

2.可綁定多個 v-model

<InviteeForm
  v-model:name="inviteeName"
  v-model:email="inviteeEmail"
/>

其實上面這種方式就相當於之前的 .sync 。

3.額外處理

<Comp
   v-model:foo.trim="text"
   v-model:bar.number="number" />

我們可以給這個屬性添加額外的處理

指令的鉤子函數

適用版本：Version 3.x

在 vue 3.x 中指令的鉤子函數仿照了組件中的鉤子函數命名規則

vue 2.x 時

const MyDirective = {
  bind(el, binding, vnode, prevVnode) {},
  inserted() {},
  update() {},
  componentUpdated() {},
  unbind() {}
}

vue 3.0 中

const MyDirective = {
  beforeMount(el, binding, vnode, prevVnode) {},
  mounted() {},
  beforeUpdate() {},
  updated() {},
  beforeUnmount() {}, // new
  unmounted() {}
}

transition

適用版本：Version 3.x

當 <transition> 作爲組件的根元素時，外部切換不會觸發過渡效果

vue 2.x

<!-- modal component -->
<template>
  <transition>
    <div class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal v-if="showModal">hello</modal>

vue 3.x

<!-- modal component -->
<template>
  <transition>
    <div v-if="show" class="modal"><slot/></div>
  </transition>
</template>

<!-- usage -->
<modal :show="showModal">hello</modal>

也就是說我們只能在 <transition> 內使用切換。

transition-class

重命名兩個過渡類

v-enter 重命名成v-enter-from，v-leave重命名成 v-enter-from。

.v-enter-from, .v-leave-to {
  opacity: 0;
}
.v-leave-from, .v-enter-to {
  opacity: 1
}

Router

適合版本：Version: Vue (2.x / 3.x) Vue Router (3.x / 4.x)

router-link 變動

router-link 添加 scoped-slot API 和 custom 屬性，並移除了 tag 屬性和 event 屬性。

添加 scoped-slot 有什麼用呢？以前只能通過 active-class 來改變元素樣式的，現在有了 scoped-slot 之後，我們就更加靈活了，可以根據 scoped-slot 回傳的狀態自定義，不管是樣式還是類。

<router-link to="/" custom v-slot="{ href, navigate, isActive }">
  <li :class="{ 'active': isActive }">
    <a :href="href" @click="navigate">
      <Icon>home</Icon><span class="xs-hidden">Home</span>
    </a>
  </li>
</router-link>

也就是說，新版本的 Router 就更加的純粹，只提供給我們一些參數，讓我們自己利用這些參數來實現不同的場景。

meta 合併

{
  path: '/parent',
  meta: { requiresAuth: true, isChild: false },
  children: [
    { path: 'child', meta: { isChild: true }}
  ]
}

當訪問 /parent/child 時，子路由中的 meta 如下：

{ requiresAuth: true, isChild: true }

合併策略與 Object.assign 類似

路由匹配所有

const routes = [
  {
    path: '/',
    name: 'Home',
    component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue')
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/:catchAll(.*)',
    name: 'All',
    component: () => import(/* webpackChunkName: "All" */ '../views/Home.vue')
  }
]

這裏有一個需要注意的就是 vue-router 匹配所有路由的寫法已經改變了，不是舊版本的 * ，在新的版本里寫法參考上面的示例代碼

獲取當前路由信息

import router from '../router'
export default {
  setup () {
    const currentRoute = router.currentRoute.value
    console.log(currentRoute)
  }
}

引入的 router 爲我們通過 createRouter() 方法創建的對象

import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
  history: createWebHashHistory(),
  routes
})

routes 路由爲我們定義的路由數組，跟舊版本的一樣。

樣式 scoped

適用版本：Version: 2.x, 3.x

舊版本寫法

/* 深度選擇器 */
/*方式一：*/
>>> .foo{ }
/*方式二：*/
/deep/ .foo{ }
/*方式三*/
::v-deep .foo{ }

新版本寫法

/* 深度選擇器 */
::v-deep(.foo) {}

除了上面的深度選擇器外，還有下面的兩個，寫法也差不多。

/* slot content 起作用 */
::v-slotted(.foo) {}

/* 全局 */
::v-global(.foo) {}

屬性值修正

適用版本：Version: 3.x

vue 本身會對元素的屬性作相應的處理。在舊版本的 vue 中處理如下：

表達式	正常	最終處理成
`:attr="null"`	/	`draggable="false"`
`:attr="undefined"`	/	/
`:attr="true"`	`foo="true"`	`draggable="true"`
`:attr="false"`	/	`draggable="false"`
`:attr="0"`	`foo="0"`	`draggable="true"`
`attr=""`	`foo=""`	`draggable="true"`
`attr="foo"`	`foo="foo"`	`draggable="true"`
`attr`	`foo=""`	`draggable="true"`

新版本處理方式：

表達式	正常	最終處理成
`:attr="null"`	/	/
`:attr="undefined"`	/	/
`:attr="true"`	`foo="true"`	`draggable="true"`
`:attr="false"`	`foo="false"`	`draggable="false"`
`:attr="0"`	`foo="0"`	`draggable="0"`
`attr=""`	`foo=""`	`draggable=""`
`attr="foo"`	`foo="foo"`	`draggable="foo"`
`attr`	`foo=""`	`draggable=""`

在新版本中基本保持了原樣，也就是我們給元素添加什麼屬性值，最好 vue 處理完後還是什麼屬性值。

異步組件

import { defineAsyncComponent } from "vue"
    
// simple usage
const AsyncFoo = defineAsyncComponent(() => import("./Foo.vue"))

寫法上與之前有些不一樣。

動態路由

適用版本 Router 4

添加了幾個方法

router.addRoute(route: RouteRecord) 動態添加路由
router.removeRoute(name: string | symbol)，動態刪除路由
router.hasRoute(name: string | symbol): boolean ，判斷路由是否存在
router.getRoutes(): RouteRecord[] 獲取路由列表

router.addRoute({
  path: '/new-route',
  name: 'NewRoute',
  component: NewRoute
})
    
// add to the children of an existing route
router.addRoute('ParentRoute', {
  path: 'new-route',
  name: 'NewRoute',
  component: NewRoute
})
    
router.removeRoute('NewRoute')
    
// normalized version of the records added
const routeRecords = router.getRoutes()

詳情可見：github.com/vuejs/rfcs/…

emits-option

const Foo = defineComponent({
  emits: {
    submit: (payload: { email: string; password: string }) => {
      // perform runtime validation
    }
  },
    
  methods: {
    onSubmit() {
      this.$emit('submit', {
        email: '[email protected]',
        password: 123 // Type error!
      })
    
      this.$emit('non-declared-event') // Type error!
    }
  }
})

現在的 $emit() 方法在用法上沒變，但需要額外多定義 emits 對象，但要注意的是現在 alpha 版本還不支持 TypeScript

組件根元素數量

vue 3 後組件不再限制 template 中根元素的個數（舊的版本之前是只能有一個根元素）。

vue 3.x 中費棄

beforeCreate、created
filters
keycode
inline-template
data-object
on, off 和 $once

閱讀完本文我相信你大概對 vue 3 有了一個基本的認識。雖然本文會不讓你瞬間成爲 vue 3.x 的駕馭者，但怎麼說也讓你含蓄地體驗了一把 vue 3.x 的新特性。特別是 composition API 即使本文沒有詳細寫出來，但通過補充的鏈接，你也能閱讀到它的所有。我覺得 composition API 真的很棒。

vue 計劃

github.com/vuejs/vue/p…

轉載說明

這篇文章寫得太好了，只要閱讀本文，即可快速的瞭解 `vue2.0` 與 `vue3.0` 的大多數差異。你既可以把本文當成一個上手資料，也可以把本文當成一個字典查詢。因爲寫得實在太好，因此我在取得了作者同意的情況下，轉載了此文。

作者： QUIKER

文章首發地址： https://juejin.im/post/5ec537486fb9a047bb6a4204#heading-12

作者個人網站： http://yunkus.com/

【轉載】vue 3.x 如何有驚無險地快速入門 —— 一文掃遍 vue2 與 3 的差異點

【轉載】vue 3.x 如何有驚無險地快速入門 —— 一文掃遍 vue2 與 3 的差異點

前言

新增

composition-api

teleport 組件

Suspense

變更

插槽 slot 語法

指令動態參數

Tree-shaking

.sync 大變樣

函數組件

全局 api

v-model

指令的鉤子函數

transition

transition-class

Router

router-link 變動

meta 合併

路由匹配所有

獲取當前路由信息

樣式 scoped

屬性值修正

異步組件

動態路由

emits-option

組件根元素數量

vue 3.x 中費棄

vue 計劃

轉載說明

這篇文章寫得太好了，只要閱讀本文，即可快速的瞭解 vue2.0 與 vue3.0 的大多數差異。你既可以把本文當成一個上手資料，也可以把本文當成一個字典查詢。因爲寫得實在太好，因此我在取得了作者同意的情況下，轉載了此文。