【备战春招】第5天 6-13 Composition API 如何实现逻辑复用

课程名称：前端框架及项目面试 聚焦Vue3/React/Webpack

课程章节：6-13 Composition API 如何实现逻辑复用

课程讲师： 双越

课程内容：

6-13 Composition API 如何实现逻辑复用

课程收获：

Composition API实现逻辑复用的步骤：

抽离逻辑代码到一个函数，这个函数命令约定为useXXX格式（这点同React Hooks）
在setup中引用函数useXXX

import { reactive, ref, onMounted, onUnmounted } from 'vue'

function useMousePosition() {


    const x = ref(0)
    const y = ref(0)

    function update(e) {
        x.value = e.pageX
        y.value = e.pageY
    }

    onMounted(() => {
        console.log('useMousePosition mounted')
        window.addEventListener('mousemove', update)
    })

    onUnmounted(() => {
        console.log('useMousePosition unMounted')
        window.removeEventListener('mousemove', update)
    })

    return {
        x,
        y
    }
}
export default useMousePosition

谢谢老师，讲的非常细致，很容易懂。这一节学的是Composition API 如何实现逻辑复用，为以后的学习打下了基础。
原来vue3能有这么多种性质，以及对vue3有了新的认识，期待后边的学习