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

组合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…引入hook
2.使用

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

3.渲染模板

总结