组合API-生命周期函数

个人简介

‍‍个人主页： 魔术师
学习方向： 主攻前端方向，正逐渐往全栈发展
个人状态： 研发工程师，现效力于政务服务网事业
人生格言： “心有多大，舞台就有多大。”
推荐学习： Vue2 Vue3 Vue2/3项目实战 Node.js实战 Three.js 鸿蒙开发
使用备注：仅供学习交流 严禁用于商业用途 ，若发现侵权内容请及时联系作者
更新进度：持续更新内容
个人名片：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧

12-组合API-生命周期函数

掌握：vue3的常用生命周期函数

使用步骤：

1. 先从vue中导入以on打头的生命周期钩子函数
2. 在setup函数中调用生命周期函数并传入回调函数
3. 生命周期钩子函数可以调用多次

具体内容：

• Vue3和vue2的生命周期对比

选项式API下的生命周期函数使用	组合式API下的生命周期函数使用
beforeCreate	不需要（直接写到setup函数中）
created	不需要（直接写到setup函数中）
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroyed	onBeforeUnmount
destroyed	onUnmounted
activated	onActivated
deactivated	onDeactivated-

<template>
  <div>生命周期函数</div>
</template>
<script>
import { onMounted } from "vue";
export default {
  name: "App",
  setup() {
    // 生命周期函数：组件渲染完毕
  
    onMounted(()=>{
      console.log('onMounted触发了')
    })

    onMounted(()=>{
      console.log('onMounted也触发了')
    })
  },
};
</script>

总结：

• 常用的 onMounted 组件渲染完毕：发请求，操作dom，初始化图表…