作者：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
方法實際上有兩個參數:
- props – 包含元件的
props
- 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方法來注冊全局元件。
這個方法有兩個參數：
- 全局元件的名稱
- 我們的元件本身
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... 已收錄，有一線大廠面試完整考點、資料以及我的系列文章。