嚐鮮Vue3之三：CompositionAPI小結和包裝對象

時間 2019-11-08

標籤嚐鮮 vue3 vue 之三 compositionapi 小結包裝對象简体版

原文原文鏈接

const {
            createApp,
            reactive, // 建立響應式數據對象
            ref, // 建立一個響應式的數據對象
            toRefs, // 將響應式數據對象轉換爲單一響應式對象
            isRef, // 判斷某值是不是引用類型
            computed, // 建立計算屬性
            watch, // 建立watch監聽
            // 生命週期鉤子
            onMounted,
            onUpdated,
            onUnmounted,
        } = Vue
複製代碼

setup使用composition API的入口

setup函數會在 beforeCreate以後 created以前執行vue

setup(props,context){
    console.log('setup....',)
    console.log('props',props) // 組件參數
    console.log('context',context) // 上下文對象
} 

複製代碼

好的其實你們能夠和本身原來的React偶不Vue2代碼對號入座。java

reactive

reactive() 函數接受一個普通對象返回一個響應式數據對象react

const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })
複製代碼

ref 與 isRef

ref 將給定的值(確切的說是基本數據類型 ini 或 string)建立一個響應式的數據對象

isRef 其實就是判斷一下是否是ref生成的響應式數據對象

首先這裏面有一個重要的概念叫包裝對象(value wrapper)，談到wrapper從java那邊轉過來的小朋友確定記得java裏面的wrapclass其實概念差很少啦。咱們知道基本數據類型只有值沒有引用，這樣也就形成了一個問題返回一個基礎數據類型好比一個字符串是沒法跟蹤他的狀態的，因此咱們就須要講基礎數據類型包裝一下，這有點像ReactHooks中的useRef，可是Vue包裝的對象自己就是響應式數據源。好了咱們看一下實例理解一下git

// 定義建立響應式數據
    const time = ref(new Date())
    // 設置定時器爲了測試數據響應
    setInterval(() => time.value = new Date(), 1000)

    // 判斷某值是不是響應式類型
    console.log('time is ref:', isRef(time))
    console.log('time', time)
    console.log('time.value', time.value)
    
    // 咱們看看模板裏面咱們這樣展現
    template: ` <div> <div>Date is {{ time }}</div> </div> `
複製代碼

toRefs

toRefs 能夠將reactive建立出的對象展開爲基礎類型

// 若是不用toRefs
    const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })
    return {
        state
    }
    // 模板渲染要這樣寫
    template: ` <div> <div>count is {{ state.count }} </div> <div>plusOne is {{ state.plusOne }}</div> </div> `
    
    // 咱們再看看用了toRefs
    const state = reactive({
        count: 0,
        plusOne: computed(() => state.count + 1)
    })
    return {
        ...toRefs(state)
    }
    // 模板渲染要這樣寫
    template: ` <div> <div>count is {{ count }} </div> <div>plusOne is {{ plusOne }}</div> </div> `
複製代碼

watch 定義監聽器

這個其實沒有什麼新東西github

watch(() => state.count * 2, val => {
        console.log(`count * 2 is ${val}`)
    })
複製代碼

effect 反作用函數

響應式對象修改會觸發這個函數api

// 反作用函數
    effect(() => {
        console.log('數值被修改了..',state.count)
    })
複製代碼

computed 計算屬性

const state = reactive({
    count: 0,
    plusOne: computed(() => state.count + 1)
})
複製代碼

生命週期鉤子Hooks

Vue3	Vue3
beforeCreate	setup(替代)
created	setup(替代)
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

完整代碼實現瀏覽器