06 【生命周期 模板引用】

11.生命周期

vue2

vue3

• Vue3.0中可以继续使用Vue2.x中的生命周期钩子，但有有两个被更名：
  • beforeDestroy改名为 beforeUnmount
  • destroyed改名为 unmounted
• Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：
  • beforeCreate===>setup()
  • created=======>setup()
    在setup比beforeCreate还先执行
  • beforeMount ===>onBeforeMount
  • mounted=======>onMounted
  • beforeUpdate===>onBeforeUpdate
  • updated =======>onUpdated
  • beforeUnmount ==>onBeforeUnmount
  • unmounted =====>onUnmounted

关于两个销毁生命周期，可以在组件实例上用v-if打成

所有罗列在下面的 API 都应该在组件的 setup() 阶段被同步调用。相关细节请看指南 - 生命周期钩子。

11.1 onBeforeMount#

注册一个钩子，在组件被挂载之前被调用。

• 类型

  function onBeforeMount(callback: () => void): void
  

• 详细信息

  当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。

  这个钩子在服务器端渲染期间不会被调用。

11.2 onMounted#

注册一个回调函数，在组件挂载完成后执行。

• 类型

  function onMounted(callback: () => void): void
  

• 详细信息

  组件在以下情况下被视为已挂载：

  • 其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)。
  • 其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中。

  这个钩子通常用于执行需要访问组件所渲染的 DOM 树相关的副作用，或是在服务端渲染应用中用于确保 DOM 相关代码仅在客户端执行。

  这个钩子在服务器端渲染期间不会被调用。

• 示例

  通过模板引用访问一个元素：

  <script setup>
  import { ref, onMounted } from 'vue'
  
  const el = ref()
  
  onMounted(() => {
    el.value // <div>
  })
  </script>
  
  <template>
    <div ref="el"></div>
  </template>
  

11.3 onBeforeUpdate#

注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用。

• 类型

  function onBeforeUpdate(callback: () => void): void
  

• 详细信息

  这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的。

  这个钩子在服务器端渲染期间不会被调用。

11.4 onUpdated#

注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。

• 类型

  function onUpdated(callback: () => void): void
  

• 详细信息

  父组件的更新钩子将在其子组件的更新钩子之后调用。

  这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代。

  这个钩子在服务器端渲染期间不会被调用。

  警告

  不要在 updated 钩子中更改组件的状态，这可能会导致无限的更新循环！

• 示例

  访问更新后的 DOM

  <