关于前端:热点面试题Vue23-生命周期及作用

前言

系列首发于公众号『前端进阶圈』，更多精彩内容敬请关注公众号最新消息。

Vue2 的生命周期？

分类：

• Vue 生命周期分为 8 个阶段：创立前后，载入前后，更新前后，销毁前后

作用 / 过程

• beforeCreate -> created：初始化 Vue 实例
• created:
• 可调用 methods 中的办法
• 可拜访和批改 data 中的数据来触发响应式渲染 dom
• 可调用 computed 和 watch 办法。
• 但此时 vm.$el 还未创立。
• create -> beforeMount:
• 判断 el 是否存在，若不存在进行编译，间接调用 vm.$mount(el) 持续编译。
• 编译优先级：render -> template -> outerHTML
• beforeMount:
• 可获取到 vm.el
• 已实现 DOM 初始化，但还未挂载 DOM
• beforeMount -> mounted: vm.el 已实现挂载，vm.$el生成的 DOM 曾经替换了 el 上所对应的 DOM
• mounted: vm.el 已实现 DOM 的挂载和渲染
• beforeUpdate:
• view 层还没更新
• 若在 beforeUpdate 中批改数据，不会触发以后办法
• updated:
• 实现了 view 层的更新
• 若在 updated 中批改数据，会再次触发更新办法(beforeUpdate, updated)
• beforeDestroy: Vue实例销毁前调用，此时实例的属性和办法仍可拜访。
• bestroyed:
• 销毁 Vue 实例
• 并没有革除 DOM，仅仅是销毁 Vue 实例

Vue3 的生命周期？

生命周期函数

作用 / 过程

• onMounted(): 注册一个回调函数，在组件挂载实现后执行。

  function onMounted(callback: () => void): void
  
  
  // demo：通过模板援用拜访一个元素：<script setup>
  import {ref, onMounted} from 'vue'
  
  const el = ref()
  
  onMounted(() => {el.value // <div>})
  </script>
  
  <template>
  <div ref="el"></div>
  </template>

• onUpdated()：注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用。父组件的更新钩子将在其子组件的更新钩子之后调用。

  function onUpdated(callback: () => void): void
  
  
  
  // demo: 拜访更新后的 DOM
  <script setup>
  import {ref, onUpdated} from 'vue'
  
  const count = ref(0)
  
  onUpdated(() => {
  // 文本内容应该与以后的 `count.value` 统一
  console.log(document.getElementById('count').textContent)
  })
  </script>
  
  <template>
  <button id="count" @click="count++">{{count}}</button>
  </template>

• onUnmounted()：注册一个回调函数，在组件实例被卸载之后调用。

  function onUnmounted(callback: () => void): void
  
  
  
  // demo
  <script setup>
  import {onMounted, onUnmounted} from 'vue'
  
  let intervalId
  onMounted(() => {intervalId = setInterval(() => {// ...})
  })
  
  onUnmounted(() => clearInterval(intervalId))
  </script>

• onBeforeMount(): 注册一个钩子，在组件被挂载之前被调用。当这个钩子被调用时，组件曾经实现了其响应式状态的设置，但还没有创立 DOM 节点。它行将首次执行 DOM 渲染过程。

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

• onBeforeUpdate()：注册一个钩子，在组件行将因为响应式状态变更而更新其 DOM 树之前调用。这个钩子能够用来在 Vue 更新 DOM 之前拜访 DOM 状态。在这个钩子中更改状态也是平安的。

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

• onBeforeUnmount()：注册一个钩子，在组件实例被卸载之前调用。当这个钩子被调用时，组件实例仍然还保有全副的性能。

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

• onErrorCaptured(): 注册一个钩子，在捕捉了后辈组件传递的谬误时调用。

  • 谬误能够从以下几个起源中捕捉：

    • 组件渲染
    • 事件处理器
    • 生命周期钩子
    • setup() 函数
    • 侦听器
    • 自定义指令钩子
    • 过渡钩子
      这个钩子带有三个实参：谬误对象、触发该谬误的组件实例，以及一个阐明谬误起源类型的信息字符串。

你能够在 errorCaptured() 中更改组件状态来为用户显示一个谬误状态。留神不要让谬误状态再次渲染导致本次谬误的内容，否则组件会陷入有限循环。

这个钩子能够通过返回 false 来阻止谬误持续向上传递

function onErrorCaptured(callback: ErrorCapturedHook): void

type ErrorCapturedHook = (
    err: unknown,
    instance: ComponentPublicInstance | null,
    info: string
) => boolean | void

• onRenderTracked()：dev only。注册一个调试钩子，当组件渲染过程中追踪到响应式依赖时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

  function onRenderTracked(callback: DebuggerHook): void
  
  type DebuggerHook = (e: DebuggerEvent) => void
  
  type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TrackOpTypes /* 'get' | 'has' | 'iterate' */
  key: any
  }

• onRenderTriggered()：注册一个调试钩子，当响应式依赖的变更触发了组件渲染时调用。这个钩子仅在开发模式下可用，且在服务器端渲染期间不会被调用。

  function onRenderTriggered(callback: DebuggerHook): void
  
  type DebuggerHook = (e: DebuggerEvent) => void
  
  type DebuggerEvent = {
  effect: ReactiveEffect
  target: object
  type: TriggerOpTypes /* 'set' | 'add' | 'delete' | 'clear' */
  key: any
  newValue?: any
  oldValue?: any
  oldTarget?: Map<any, any> | Set<any>
  }

• onActivated(): 注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件被插入到 DOM 中时调用。

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

• onDeactivated()：注册一个回调函数，若组件实例是 <KeepAlive> 缓存树的一部分，当组件从 DOM 中被移除时调用。

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

• onServerPrefetch(): 注册一个异步函数，在组件实例在服务器上被渲染之前调用。

  function onServerPrefetch(callback: () => Promise<any>): void
  
  
  // demo
  <script setup>
  import {ref, onServerPrefetch, onMounted} from 'vue'
  
  const data = ref(null)
  
  onServerPrefetch(async () => {
  // 组件作为初始申请的一部分被渲染
  // 在服务器上预抓取数据，因为它比在客户端上更快。data.value = await fetchOnServer(/* ... */)
  })
  
  onMounted(async () => {if (!data.value) {
      // 如果数据在挂载时为空值，这意味着该组件
      // 是在客户端动静渲染的。将转而执行
      // 另一个客户端侧的抓取申请
      data.value = await fetchOnClient(/* ... */)
  }
  })
  </script>

  文章特殊字符形容：

• 问题标注 Q:(question)
• 答案标注 R:(result)
• 注意事项规范：A:(attention matters)
• 详情形容标注：D:(detail info)
• 总结标注：S:(summary)
• 剖析标注：Ana:(analysis)

• 提醒标注：T:(tips)

  往期回顾：

• 热点面试题：浏览器和 Node 的宏工作和微工作？
• 这是你了解的 CSS 选择器权重吗？
• 热点面试题：JS 中 call, apply, bind 概念、用法、区别及实现？
• 热点面试题：罕用位运算办法？
• Vue 数据监听 Object.definedProperty()办法的实现
• 热点面试题：Virtual DOM 相干问题？
• 热点面试题：Array 中有哪些非破坏性办法？

• 热点面试题：协商缓存和强缓存的了解及区别？

  最初：

• 欢送关注『前端进阶圈』公众号，一起摸索学习前端技术 ……
• 公众号回复 加群 或 扫码, 即可退出前端交流学习群，一起高兴摸鱼和学习 ……
• 公众号回复 加好友，即可添加为好友