笔记

只要是在 setup(){} 写的API，都叫 组合式API(= Composition API)

源码

App.vue

<template>
    <button @click="isShowDemo = !isShowDemo">切换隐藏/显示</button>
    <Demo v-if="isShowDemo"/>
    <hr>
    <Test/>
</template>

<script>
    import {ref} from 'vue'

    //Failed to load resource: the server responded with a status of 404 (Not Found) 解决办法: 引入的时候,添加后缀.vue
    import Demo from './components/Demo.vue'
    import Test from './components/Test.vue'

    export default {
        name: 'App',
        components:{Demo,Test},
        setup() {
            let isShowDemo = ref(true)
            return {isShowDemo}
        }
    }
</script>

components\Demo.vue

<template>
    <h2>当前求和为：{{sum}}</h2>
    <button @click="sum++">点我+1</button>
    <hr>

    <h2>当前点击时鼠标的坐标为：x：{{point.x}}，y：{{point.y}}</h2>
</template>

<script>
    //import {onBeforeUnmount, onMounted, onUnmounted, reactive, ref} from 'vue'
    import {ref} from 'vue'
    //注意: usePoint.js 暴露出来的 usePoint 是一个函数。
    import usePoint from '../hooks/usePoint'

    export default {
        name: 'Demo',

        setup(){
            //数据
            let sum = ref(0)

            //把点 包装为一个对象:
            /*let point = reactive({
                x:0,
                y:0
            })

            onMounted(() => {
                window.addEventListener('click',(event)=>{
                    point.x = event.pageX
                    point.y = event.pageY

                    console.log(event.pageX, event.pageY)
                })
            })
            onBeforeUnmount(()=>{
                //为 click 卸载对应的回调函数. 但是此时的回调并不是上面添加click对应的回调. 所以需要把上面的回调函数放到外面，统一使用。
                window.removeEventListener('click',(event)=>{
                    point.x = event.pageX
                    point.y = event.pageY

                    console.log(event.pageX, event.pageY)
                })
            })*/
            //把回调放到外面，保证使用同一个:
            /*function savePoint(event){
                point.x = event.pageX
                point.y = event.pageY

                console.log(event.pageX, event.pageY)
            }
            onMounted(() => {
                window.addEventListener('click',savePoint)
            })
            onBeforeUnmount(()=>{
                //为 click 卸载对应的回调函数. 但是此时的回调并不是上面添加click对应的回调. 所以需要把上面的回调函数放到外面，统一使用。
                window.removeEventListener('click',savePoint)
            })*/
            //把上面的相关内容打包到 hooks\usePoint.js
            let point = usePoint()

            //返回一个对象（常用）
            return {sum,point}
        }
    }
</script>

hooks\usePoint.js

import {reactive,onMounted,onBeforeUnmount} from 'vue'

//把 当前函数 暴露出去，供别人引用
export default function (){
    //实现鼠标“打点”相关的 数据
    let point = reactive({
        x:0,
        y:0
    })

    //实现鼠标“打点”相关的 方法
    function savePoint(event){
        point.x = event.pageX
        point.y = event.pageY
        console.log(event.pageX,event.pageY)
    }

    //实现鼠标“打点”相关的 生命周期钩子
    onMounted(()=>{
        window.addEventListener('click',savePoint)
    })

    onBeforeUnmount(()=>{
        window.removeEventListener('click',savePoint)
    })

    //把 point 交出去
    return point
}