vue3生命周期和hook函数四

最新推荐文章于 2025-04-28 06:58:24 发布

米白蓝

最新推荐文章于 2025-04-28 06:58:24 发布

阅读量409

点赞数

分类专栏： vue3 文章标签： javascript vue.js

本文链接：https://blog.youkuaiyun.com/qq_50563868/article/details/125016349

版权

vue3 专栏收录该内容

4 篇文章

订阅专栏

Vue3中生命周期钩子发生了变化，beforeDestroy和destroyed被替换为beforeUnmount和unmounted。组合式API中，beforeCreate和created对应setup，其他如beforeMount到unmounted都有对应的on*钩子函数。值得注意的是，setup先执行，然后是带有on前缀的钩子。此外，通过创建自定义hook文件，可以实现类似Vue2中mixin的功能，用于代码复用和提高效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setup() {
    let sum = ref(0)
    console.log('---setup---');
    onBeforeMount(() => {
      console.log('---onBeforeMount---');
    })
    onMounted(() => {
      console.log('---onMounted---');
    })
    onBeforeUpdate(() => {
      console.log('---onBeforeUpdate---');
    })
    onUpdated(() => {
      console.log('---onUpdated---');
    })
    onBeforeUnmount(() => {
      console.log('---onBeforeUnmount---');
    })
    onUnmounted(() => {
      console.log('---onUnmounted---');
    })
    return {
      sum,
    }
  }

vue3生命周期：最后一对钩子由beforeDestroy和Destroy改为beforeUNmount和unmounted；
组合式API生命周期（写在setup中）：beforeCreate和created相当于setup，在setup中beforeMount->onBeforeMount；mounted->onMounted；beforeUpdate->onBeforeUpdate；updated->onUpdated；beforeUNmount->onBeforeUNmount；unmounted->onUnmounted；配置项形式和组合式的有一个先后顺序，setup先执行，然后带有on会先执行；

//usePoint.js
import {reactive, onMounted, onUnmounted} from 'vue'
export default function() {
  // 实现鼠标打点
  let point = reactive({
    x:0,
    y:0
  })
  function savePoint(event) {
    point.x = event.pageX
    point.y = event.pageY
    console.log(event.pageX,event.pageY);
  }
  onMounted(() => {
    window.addEventListener('click' ,savePoint)
  })
  onUnmounted(() => {
    window.removeEventListener('click', savePoint)
  })
  return point
}

//demo.vue
import {ref} from 'vue'
import usePoint from '../hooks/usePoint'
export default {
  name: "Demo",
  setup() {
    let sum = ref(0)
    let point = usePoint()
    return {
      sum,
      point
    };
  },
};