Vue3-生命周期

生命周期钩子

onMounted 钩子可以用来在组件完成初始渲染并创建 DOM 节点后运行代码：

js 复制代码

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log(`the component is now mounted.`)
})
</script>

还有一些钩子，会在实例生命周期的不同阶段被调用，最常用的是onMounted、onUpdated 和 onUnmounted。

当调用onMounted时，Vue会自动将回调函数注册到当前正被初始化的组件实例上。这意味着这些钩子应当在初始化时被同步注册。

js 复制代码

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

onMounted()不一定要直接写在setup()里面，但一定要在setup()执行期间被调用

直接写在setup()里面：

js 复制代码

<script setup>
import { onMounted } from 'vue'

onMounted(() => {
  console.log('mounted')
})
</script>

在 setup() 的词法上下文中:

js 复制代码

// useLog.js
import { onMounted } from 'vue'

export function useLog() {
  onMounted(() => {
    console.log('mounted')
  })
}

js 复制代码

<script setup>  
import { useLog } from './useLog'  
  
useLog()  
</script>

这样的执行过程是：

scss 复制代码

setup()  
│  
▼  
useLog()  
│  
▼  
onMounted()

OnMounted也不可以通过延时函数异步执行，当setup已经执行完的时候，vue就不知道onMounted究竟属于哪个组件了

对于文档调用栈来说，只要是：

scss 复制代码

setup()  
│  
▼  
A()  
│  
▼  
B()  
│  
▼  
C()  
│  
▼  
onMounted()

而没有：

这种中断，vue都认为是延时函数

setup() : 组件开始工作的入口。当<User>创建后，就会执行setup() -> 生成响应式数据 -> 生成模板 -> 渲染页面，所以setup是最早执行的，通常进行一些初始化工作，如：

注意<script setup> = setup(){}

挂载完成生命周期，即组件已经真正出现在页面上了

例如：

js 复制代码

<template>  
<h1>Hello</h1>  
</template>

在浏览器最终变成：

js 复制代码

<h1>Hello</h1>

到了这一刻，里面的代码才会执行，这时才能：

为什么需要onMounted

当如下情况发生时

js 复制代码

<template>
  <input ref="inputRef">
</template>

如果

js 复制代码

<script setup>
inputRef.value.focus()
</script>

就会报错，因为setup()时页面还没有创建，即input还不存在