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

2022年6月30日09:17:54

vue3生命周期、和hook

vue3生命周期图

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

生命钩子(与name、setup配置项同级)

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-----");},

组合api形式写法

全部改名：
前端之vue3生命周期、hook封装组合式api
要引入
import {} from ‘vue’
前端之vue3生命周期、hook封装组合式api

hook

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

位置：

在src下创建文件夹hooks, 内部文件是use···.js命名
前端之vue3生命周期、hook封装组合式api

内容：

每个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.渲染模板

总结

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

  • 作者：一只爱吃萝卜的小兔子
  • 原文链接：https://blog.csdn.net/weixin_46372074/article/details/124951381
    更新时间：2022年6月30日09:17:54 ，共 1108 字。