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

完整代码实现浏览器