生命周期钩子

生命周期钩子让开发者有机会再特定的时机(比如:初始化,设置好数据侦听,编译模板,挂载到DOM,更新,销毁等)执行代码

生命周期示意图

注册周期钩子

那onMounted钩子来说,它可以在组件完成渲染并创建DOM节点后执行代码

import { onMounted } from 'vue'
export default {
  setup() {
    onMounted(() => {
      console.log('组件挂载完成')
    })
  },
}

<script setup>
  import {onMounted} from 'vue' onMounted(() => {console.log(`the component is now mounted.`)})
</script>

生命周期钩子是在组件初始化时同步注册的,,Vue会自动将回调函数注册到当前组件实例上,所以不要这样做:

setTimeout(() => {
  onMounted(() => {
    // 异步注册时当前组件实例已丢失
    // 这将不会正常工作
  })
}, 100)

但是这并不意味着,生命周期钩子只能在setup函数中调用,实际上,可以在任何地方调用它们,只要调用栈是同步的,且最终起源于setup()就可以