首先先附上 Vue2 & Vue3 的生命週期比較 : 1-7 元件的生命週期與更新機制

Composition API 的生命週期

以前在 Vue2 我們可能會在 created 定義資料，但在 Vue3 中，beforeCreated 和 created 都被整合進 setup 了，因此我們在 setup 定義資料，等同於在 created 定義資料。

而生命週期的用法在 Composition API 裡面也稍有不同。

以 mounted 為例，以往在 Options API 中，生命週期只能出現一次，但在 Composition API 中可以出現多次 :

這樣可以多次出現的生命週期的好處在於 : 我們可以把相同的資料邏輯，與相同的生命週期放在一起 。如此，我們就可以把資料和方法放在同一個區塊了。之後我們在查找功能時，也會變得相對好查找許多。

<div id="app"> {{num}} {{newValue}}
    <button type="button" @click="add(5)">累加</button>
    <button type="button">取得累加次數</button>
</div>

const { createApp,ref,onMounted,computed } = Vue
const app = createApp({
    setup(){
        // 功能一
        const num = ref(1)
        const add = (n)=>{
            num.value += n;
        }
        onMounted(()=>{
            num.value = 100;
        })
        // 功能二
        const person = ref({
            name:"Yin",
            price :0
        })
        // 加上 computed 
        const newValue = computed(()=>{
            return numValue * 2
        })
        onMounted(()=>{
            person.value = {
             name:"小美"
            };
        })
        return{
            num,
            person,
            add
        }
    }
})
app.mount(#app)

Composition API 的 Computed

一樣是寫在 setup 裡面。除了原本的 function 形式，computed 也可以改為 get 和 set 的形式 :

<div> {{ num2 }} </div> //1000

const { createApp,ref,onMounted,computed } = Vue
const app = createApp({
    setup(){
        const num2 = ref(0)
        const newValue = computed({
            get(){
                return numValue * 2
            },
            set(value){
               num2.value = value
            }
        })
        
        // 這裡的變動會觸發 set 函式
        newValue.value = 1000;
            
        //所以 num2 的值也會變成 1000
        console.log(num2) //1000
       
        return{
            newValue
        }
    }
})
app.mount(#app)

Composition API 的 Watch

watch 的形式是這樣的 : watch(要監聽的值,要監聽的方法)。

watch 是等觸發變更後才會執行。因此預設情況下不會主動觸發 watch。

const { createApp,ref,watch} = Vue
const app = createApp({
    setup(){
    
        // 監聽純值
        const productName = ref(0);
        const watchText = ref("");
        
        // 監聽的方法一
        watch(productName,(newValue,oldValue)=>{
            watchText.value = `輸入的文字僅有${newValue.length}個字，上一次有${oldValue.length}個字。`
        })
        
        return{
            productName,
            watchText,
        }
    }
})
app.mount(#app)

深層監聽

如果我們要監聽的是深層的物件內容，要在 要監聽的值 前面加上箭頭函式 ()=>，這樣才能觸發 watch的結果。

const { createApp,ref,watch} = Vue
const app = createApp({
    setup(){        
        //監聽物件
        const productName = ref(0);
        const product = ref({
            name : "蛋餅",
            price : 30,
            vegan : false,
            other:{
                name: "送安檢"
            }
        })
        const watchText2 = ref("");
        
        // 純值監聽的方法二
        watch(()=>product.value.other.name,(newValue,oldValue)=>{
            watchText2.value = `輸入的文字僅有${newValue.length}個字，上一次有${oldValue.length}個字。`
        })
        
        // 整個物件監聽
        // 因為物件的傳參考特性，newValue 會等於 oldValue
        watch(product,(newValue,oldValue)=>{
            console.log(newValue === oldValue) // true
        },{deep:true})
        
        return{
            product,
            productName
            watchText2
        }
    }
})
app.mount(#app)

多值監聽

兩個值中任何一個，只要有所變動，就會同時觸發多值監聽的方法。

const { createApp,ref,watch} = Vue
const app = createApp({
    setup(){        
        //監聽物件
        const productName = ref(0);
        const product = ref({
            name : "蛋餅",
            price : 30,
            vegan : false,
            other:{
                name: "送安檢"
            }
        })
        const watchText2 = ref("");
        
        // 多值監聽
        watch([productName,product],([productNameVal,productVal],[productNamePre,productPre])=>{
            console.log('純值',productNameVal,productNamePre)
            console.log('物件',productVal,productPre)
        },{deep:true})
        
        return{
            product,
            productName
            watchText2
        }
    }
})
app.mount(#app)