詳細教程：在Vue2和Vue3中構建相同的組件
過去，我們看過很多重大變革即將到來的文章，但是并沒有真正深入研究代碼將如何變化。
為了展示這些變化，小芯將在Vue2和Vue3中構建一個簡單的表單組件。
在本文的最后，將介紹Vue2和Vue3之間的主要編程差異，幫助大家了解，逐漸成為更好的開發人員。
如果想知道如何建立第一個Vue3應用程序，請查看初學者的Vue3Alpha應用程序指南。
我們開始吧!
創建模板
對于大多數組件，Vue2和Vue3中的代碼即使不完全相同，也是非常相似的。但是，Vue3支持片段，這意味著組件可以有多個根節點。
這在呈現列表中的組件以刪除不必要的包裝器div元素時特別有用。但是，在本例中，表單組件的兩個版本都將只保留一個根節點。
- <template>
- <div>
- <h2> {{ title }} </h2>
- <input type='text'v-model='username' placeholder='Username' />
- <input type='password'v-model='password' placeholder='Password' />
- <button @click='login'>
- Submit
- </button>
- <p>
- Values: {{ username + ' ' +password }}
- </p>
- </div>
- </template>
唯一真正的區別是如何訪問數據。在Vue3中，響應式數據都封裝在一個響應狀態變量中，所以需要訪問這個狀態變量來獲得值。
- <template>
- <div>
- <h2> {{ state.title }}</h2>
- <input type='text'v-model='state.username' placeholder='Username' />
- <input type='password'v-model='state.password' placeholder='Password' />
- <button @click='login'>
- Submit
- </button>
- <p>
- Values: {{ state.username + ' ' +state.password }}
- </p>
- </div>
- </template>
設置數據
這就是主要的區別——Vue2選項API對戰Vue3組合API。
選項 API將代碼分成不同的屬性：數據、計算屬性、方法等等。同時，組合API允許根據函數而不是屬性類型對代碼進行分組。
對于表單組件，只有兩個數據屬性：一個username和一個password。
Vue2代碼看起來是這樣的——只需在數據屬性中放入兩個值。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- }
- }
在Vue3.0中，必須投入更多精力來使用一個新的setup()方法，所有的組件初始化都應該在這個方法中進行。
另外，為了讓開發人員更好地控制響應，可以直接訪問Vue的響應API。
創建響應式數據需要三個步驟：
- 從vue中導入reactive
- 使用響應式方法聲明數據
- 使用setup方法返回響應式數據以便模板可以訪問
代碼看起來有點像這樣。
- import {reactive } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: ''
- })
- return { state }
- }
- }
接著在模板中，可以使用諸如state.username和state.password來訪問
在Vue2和Vue3中創建方法
Vue2選項API有一個單獨的方法部分。這部分可以定義所有的方法，并以任何想要的方式進行組織。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- },
- methods: {
- login () {
- // login method
- }
- }
- }
Vue3組合API中的setup方法也可以處理。它的工作原理與聲明數據有些類似——必須先聲明方法，然后返回，以便組件的其他部分可以訪問它。
- exportdefault {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: ''
- })
- const login = () => {
- // login method
- }
- return {
- login,
- state
- }
- }
- }
生命周期掛鉤
Vue2可以直接從組件選項中訪問生命周期掛鉤。以下示例代碼將等待掛載的事件。
- exportdefault {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- },
- mounted () {
- console.log('component mounted')
- },
- methods: {
- login () {
- // login method
- }
- }
- }
現在有了Vue3 組合API，幾乎所有東西都在setup()方法中，包括掛載的生命周期掛鉤。
然而，生命周期掛鉤在默認情況下并不包括在內，因此必須導入在Vue3中被稱為onmount的方法。這看起來與前面導入reactive是一樣的。
然后，在setup方法中，通過傳遞函數來使用onmount方法。
- import {reactive, onMounted } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- // ..
- onMounted(() => {
- console.log('component mounted')
- })
- // ...
- }
- }
computed屬性
添加一個computed屬性，將用戶名轉換為小寫字母。
為了在Vue2中實現這一點，向選項對象添加一個computed字段。從這里，可以像這樣定義屬性…
- exportdefault {
- // ..
- computed: {
- lowerCaseUsername () {
- return this.username.toLowerCase()
- }
- }
- }
Vue3的設計允許開發人員導入他們使用的東西，并且項目中沒有不必要的包。本質上，他們不希望開發人員包含從未使用過的東西，這而這在Vue2中已經成為一個日益嚴重的問題。
因此，要在Vue3中使用computed屬性，首先必須將computed導入到組件中。
然后，與之前創建響應式數據的方式類似，將一段響應式數據變成一個計算值，如下所示：
- import {reactive, onMounted, computed } from 'vue'
- export default {
- props: {
- title: String
- },
- setup () {
- const state = reactive({
- username: '',
- password: '',
- lowerCaseUsername: computed(()=> state.username.toLowerCase())
- })
- // ...
- }
訪問Props
訪問道具帶來了Vue2和Vue3之間的一個重要區別——this意味著完全不同的東西。
在Vue2中，this幾乎總是指向組件，而不是特定的屬性。雖然這使事情表面上很容易，但它使類型支持成為一種痛苦。
然而，可以很容易地訪問props——只需添加一個小例子，比如在掛載掛鉤期間打印出title prop：
- mounted() {
- console.log('title: ' + this.title)
- }
但是在Vue3中不再使用它來訪問props、觸發事件和獲取屬性。相反，setup()方法有兩個參數：
- props - 對組件props的不可變訪問
- context - Vue3公開的上下文選擇屬性(emit、slot、attrs)
使用props參數，上面的代碼將如下所示。
- mounted() {
- console.log('title: ' + this.title)
- }
觸發事件
類似地，在Vue2中觸發事件非常簡單，但是Vue3對如何訪問屬性/方法提供了更多控制。
本例希望在按下“Submit”按鈕時觸發父組件的一個登錄事件。
Vue2代碼只需要調用this.$emit并傳入有效負載對象。
- login (){
- this.$emit('login', {
- username: this.username,
- password: this.password
- })
- }
然而在Vue3中，this現在含義不同了，得做出一點改變。
幸運的是，文本對象公開了emit，提供了與this.$emit相同的東西
所要做的就是添加context作為setup方法的第二個參數。將對c文本對象進行析構，使代碼更簡潔。
然后，只需調用emit來觸發事件。與前面一樣，emit方法有兩個參數：
- 事件名稱
- 與事件一起傳遞的有效負載對象
- setup(props, { emit }) {
- // ...
- const login = () => {
- emit('login', {
- username: state.username,
- password: state.password
- })
- }
- // ...
- }
Vue2和Vue3的最后代碼
太棒了!已經到了最后階段。
Vue2和Vue3中的所有概念都是相同的，但是訪問屬性的一些方式發生了一點變化。
總的來說，筆者認為Vue3將幫助開發人員編寫更有組織的代碼——特別是在大型代碼庫中。這主要是因為組合API允許根據特定的特性將代碼分組，甚至可以將功能提取到它們自己的文件中，并根據需要將它們導入到組件中。
下面是Vue2中的表單組件代碼。
- <template>
- <div>
- <h2> {{ title }} </h2>
- <input type='text'v-model='username' placeholder='Username' />
- <input type='password'v-model='password' placeholder='Password' />
- <button @click='login'>
- Submit
- </button>
- <p>
- Values: {{ username + ' ' +password }}
- </p>
- </div>
- </template>
- <script>
- export default {
- props: {
- title: String
- },
- data () {
- return {
- username: '',
- password: ''
- }
- },
- mounted () {
- console.log('title: ' + this.title)
- },
- computed: {
- lowerCaseUsername () {
- return this.username.toLowerCase()
- }
- },
- methods: {
- login () {
- this.$emit('login', {
- username: this.username,
- password: this.password
- })
- }
- }
- }
- </script>
下面是Vue3的。
- <template>
- <div>
- <h2> {{ state.title }}</h2>
- <input type='text'v-model='state.username' placeholder='Username' />
- <input type='password'v-model='state.password' placeholder='Password' />
- <button @click='login'>
- Submit
- </button>
- <p>
- Values: {{ state.username + ' ' +state.password }}
- </p>
- </div>
- </template>
- <script>
- import { reactive, onMounted, computed } from 'vue'
- export default {
- props: {
- title: String
- },
- setup (props, { emit }) {
- const state = reactive({
- username: '',
- password: '',
- lowerCaseUsername: computed(()=> state.username.toLowerCase())
- })
- onMounted(() => {
- console.log('title: ' +props.title)
- })
- const login = () => {
- emit('login', {
- username: state.username,
- password: state.password
- })
- }
- return {
- login,
- state
- }
- }
- }
- </script>
希望本教程能夠幫助了解Vue代碼在Vue3中的一些不同之處。
