vue3組件內寫法的變化(核心篇)——vue2和vue3的基礎用法對比第四篇

組件內的使用：

(1) 生命周期 (2) 變量的定義與使用 (3) 方法的定義與使用 (4) 父子組件間的數據交互  (5) computed計算屬性和watch的使用

組件中常用的東西無非上面5種，其中(4)、(5)在下一篇文章中介紹

在vue3中最大的變化莫過於vue組件內寫法的變化了。之前的是data、methods、computed、生命周期等每一個功能都是相對獨立的模塊，但是vue3中所有的東西都被包含setup函數里，編寫的方式發生了翻天復地的變化。

(1) 生命周期

說到setup()，setup這個函數是在數據創建之前，也就是說在原本的created生命周期之前。因此在setup里面就不能用之前的生命周期了，所有vue3出了新的寫法。

setup里面沒有 beforeCreate 和 created 因為其本身就代替這兩個函數　　

import { defineComponent,onBeforeMount,onMouted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmouted } from 'vue'

export default defineComponent({

　　name:"lifecycle",

　　setup(){

　　　　// 對應 beforeMount 掛載前

　　　　onBeforeMount(() => { 代碼 }) 

　　　　// 對應 mounted 掛載后

　　　　onMouted(() => { 代碼 }) 

　　　　// 對應 beforeUpdate 更新前

　　　　onBeforeUpdate(() => { 代碼 })  

　　　　// 對應updated更新后

　　　　onUpdated(() => { 代碼 })

　　　　// 對應beforeDestroy 銷毀前

　　　　onBerforeUnmount(() => { 代碼 }) 

　　　　// 對應 destroyed 銷毀后

　　　　onUnmounted(() => { 代碼 }) 

　　}

})

 (2) 變量的定義與使用

vue2.0版本是在data定義的當前組件的全局變量，但是vue3.0中沒有規定要在哪里寫了，只要寫在最后的return就好了

setup(){
　　const a=1,b=2

 　 // 如此就定義了一個的當前組件的全局變量

　　return{a,b} 
}

但是上面寫的只是普通的變量，vue2.0中在data寫的變量還有最重要的功能就是都是響應式變量，那么在vue3改怎么定義響應式的變量呢？

vue3中又兩種方式，一種是ref，另外一種是reactive。一般來說ref是用來定義基本類型的，reactive是用來定義引用類型的，當然用ref來定義引用類型也了可以他會自動轉化為reactive來定義。

注意：用ref定義的變量在使用時要加.value 即 變量名.value

import { defineComponent,ref,reactive} from 'vue'

export default defineComponent({

　　name:"variable",

　　setup(){　　

　　　 　// ref的用法

　　　　const a = ref(1)

　　　　a.value // 獲取a的值

　　　　const arr = ref([1,2,3])

　　　　arr.value[0] // 獲取arr的第一個值

　　　 　// reactive的用

　　　　const b = reactive({

　　　　　　x:1,

　　　　　　y:2

　　　　})

　　　　b.x // 獲取b的x

　　　　return{a,arr,b} 

　　}

})　　

 (3)  方法的定義與使用

在vue2.0中方法都寫在methods中，而在vue3沒有這樣的要求，它和變量的定義有點像，都只需要在最后的return中寫上就好了

import { defineComponent } from 'vue'

export default defineComponent(){

　　setup(){

　　　　// 第一種方式

　　　　const example = ()=>{

　　　　　　fn() // 調用fn

　　　　}

　　　　example() // 調用example

　　　　// 第二種方式

　　　　function fn(){

　　　　　　// 調用example 

　　　　}

　　　　fn() // 調用fn

　　　　return {

　　　　　　　example,

　　　　　　　fn

　　　　}

　　}

}

以前變量和方法的定義是分散的，現在變成這樣的話就可以把方法用到的變量和方法寫在一起了，變成了一個整體的模塊。

 

作者：博客園-DDjans，轉載時請注明來源。

(請勿將文章用在任何商業用途，違者將承擔相應法律責任)