4月16日，Vue 開發團隊終於在今天發佈了 3.0-beta.1 版本，也就是測試版。通常來說，從測試版到正式版，只會修復 bug，不會引入新功能，或者刪改老功能。所以，如果你對新版本非常感興趣，或者有新項目即將上馬，不妨嘗試一下新版本。
隨著Vue3即將發佈，許多人都在想“Vue2與Vue3有何不同？”
為了顯示這些更改，我將在Vue2和Vue3中構建一個簡單的表單組件。
在本文結尾，你將瞭解Vue2和Vue3之間的主要編程差異，並逐步成為一名更好的開發人員。
對於大多數組件，Vue2和Vue3中的代碼即使不完全相同，也是非常相似的。但是，Vue3支持Fragments，這意味著組件可以具有多個根節點。
在渲染列表中的組件以刪除不必要的包裝div元素時，這特別有用。但是，在這種情況下，我們將為兩個版本的Form組件保留一個根節點。
Vue2
<code><template>
{{ title }}
<button>
Submit
/<button>
Values: {{ username + ' ' + password }}
/<template>/<code>
唯一真正的區別是我們訪問數據的方式。在Vue3中，我們的響應式數據都包裝在響應式狀態變量中——因此我們需要訪問該狀態變量以獲取我們的值。
Vue3
<code><template>
{{ state.title }}
<button>
Submit
/<button>
Values: {{ state.username + ' ' + state.password }}
/<template>/<code>
這是主要的區別——Vue2 Options API與Vue3 Composition API。
Options API將我們的代碼分為不同的屬性：數據，計算屬性，方法等。同時，Composition API允許我們按功能而不是屬性類型對代碼進行分組。
假設對於表單組件，我們只有兩個數據屬性：username 和 password。
Vue2代碼看起來是這樣的——我們只需在 data 屬性中放入兩個值。
Vue2
<code>export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
}
}/<code>在Vue 3.0中，我們必須投入更多的精力來使用一個新的 setup() 方法，所有的組件初始化都應該在這個方法中進行。
另外，為了使開發人員能夠更好地控制響應式，我們可以直接訪問Vue的響應式API。
創建響應式數據涉及三個步驟：
- 從Vue導入 reactive
- 使用 reactive 方法聲明我們的數據
- 讓我們的 setup() 方法返回reactive數據，以便我們的模板可以訪問它
在代碼方面，它將看起來像這樣。
Vue3
<code>import { reactive } from 'vue'
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
return { state }
}
}/<code>然後，在模板中，我們像 state.username 和 state.password 一樣訪問它們。
Vue2 Options API有一個單獨的方法部分。在其中，我們可以定義所有方法並以所需的任何方式組織它們。
Vue2
<code>export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
methods: {
login () {
// login method
}
}
}/<code>Vue3 Composition API中的setup方法也可以處理方法。它的工作方式與聲明數據有些類似——我們必須先聲明我們的方法，然後返回它，以便組件的其他部分可以訪問它。
Vue3
<code>export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: ''
})
const login = () => {
// login method
}
return {
login,
state
}
}
}/<code>
在Vue2中，我們可以直接從組件選項訪問生命週期鉤子函數。對於我們的示例，我們將等待 mounted 事件。
Vue2
<code>export default {
props: {
title: String
},
data () {
return {
username: '',
password: ''
}
},
mounted () {
console.log('component mounted')
},
methods: {
login () {
// login method
}
}
}/<code>現在有了Vue3 Composition API，幾乎所有內容都在 setup() 方法內部，這包括 mounted 的生命週期鉤子。
但是，默認情況下不包括生命週期掛鉤，因此我們必須導入 onMounted 方法，作為Vue3中調用的方法，這看起來與早期導入 reactive 相同。
然後，在我們的 setup() 方法中，可以通過將 onMounted 方法傳遞給函數來使用它。
Vue3
<code>import { reactive, onMounted } from 'vue'
export default {
props: {
title: String
},
setup () {
// ..
onMounted(() => {
console.log('component mounted')
})
// ...
}
}/<code>
讓我們添加一個計算屬性，將我們的用戶名轉換為小寫字母。為了在Vue2中完成此操作，我們將一個計算字段添加到我們的options對象中。
Vue2
<code>export default {
// ..
computed: {
lowerCaseUsername () {
return this.username.toLowerCase()
}
}
}/<code>Vue3的設計允許開發人員導入他們使用的內容，而在項目中沒有使用的不需要導入。本質上，他們不希望開發人員必須包含他們從未使用過的東西，這在Vue2中已經成為一個日益嚴重的問題。
因此，要在Vue3中使用計算屬性，我們首先必須將 computed 導入到組件中。
然後，類似於我們之前創建 reactive 數據的方式，我們可以使一條 reactive 數據成為這樣的計算值：
Vue3
<code>import { reactive, onMounted, computed } from 'vue'
export default {
props: {
title: String
},
setup () {
const state = reactive({
username: '',
password: '',
lowerCaseUsername: computed(() => state.username.toLowerCase())
})
// ...
}
}/<code>
訪問Props帶來了Vue2和Vue3之間的一個重要區別——這意味著完全不同的東西。
在Vue2中，這幾乎總是引用組件，而不是特定的屬性，雖然這使事情表面上很容易，但它使類型支持成為一種痛苦。
以往，我們都可以輕鬆訪問Props——讓我們添加一個簡單的示例，例如在mounted的鉤子上打印出標題prop：
Vue2
<code>mounted () {
console.log('title: ' + this.title)
}/<code>但是在Vue3中，我們不再使用它來訪問Props、發出事件和獲取屬性。
相反，setup() 方法採用兩個參數：
- props——對組件prop的不可變訪問
- context——Vue3公開的選定屬性（emit、slots、 attrs）
使用props參數，上面的代碼將如下所示。
Vue3
<code>setup (props) {
// ...
onMounted(() => {
console.log('title: ' + props.title)
})
// ...
}/<code>
類似地，在Vue2中發出事件非常簡單，但是Vue3為您提供了對如何訪問屬性/方法的更多控制。
例如，在我們的例子中，我們想在按下“Submit”按鈕時向父組件發出登錄事件。
Vue2代碼只需要調用 this.$emit 並傳入我們的有效參數對象即可。
Vue2
<code>login () {
this.$emit('login', {
username: this.username,
password: this.password
})
}/<code>然而，在Vue3中，我們現在知道這不再意味著同樣的事情，所以我們必須做得不同。
幸運的是，上下文對象(context)公開了 emit，這使我們擁有與此相同的東西。
我們要做的就是將 context 添加為 setup() 方法的第二個參數，我們將解構上下文對象，以使我們的代碼更簡潔。
然後，我們只需要調用emit發送事件即可。然後，像以前一樣，emit方法採用兩個參數：
- 事件名稱
- 與事件一起傳遞的有效參數對象
Vue3
<code>setup (props, { emit }) {
// ...
const login = () => {
emit('login', {
username: state.username,
password: state.password
})
}
// ...
}/<code>
如您所見，Vue2和Vue3中的所有概念都是相同的，但是我們訪問屬性的某些方式已經有所變化。
總的來說，我認為Vue3將幫助開發人員編寫更有組織的代碼——特別是在大型代碼庫中。這主要是因為Composition API允許您按特定功能將代碼分組在一起，甚至可以將功能提取到自己的文件中，然後根據需要將其導入組件中。
Vue2中用於表單組件的完整代碼：
<code><template>
{{ title }}
<button>
Submit
/<button>
Values: {{ username + ' ' + password }}
/<template>
/<code>
這是在Vue3中的完整代碼：
<code><template>
{{ state.title }}
<button>
Submit
/<button>
Values: {{ state.username + ' ' + state.password }}
/<template>
/<code>
我希望本教程有助於重點介紹Vue代碼在Vue3中看起來與眾不同的某些方式。如有其他疑問，請留下你的意見！
如果對你有所啟發和幫助，可以點個關注、收藏、轉發，也可以留言討論，這是對作者的最大鼓勵。
作者簡介：Web前端工程師，全棧開發工程師、持續學習者。
私信回覆：大禮包 ，送某網精品視頻課程網盤資料，準能為你節省不少錢！
閱讀更多 做工程師不做碼農 的文章
