vue3生命周期、和hook
- vue3生命周期图
- 生命钩子(与name、setup配置项同级)
- 组合api形式写法
- hook
-
- 位置：
- 内容：
- 使用:
- 总结
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文件，包含数据、方法、钩子
// 引入组合式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.渲染模板
总结
声明：本站所有文章，如无特殊说明或标注，均为网络收集发布。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。
