本文已整理到 Github铣焊，地址 ?? blog逊朽。
如果我的內(nèi)容幫助到了您，歡迎點個 Star ?????? 鼓勵鼓勵 :) ~~
我希望我的內(nèi)容可以幫助你∏粒現(xiàn)在我專注于前端領(lǐng)域叽讳，但我也將分享我在有限的時間內(nèi)看到和感受到的東西追他。
Vue2 和 Vue3 有什么不同？ 我們以一些簡單的示例岛蚤，來看看具體的變化邑狸。
你可以查看 Vue3 文檔，以了解更加詳細(xì)的內(nèi)容示例涤妒。
創(chuàng)建模板
Vue3 支持 Fragments单雾，這意味著組件可以有多個根節(jié)點。
<template>
<div class="app"></div>
<div class="popup"></div>
</template>
設(shè)置數(shù)據(jù)
主要的區(qū)別所在：Options API 與 Composition API
-
Options API將我們的代碼分為不同的屬性：data她紫、computed硅堆、methods等。 -
Composition API允許我們按函數(shù)而不是屬性的類型對代碼進行分組贿讹。
假設(shè)我們只有兩個 data 屬性：username 和 password渐逃。
Vue2 代碼看起來像這樣，我們只需在 data 屬性中寫上這兩個值民褂。
export default {
props: {},
data () {
return {
username: '',
password: ''
}
}
}
在 Vue3 中茄菊，使用一種新的 setup() 方法進行所有組件初始化的工作。
此外赊堪，為了使開發(fā)人員能夠更好地控制響應(yīng)性數(shù)據(jù)面殖，我們可以直接訪問 Vue 的 reactive API。
創(chuàng)建響應(yīng)性數(shù)據(jù)包括三個步驟：
- 從 vue 導(dǎo)入
reactive - 使用
reactive方法聲明我們的數(shù)據(jù) - 讓我們的
setup方法返回響應(yīng)式數(shù)據(jù)雹食，以便我們的模板可以訪問它
就代碼而言畜普，它看起來有點像這樣期丰。
import { reactive } from 'vue'
export default {
props: {},
setup () {
const state = reactive({
username: '',
password: ''
})
return { state }
}
}
然后群叶，在我們的模板中，像 state.username 和 state.password 那樣訪問它們钝荡。
在 Vue2 與 Vue3 中創(chuàng)建方法
Vue2 Options API 有一個單獨的方法部分街立。在這里，我們可以定義所有的方法埠通，并以我們想要的方式組織它們赎离。
export default {
props: {},
data () {},
methods: {
login () {}
}
}
Vue3 Composition API 中的 setup() 方法也可以處理方法。它的工作原理與聲明數(shù)據(jù)有些類似端辱，我們必須先聲明我們的方法梁剔，然后 return 它，以便組件的其他部分可以訪問它舞蔽。
export default {
props: {},
setup () {
// ...
const login = () => {}
return {
login
}
}
}
生命周期鉤子
在 Vue2 中荣病，我們可以直接從組件選項訪問生命周期鉤子。以下使用到 mounted 鉤子打印一些內(nèi)容：
export default {
data () {},
mounted () {
console.log('component mounted')
},
methods: {}
}
現(xiàn)在使用 Vue3 Composition API渗柿，幾乎所有內(nèi)容都在 setup() 方法內(nèi)部个盆。這包括 mounted 的生命周期鉤子。
但是，默認(rèn)情況下不包括生命周期鉤子颊亮，因此我們必須導(dǎo)入 onMounted 方法作為在 Vue3 中調(diào)用的方法柴梆。
然后，在 setup() 方法中终惑，我們可以通過傳遞函數(shù)來使用 onMounted 方法绍在。
import { reactive, onMounted } from 'vue'
export default {
props: {},
setup () {
// ...
onMounted(() => {
console.log('component mounted')
})
// ...
}
}
計算屬性 — computed
讓我們添加一個將用戶名轉(zhuǎn)換為小寫字母的 computed 屬性。
為了在 Vue2 中實現(xiàn)這一點狠鸳，我們向 options 對象添加一個 computed揣苏。
export default {
// ..
computed: {
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
}
您可能也注意到了，在 Vue3 中使用一些方法件舵，您需要從 vue 中導(dǎo)出它們卸察，才能夠使用。
Vue3 的設(shè)計允許開發(fā)人員導(dǎo)入他們所使用的內(nèi)容铅祸，并且在他們的項目中沒有不必要的包坑质。基本上临梗，他們不希望開發(fā)人員必須包含他們從未使用過的東西涡扼，這在 Vue2 中正成為一個日益嚴(yán)重的問題。
因此盟庞，要在 Vue3 中使用 computed 屬性吃沪，首先必須將 computed 導(dǎo)入到組件中。
然后什猖，類似于我們之前創(chuàng)建 reactive 數(shù)據(jù)的方式票彪，在添加一個屬性，如下所示：
import { reactive, onMounted, computed } from 'vue'
export default {
props: {},
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
// ...
}
}
訪問 props
訪問 props 在 Vue2 和 Vue3 之間的一個重要區(qū)別不狮，this 意味著完全不同降铸。
在 Vue2 中，this 幾乎總是指組件摇零，而不是特定的屬性推掸。雖然這讓表面上的事情變得簡單，但它使類型支持成為一種痛苦驻仅。
但是谅畅，我們可以很容易地訪問 props，讓我們添加一個簡單的示例噪服，例如在 mounted 鉤子期間打印 title：
export default {
props: {
title: {
type: String,
default: 'Vue2'
}
},
mounted () {
console.log('title: ' + this.title)
}
}
但是在 Vue3 中毡泻，我們不再使用 this 來訪問 props，發(fā)送事件和獲取屬性芯咧。相反牙捉，setup() 方法采用兩個參數(shù)：
-
props— 對組件props的不可變訪問 -
context— Vue3 公開的選定屬性（emit竹揍、slots和attrs）
使用 props 參數(shù)，上面的代碼如下所示邪铲。
setup (props) {
onMounted(() => {
console.log('title: ' + props.title)
})
}
emit 事件
同樣芬位，在 Vue2 中發(fā)出事件非常簡單，但是 Vue3 使您可以更好地控制如何訪問屬性/方法带到。
假設(shè)在我們的例子中昧碉，當(dāng)我們按下提交按鈕時，我們想向父組件發(fā)出一個 login 事件揽惹。
Vue2 代碼只需調(diào)用 this.$emit 并傳入我們的有效負(fù)載對象即可被饿。
login() {
this.$emit('login', {
username: this.username,
password: this.password
})
}
然而，在 Vue3 中搪搏，我們現(xiàn)在知道 this 不再意味著相同的事情狭握，所以我們必須以不同的方式來做。
幸運的是疯溺，context 對象暴露了 emit论颅，它提供了與 this.$emit 相同的東西。
我們所要做的就是將 context 作為第二個參數(shù)添加到 setup 方法中囱嫩。我們將對 context 對象進行解構(gòu)恃疯，使代碼更加簡潔。
然后墨闲，我們只需要調(diào)用 emit 發(fā)送事件即可今妄。然后，像以前一樣鸳碧，emit 方法采用兩個參數(shù)：
- 事件名稱
- 與事件一起傳遞的有效負(fù)載對象
setup(props, { emit }) {
const login = () => {
emit('login', {
username: state.username,
password: state.password
})
}
}
最后
Vue2 和 Vue3 中的所有概念都是相同的盾鳞，但是我們訪問屬性的某些方式已經(jīng)有所變化。
總的來說杆兵，我認(rèn)為 Vue3 將幫助開發(fā)人員編寫更有組織的代碼雁仲，特別是在大型項目中仔夺。這主要是因為 Composition API 允許您按特定功能將代碼分組在一起琐脏，甚至可以將功能提取到自己的文件中，然后根據(jù)需要將其導(dǎo)入組件中缸兔。
