const {
            createApp,
            reactive, // 创建响应式数据对象
            ref, // 创建一个响应式的数据对象
            toRefs, // 将响应式数据对象转换为单一响应式对象
            isRef, // 判断某值是否是引用类型
            computed, // 创建计算属性
            watch, // 创建watch监听
            // 生命周期钩子
            onMounted,
            onUpdated,
            onUnmounted,
        } = Vue

setup使用composition API的入口

setup函数会在 beforeCreate之后 created之前执行

setup(props,context){
    console.log('setup....',)
    console.log('props',props) // 组件参数
    console.log('context',context) // 上下文对象
}

好的其实大家可以和自己原来的React偶不Vue2代码对号入座。

reactive

reactive() 函数接受一个普通对象返回一个响应式数据对象

    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包装的对象本身就是响应式数据源。好了我们看一下实例理解一下

    // 定义创建响应式数据
    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 定义监听器

这个其实没有什么新东西

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

effect 副作用函数

响应式对象修改会触发这个函数

    // 副作用函数
    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

完整代码实现

尝鲜Vue3之三：CompositionAPI小结和包装对象

目录