元件中的使用——常用屬性、方法等的對比

(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 因為其本身就代替這兩個函式　　

important { defineComponent,onBeforeMount,onMouted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmouted} from

export default defineComponent({ 　　name:"lifecycle",

　　setup(){

　　　　// 對應 beforeMount 掛載前

　　　　onBeforeMount(() => { 程式碼})

　　　　// 對應 mounted掛載後

　　　　onMouted(() => { 程式碼})

　　　　// 對應 beforeUpdate 更新前

　　　　onBeforeUpdate(() => { 程式碼})

　　　　//對應updated更新後

　　　　onUpdated(() => { 程式碼 })

　　　　//對應beforeDestroy銷燬前

　　　　onBerforeUnmount(() => { 程式碼 })

　　　　// 對應 destroyed銷燬後

　　　　onUnmouted(() => { 程式碼})

　　}

})

(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

important {defineComponent,ref,reactive} from

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中寫上就好了

important {defineComponent } from

export default defineComponent(){

　　setup(){

　　　　//第一種方式

　　　　const example = ()=>{

　　　　　　fn() //呼叫fn

　　　　}

　　　　example() //呼叫example

　　　　// 第二種方式

　　　　function fn(){

　　　　　　//呼叫example

　　　　}

　　　　fn() //呼叫fn

　　　　return {

　　　　　　　example,

　　　　　　　fn

　　　　}

　　}

}

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