1.生命周期
<template><div><div>{{ a }}</div><div @click="test"></div></div>
</template>
<script setup lang="ts" name="hi">
import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
let a = ref(0)
function test() {a.value += 1
}
// 创建 beforeCreate Created没有了 他俩相当于setup
// 直接在这里写就行
console.log('创建')
// 挂载前
onBeforeMount(() => {console.log('挂载前')
})
// 挂载完毕
onMounted(() => {console.log('挂载完毕')
})
// 更新前
onBeforeUpdate(() => {console.log('更新前')
})
// 更新完毕
onUpdated(() => {console.log('更新完毕')
})
// 卸载前
onBeforeUnmount(() => {console.log('卸载前')
})
// 卸载完毕
onUnmounted(() => {console.log('卸载完毕')
})
</script>
<style></style>父和子之间的生命周期流程，子所有的流程钩子走完了，继续走父亲的钩子
2.常用的钩子
3.hooks 让相同的数据方法贴在一起 模块化开发 （没有hooks没有组合式）
命名需要位 useXXX
加入所有相关数据，并暴露
使用
4.hooks能写钩子，计算属性
