前言

vue3.0 釋出了，啊啊啊啊 刺激啊 （學哦）

部落格平臺、公眾號、朋友圈基本都被傳聞了，

可見 Vue3.0 的被期待程度，因為 React 16 釋出的時候，也米有那麼瘋狂，讓我有點震驚的是 Vue 有 130 萬的使用者。

其實在4月的時候就已經出來，只不過在9月的時候正式釋出了，前面也學習了下3.0的語法糖，現在在看看

Vue3.0 更新了什麼

一個是 Composition API，另一個是對 TypeScript 的全面支援。

團隊還會出一個 Vue 2.7 的版本，給予 2.x 使用者一些在 3.0 版本中被刪除方法的警告，這有助於使用者的平穩升級。

Nuxt3 好像還在路上，但是目前看來，市面上的各大元件庫還沒來得及針對 Vue3.0 進行改版升級。

周邊的外掛如 Vue-Router、Vuex、VSCode 外掛 Vetur 等都在有序的進行

Vue3.0 變化在哪？

setup 函式

• 執行機制

setup是在建立元件例項並完成props初始化之後執行的，也是在beforeCreate鉤子之前執行，無法訪問option(data、comupted、methods等)選項，而option可使用setup中返回的變數。

• 沒有this：在解析其他元件選項之前就已經呼叫了setup()

• 接受兩個引數：

  • props：元件傳參
  • context：執行上下文，包含三個屬性方法：attrs
    、slots、emit

export default {
    props: {
        user: {
            type: String,
            defalut: 'Libai'
        }
    },
    setup(props, context) {
        console.log(props.user)
        console.log(context)
    }
}

• 生命週期

其內部使用生命週期鉤子需要在前面加上on

因為setup是圍繞beforeCreate和created生命週期鉤子執行的，所以不需要顯式地定義它們。換句話說，在這些鉤子中編寫的任何程式碼都應該直接在setup

import { onMounted } from 'vue'
export default {
    setup() {
        // mounted
        onMounted(() => {
            console.log('Component is mounted!')
        })
    }
}

• 渲染函式

setup還可以返回一個渲染函式，該函式可以直接使用在同一作用域中宣告的響應式狀態：

// MyBook.vue
import { h, ref, reactive } from 'vue'
export default {
  setup() {
    const readersNumber = ref(0)
    const book = reactive({ title: 'Vue 3 Guide' })
    // Please note that we need to explicitly expose ref value here
    return () => h('div', [readersNumber.value, book.title])
  }
}

provide & inject

類似於vue2中provide與inject, vue3提供了對應的provide與injectAPI，實現元件傳參。

provide 函式允許你通過兩個引數定義 property：

• property 的 name (<String>型別)
• property 的 value

<!-- src/components/MyMap.vue -->
<template>
  <MyMarker />
</template>

<script>
import { provide } from 'vue'
import MyMarker from './MyMarker.vue'
export default {
  components: {
    MyMarker
  },
  setup() {
    provide('location', 'North Pole')
    provide('geolocation', {
      longitude: 90,
      latitude: 135
    })
  }
}
</script>

inject函式有兩個引數：

• 要注入的property的名詞
• 一個預設的值 (可選)

<!-- src/components/MyMarker.vue -->
<script>
import { inject } from 'vue'
export default {
  setup() {
    const userLocation = inject('location', 'The Universe')
    const userGeolocation = inject('geolocation')
    return {
      userLocation,
      userGeolocation
    }
  }
}
</script>

應用的配置項

config 是一個包含 Vue 應用程式全域性配置的物件。可以在掛載應用程式之前修改下面列出的屬性。

• devtools 型別： boolean 預設值： true 如何使用：

app.config.devtools = true

是否開啟 vue-devtools 工具的檢測，預設情況下開發環境是 true，生產環境下則為 false。

• errorHandler 型別： Function 預設值： undefined 如何使用：

app.config.errorHandler = (err, vm, info) => {
  // info 為 Vue 在某個生命週期發生錯誤的資訊
}

為元件渲染功能和觀察程式期間的未捕獲錯誤分配處理程式。

• globalProperties