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

vue3生命周期图

生命钩子(与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-----");
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

组合api形式写法

全部改名：

要引入
import {} from ‘vue’

hook

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

位置：

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

内容：

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

// 引入组合式api
import { reactive, onMounted, onBeforeUnmount } from "vue";

// 暴露hook函数
export default function () {
  // 数据: 存储鼠标位置
  let point = reactive({
    x: 0,
    y: 0,
  });

  // 函数: 记录鼠标点击位置
  function savePoint(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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

使用:

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

  setup() {
    let point = usePoint();

    return {
      point,
    };
  },
1
2
3
4
5
6
7

3.渲染模板

总结