Vue3 與 Vue2 的Props、全局組件的異同點！

做者：Matt Maribojoc
譯者：前端小智
來源：stackabuse

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。

Vue3 Props

Props 是任何現代 JS 框架的重要組成部分。在組件之間傳遞數據的能力是Vue項目的基本要素。 Vue3 中，在組件中訪問Props的方式與 Vue2 會有所不一樣。

爲何使用 Props 很重要？

首先，咱們要了解什麼是 props。 props是可在組件上註冊的自定義屬性，可以讓咱們將數據從父組件傳遞到其子組件方式之一。

因爲props讓咱們可以在組件之間共享數據，所以它使咱們能夠將Vue項目分解成更多的模塊化組件。

props 示例

Vue3 以前，組件的props只是 this 對象的一部分，可使用this.propName進行訪問。

可是，Vue3的一大變化是setup方法的引入。

setup方法包含了幾乎全部過去被分隔成不一樣的選項，如data，computed，watch等。關於setup方法的須要重點注意的是，它裏面沒有 this。

那麼咱們如何不使用this來使用Vue3 props 呢？

其實超級簡單，setup方法實際上有兩個參數:

1. props – 包含組件的 props 的對象。
2. context – 一個對象，它包含了在this上能找到的特定屬性。

context 官方文檔裏只說明瞭有 attrs, slots, 和 emit() 。

來個示例：

setup (props, context) {
    console.log(props.propName) // access a prop to our component
}

作項目中發現，其實 context 還有一個 exposed，這個是用來暴露 setup 中方法的，就是父組件能訪問到子組件中 setup 裏面的方法。這個在項目中有遇到過這個需求，因此我也去 Vue github 上Issues 中去找答案，發現也有人提問：

尤大，在底部明確說明了不推薦這麼作：

他建議經過 父組件傳入子組件一個 Props 來實現。

爲何 Vue3 props 的工做方式與 Vue2 不一樣？

更改 Vue3 Props 的方式主要的一個緣由，使 this 在組件/方法中的含義更清楚。 有時在查看Vue2代碼時，this所指多是模棱兩可的。

Vue 團隊在設計 Vue3 時的一個大目標是使其在大型項目中更具可伸縮性。 其中一部分是將Options API從新設計爲Composition API，以實現更好的代碼組織。

可是經過消除對 this 的大多數引用，而是使用顯式的context和props變量，能夠提升大型Vue項目的可讀性。

如何註冊 Vue3 全局組件

如今，咱們來看看如何註冊Vue3全局組件，方便在咱們整個項目都能訪問。 與咱們在Vue2中聲明它們的方式稍有不一樣，但也是很是簡單。

什麼是全局組件

首先，咱們要還了解Vue3全局組件是什麼以及爲何要使用它。

一般，當咱們想在 Vue 實例中包含一個組件時，咱們會在本地註冊它，通常是這樣使用：

<script>
import PopupWindow from '../components/PopupWindow.vue';

export default {
  components: {
    PopupWindow
  }
}
</script>

可是，假設有一個組件，咱們知道它會在多個文件中屢次使用。 因此在每一個文件都須要寫一遍上述的代碼-尤爲是在咱們重構了項目或進行某些操做的狀況下，就會比較麻煩。

在這種狀況下，全局註冊組件是有用的，這樣就能夠在主根Vue實例的全部子組件中訪問該組件。換句話說，全局註冊一個組件意味着咱們沒必要在每一個文件中導入它。

Vue2 中全局組件是如何工做的

在Vue2中，不管咱們在哪裏建立Vue實例，咱們都只須要調用Vue.component方法來註冊全局組件。

這個方法有兩個參數：

1. 全局組件的名稱
2. 咱們的組件自己

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

Vue.component('PopupWindow', PopupWindow) // global registration - can be used anywhere

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

如今，此 PopupWindow 組件能夠在此Vue實例的全部子級中使用。

那麼在 Vue3 中呢

在Vue3中，因爲建立Vue實例的工做方式略有不一樣(使用createApp)，因此代碼略有不一樣，但理解起來一樣簡單。

比起從Vue2對象中聲明全局組件，咱們首先必須建立咱們的應用程序。而後，能夠像之前同樣運行相同的.component方法。

import { createApp } from 'vue'
import PopupWindow from './components/PopupWindow'
import App from "./App.vue"

const app = createApp(App)

app.component('PopupWindow', PopupWindow) // global registration - can be used anywhere

app.mount('#app')

~完，我是刷碗智，我要去刷碗了，骨的白！

---

代碼部署後可能存在的BUG無法實時知道，過後爲了解決這些BUG，花了大量的時間進行log 調試，這邊順便給你們推薦一個好用的BUG監控工具 Fundebug。

原文：

https://leavue.co/2020/08/an-...
https://leavue.co/2020/08/how...

交流

有夢想，有乾貨，微信搜索 【大遷世界】 關注這個在凌晨還在刷碗的刷碗智。

本文 GitHub https://github.com/qq44924588... 已收錄，有一線大廠面試完整考點、資料以及個人系列文章。