前端之vue3生命周期、hook封装组合式api

beforeCreate(){     console.log("-----beforeCreate-----");},created(){     console.log("-----created-----");},beforeMount(){     console.log("-----beforeMount-----");},mounted(){     console.log("-----mounted-----");},beforeUpdate(){     console.log("-----beforeUpdate-----");},updated(){     console.log("-----updated-----");},beforeUnmount(){     console.log("-----beforeUnmount-----");},unmounted(){     console.log("-----unmounted-----");},

全部改名：

要引入
import {} from ‘vue’

类似vue2的mixin，本质是函数,用来封装组合式api(ref、reactive)

位置：

在src下创建文件夹hooks, 内部文件是use···.js命名

内容：

每个hook文件，包含数据、方法、钩子

// 引入组合式apiimport{ reactive, onMounted, onBeforeUnmount}from"vue";// 暴露hook函数exportdefaultfunction(){// 数据: 存储鼠标位置let point=reactive({x:0,y:0,});// 函数: 记录鼠标点击位置functionsavePoint(event){     point.x= event.pageX;     point.y= event.pageY;// console.log(point);}// 钩子onMounted(()=>{     window.addEventListener("click", savePoint);});onBeforeUnmount(()=>{     window.removeEventListener("click", savePoint);});// 返回数据return point;}

使用:

在组件中使用时
1…引入hook
2.使用

setup(){let point=usePoint();return{       point,};},

3.渲染模板

总结