Fri Jul 12 14:35:00 CST 2024 inscode

src/components/Com1.vue

 <template>
   <div>
-    <h2 ref="h2Ref" @click="msg+='1'">Com1-{{ msg }}</h2>
+    <h2 ref="h2Ref" @click="addMsg">Com1-{{ msg }}</h2>
   </div>
 </template>
 <script setup lang="ts">
-import {ref, defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated, onBeforeMount, onBeforeUpdate } from 'vue'
+import { ref, defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated, onBeforeMount, onBeforeUpdate, nextTick } from 'vue'
 
 const msg = ref("欢迎使用VUE3.0")
 const h2Ref = ref()
 
-onBeforeMount(()=>{
+async function addMsg() {
+  msg.value += '1'
+
+  debugger
+  console.log(h2Ref.value.innerHTML)
+  await nextTick()
+  console.log(h2Ref.value.innerHTML)
+}
+
+onBeforeMount(() => {
+  /**
+   * 注册一个钩子，在组件被挂载之前被调用
+   * 
+   * 当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建 DOM 节点。它即将首次执行 DOM 渲染过程。
+   */
+  console.log(h2Ref.value)
   debugger
 })
-onMounted(()=>{
+onMounted(() => {
+  /**
+   * 注册一个回调函数，在组件挂载完成后执行
+   * 
+   * 组件在以下情况下被视为已挂载：
+   *    其所有同步子组件都已经被挂载 (不包含异步组件或 <Suspense> 树内的组件)
+   *    其自身的 DOM 树已经创建完成并插入了父容器中。注意仅当根容器在文档中时，才可以保证组件 DOM 树也在文档中
+   */
+  console.log(h2Ref.value)
   debugger
 })
 
-onBeforeUpdate(()=>{
+onBeforeUpdate(() => {
+  /**
+   * 注册一个钩子，在组件即将因为响应式状态变更而更新其 DOM 树之前调用
+   * 
+   * 这个钩子可以用来在 Vue 更新 DOM 之前访问 DOM 状态。在这个钩子中更改状态也是安全的
+   */
+  console.log(h2Ref.value.innerHTML)
   debugger
 })
-onUpdated(()=>{
+onUpdated(() => {
+  /**
+   * 注册一个回调函数，在组件因为响应式状态变更而更新其 DOM 树之后调用
+   * 
+   * 父组件的更新钩子将在其子组件的更新钩子之后调用
+   * 这个钩子会在组件的任意 DOM 更新后被调用，这些更新可能是由不同的状态变更导致的，因为多个状态变更可以在同一个渲染周期中批量执行 (考虑到性能因素)。如果你需要在某个特定的状态更改后访问更新后的 DOM，请使用 nextTick() 作为替代
+   */
+  console.log(h2Ref.value.innerHTML)
   debugger
 })
 
 onActivated(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
 })
 onDeactivated(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
 })
 
-onBeforeUnmount(()=>{
+onBeforeUnmount(() => {
+  /**
+   * 注册一个钩子，在组件实例被卸载之前调用
+   * 
+   * 当这个钩子被调用时，组件实例依然还保有全部的功能
+   */
   debugger
 })
-onUnmounted(()=>{
+onUnmounted(() => {
+  /**
+   * 注册一个回调函数，在组件实例被卸载之后调用
+   * 
+   * 一个组件在以下情况下被视为已卸载：
+   *    其所有子组件都已经被卸载
+   *    所有相关的响应式作用 (渲染作用以及 setup() 时创建的计算属性和侦听器) 都已经停止
+   * 可以在这个钩子中手动清理一些副作用，例如计时器、DOM 事件监听器或者与服务器的连接
+   */
   debugger
 })
 </script>
\ No newline at end of file

src/components/Com2.vue

 <template>
   <div>
-    <h2 ref="refDom">Com2-{{ msg }}</h2>
-    <button @click="msg+='1'">changeMsg</button>
+    <h2 ref="h2Ref" @click="addMsg">Com2-{{ msg }}</h2>
   </div>
 </template>
 <script setup lang="ts">
-import { ref,defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onBeforeMount, onMounted, onBeforeUpdate, onUpdated  } from 'vue'
-const msg = ref('欢迎使用Vue')
-debugger
+import { ref, defineProps, computed, defineEmits, onActivated, onDeactivated, onBeforeUnmount, onUnmounted, onMounted, onUpdated, onBeforeMount, onBeforeUpdate, nextTick } from 'vue'
 
-const refDom = ref(null)
+const msg = ref("欢迎使用VUE3.0")
+const h2Ref = ref()
 
-onBeforeMount(()=>{
+async function addMsg() {
+  msg.value += '1'
+
+  debugger
+  console.log(h2Ref.value.innerHTML)
+  await nextTick()
+  console.log(h2Ref.value.innerHTML)
+}
+
+onBeforeMount(() => {
+  console.log(h2Ref.value)
   debugger
-  console.log('Com2-onBeforeMount',refDom.value)
 })
-onMounted(()=>{
+onMounted(() => {
+  console.log(h2Ref.value)
   debugger
-  console.log('Com2-onMounted',refDom.value)
 })
 
-onBeforeUpdate(()=>{
+onBeforeUpdate(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
-  console.log('Com2-onBeforeUpdate',refDom.value.innerHTML)
 })
-onUpdated(()=>{
+onUpdated(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
-  console.log('Com2-onUpdated',refDom.value.innerHTML)
 })
 
 onActivated(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
-  console.log('Com2-onActivated')
 })
 onDeactivated(() => {
+  console.log(h2Ref.value.innerHTML)
   debugger
-  console.log('Com2-onDeactivated')
 })
 
-onBeforeUnmount(()=>{
+onBeforeUnmount(() => {
   debugger
-  console.log('Com2-onBeforeUnmount')
 })
-onUnmounted(()=>{
+onUnmounted(() => {
   debugger
-  console.log('Com2-onUnmounted')
 })
 </script>
\ No newline at end of file