vue3.0的hook数据与vue2.0的mixin数据理解和使用

**

1.vue3的hook数据：相当于封装了工具的方法，便于重用；

**
第一步.用于在根目录下创建新文件夹hooks，在hooks在以下位置创建文件夹UserPoint.js

/*
 * @Description:创建hooks文件风格，必须有返回值，灵魂在底部return
 * @Author: zdx
 * @Date: 2021-12-22 17:07:50
 * @LastEditors: zdx
 * @LastEditTime: 2021-12-23 11:30:35
 */
import { reactive, onMounted, onBeforeUnmount } from "vue";
export default function () {
    let point = reactive({
        x: 0,
        y: 0
    })
    function savePoint(e) {
        point.x = e.x
        point.y = e.y
        console.log(point.x, point.y, "请求了savePoint接口！")
    }
    onMounted(() => {
        window.addEventListener("click", savePoint)
    });
    onBeforeUnmount(() => {
        console.log(卸载了~)
        window.removeEventListener("click", savePoint)
    })

    return point
}

第二步.在集团建设中的应用
例如，一个新的Demo.vue组件、新的其他组件也可以这样使用；
注意：’getPoint‘ import当名称由其自身定义时，它可以被定义为任何东西；

import getPoint from ../hooks/UsePoint
export default {
    name: "Demo",
    setup() {
         let point = getPoint()
         return {point}
    }
};

**

2.vue2.0的mixin.js的使用

**

以下示例：

定义混合mixin.js文件

局部引入

全局引入