全文共5529字，預計學習時長

過去，我們看過很多重大變革即將到來的文章，但是並沒有真正深入研究代碼將如何變化。

為了展示這些變化，小芯將在Vue2和Vue3中構建一個簡單的表單組件。

在本文的最後，將介紹Vue2和Vue3之間的主要編程差異，幫助大家瞭解，逐漸成為更好的開發人員。

如果想知道如何建立第一個Vue3應用程序，請查看初學者的Vue3Alpha應用程序指南。

我們開始吧！

創建模板

對於大多數組件，Vue2和Vue3中的代碼即使不完全相同，也是非常相似的。但是，Vue3支持片段，這意味著組件可以有多個根節點。

這在呈現列表中的組件以刪除不必要的包裝器div元素時特別有用。但是，在本例中，表單組件的兩個版本都將只保留一個根節點。

<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>

設置數據

這就是主要的區別——Vue2選項API對戰Vue3組合API。

選項 API將代碼分成不同的屬性：數據、計算屬性、方法等等。同時，組合API允許根據函數而不是屬性類型對代碼進行分組。

對於表單組件，只有兩個數據屬性：一個username和一個password。

Vue2代碼看起來是這樣的——只需在數據屬性中放入兩個值。

<code>exportdefault {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  }
}/<code>

在Vue3.0中，必須投入更多精力來使用一個新的setup()方法，所有的組件初始化都應該在這個方法中進行。

另外，為了讓開發人員更好地控制響應，可以直接訪問Vue的響應API。

創建響應式數據需要三個步驟：

1. 從vue中導入reactive

3. 使用setup方法返回響應式數據以便模板可以訪問

代碼看起來有點像這樣。

<code>import {reactive } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    const state = reactive({
      username: '',
      password: ''
    })
    
    return { state }
  }
}/<code>

接著在模板中，可以使用諸如state.username和state.password來訪問

在Vue2和Vue3中創建方法

Vue2選項API有一個單獨的方法部分。這部分可以定義所有的方法，並以任何想要的方式進行組織。

<code>exportdefault {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    login () {
      // login method
    }
  }
}/<code>

Vue3組合API中的setup方法也可以處理。它的工作原理與聲明數據有些類似——必須先聲明方法，然後返回，以便組件的其他部分可以訪問它。

<code>exportdefault {
  props: {
    title: String
  }, 

  setup () {
    const state = reactive({
      username: '',
      password: ''
    })
    const login = () => {
      // login method
    }
    return {
      login,
      state
    }
  }
}/<code>

生命週期掛鉤

Vue2可以直接從組件選項中訪問生命週期掛鉤。以下示例代碼將等待掛載的事件。

<code>exportdefault {
  props: {
    title: String
  },
  data () {
    return {
      username: '',
      password: ''
    }
  },
  mounted () {
    console.log('component mounted')
  },
  methods: {
    login () {
      // login method
    }
  }
}
/<code>

現在有了Vue3 組合API，幾乎所有東西都在setup()方法中，包括掛載的生命週期掛鉤。

然而，生命週期掛鉤在默認情況下並不包括在內，因此必須導入在Vue3中被稱為onmount的方法。這看起來與前面導入reactive是一樣的。

然後，在setup方法中，通過傳遞函數來使用onmount方法。

<code>import {reactive, onMounted } from 'vue'

export default {
  props: {
    title: String
  },
  setup () {
    // ..
    
    onMounted(() => {
      console.log('component mounted')
    })
    
    // ...
  }
}/<code>

computed屬性

添加一個computed屬性，將用戶名轉換為小寫字母。

為了在Vue2中實現這一點，向選項對象添加一個computed字段。從這裡，可以像這樣定義屬性…

<code>exportdefault {
  // ..
  computed: {
    lowerCaseUsername () {
      return this.username.toLowerCase()
    } 

  }
}/<code>

Vue3的設計允許開發人員導入他們使用的東西，並且項目中沒有不必要的包。本質上，他們不希望開發人員包含從未使用過的東西，這而這在Vue2中已經成為一個日益嚴重的問題。

因此，要在Vue3中使用computed屬性，首先必須將computed導入到組件中。

然後，與之前創建響應式數據的方式類似，將一段響應式數據變成一個計算值，如下所示：

<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之間的一個重要區別——this意味著完全不同的東西。

在Vue2中，this幾乎總是指向組件，而不是特定的屬性。雖然這使事情表面上很容易，但它使類型支持成為一種痛苦。

然而，可以很容易地訪問props——只需添加一個小例子，比如在掛載掛鉤期間打印出title prop：

<code>mounted() {
    console.log('title: ' + this.title)
}/<code>

但是在Vue3中不再使用它來訪問props、觸發事件和獲取屬性。相反，setup()方法有兩個參數：

1. props - 對組件props的不可變訪問

2. context - Vue3公開的上下文選擇屬性(emit、slot、attrs)

使用props參數，上面的代碼將如下所示。

<code>setup(props) {
    // ...
  
    onMounted(() => {
      console.log('title: ' +props.title)
    })
  
    // ...
}/<code>

觸發事件

類似地，在Vue2中觸發事件非常簡單，但是Vue3對如何訪問屬性/方法提供了更多控制。

本例希望在按下“Submit”按鈕時觸發父組件的一個登錄事件。

Vue2代碼只需要調用this.$emit並傳入有效負載對象。

<code>login (){
      this.$emit('login', {
        username: this.username,
        password: this.password
      })
 }/<code>

然而在Vue3中，this現在含義不同了，得做出一點改變。

幸運的是，文本對象公開了emit，提供了與this.$emit相同的東西

所要做的就是添加context作為setup方法的第二個參數。將對c文本對象進行析構，使代碼更簡潔。

然後，只需調用emit來觸發事件。與前面一樣，emit方法有兩個參數：

1. 事件名稱

2. 與事件一起傳遞的有效負載對象

<code>setup(props, { emit }) {
    // ...
  
    const login = () => {
      emit('login', {
        username: state.username,
        password: state.password
      })
    }
    
    // ...
}/<code>

Vue2和Vue3的最後代碼

太棒了!已經到了最後階段。

Vue2和Vue3中的所有概念都是相同的，但是訪問屬性的一些方式發生了一點變化。

總的來說，筆者認為Vue3將幫助開發人員編寫更有組織的代碼——特別是在大型代碼庫中。這主要是因為組合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中的一些不同之處。如果還有其他問題，請多多留言給小芯喲!

學習快樂!

我們一起分享AI學習與發展的乾貨

閱讀更多 讀芯術 的文章

關鍵字: 表單 試試 setup