【框架类】—Vue3的生命周期

一、生命周期的相关函数

  1. onBeforeMount 页面渲染之前 和 onMounted渲染之后 示例
html 复制代码
<template>
  <div class="test">
    <div ref="el">组件初始化</div>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onMounted} from 'vue'
export default {
 name:'about',
 setup(){
    const el = ref(null)
    // 组件(DOM节点渲染)挂载之前调用, 响应式数据已经设置完毕
    onBeforeMount(()=> {
      console.log('组件挂载之前调用', el.value)
    })

    // DOM节点加载完成执行
    onMounted(()=> {
      console.log('DOM节点加载完成执行', el.value)
    })
    return {
      el
    }
  }
}
</script>
<style></style>
  1. onBeforeUpdate DOM视图更新之前和 onUpdated DOM视图更新完成后
html 复制代码
<template>
  <div class="test">
    <button id="count" @click="count++"> 组件更新{{ count }}</button>>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeUpdate, onUpdated} from 'vue'
export default {
 name:'about',
 setup(){
    const count = ref(0)
    // DOM视图更新之前调用
    onBeforeUpdate(()=> {
      console.log('DOM视图更新之前调用')
    })

    // DOM视图更新完成后调用
    onUpdated(()=> {
      // 文本内容应该与当前的 `count.value` 一致
      console.log('DOM视图更新完成后调用', document.getElementById('count').textContent)
    })
    return {
      count
    }
  }
}
</script>
<style></style>
  1. onErrorCaptured 子孙组件的错误时调用
    父组件
html 复制代码
<template>
  <div class="test">
    <test1 ref="test1"></test1>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onErrorCaptured} from 'vue'
import test1 from './test1.vue'
export default {
 name:'about',
 components: {
  test1
 },
 setup(){
    // 当捕获一个来自子孙组件的错误时被调用
    onErrorCaptured(()=> {
      console.log('当捕获一个来自子孙组件的错误时被调用')
    })
    return {
      
    }
  }
}
</script>
<style></style>

子组件

html 复制代码
<template>
  <div class="">测试</div>
</template>

<script>
export default {
  setup () {
  	// 因为test没有声明,test一定会报错
    console.log('test', test)
  }
}
</script>

<style></style>

3-1 子孙组件错误触发的来源列表

  1. onBeforeUnmount 组件卸载前 和 onUnmounted 组件卸载后
html 复制代码
<template>
  <div class="test">
    <button @click="jumpRoute">跳转路由</button>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeUnmount, onUnmounted} from 'vue'
import { useRouter } from 'vue-router'
export default {
 name:'about',
 setup(){
    const router = useRouter()
    function jumpRoute () {
      router.push({ name: 'promotionApply', query: {name: '张三'} })
    }

    // 组件卸载之前调用 ,路由跳转前触发
    onBeforeUnmount(()=> {
      console.log('组件卸载前')
    })

    // 组件实例被卸载之后调用,路由跳转前触发
    onUnmounted(() => {
      // 常用于手动清除副作用,计时器、DOM事件监听器或者与服务器的连接
      console.log('组件卸载后')
    })
    return {
      jumpRoute
    }
  }
}
</script>
<style></style>
  1. onRenderTracked 仅在开发模式下可用, 组件渲染过程中,追踪到响应式依赖时调用
html 复制代码
<template>
  <div class="test">
  	<div ref="el">组件初始化</div>
    <button id="count" @click="count++"> 组件更新{{ count }}</button>>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onRenderTracked,onMounted} from 'vue'
export default {
 name:'about',
 setup(){
    const el = ref(null)
    const count = ref(0)
    // 组件挂载之前调用, 响应式数据已经设置完毕
    onBeforeMount(()=> {
      console.log('组件挂载之前调用', el.value)
    })

    // 仅在开发模式下可用, 组件渲染过程中,追踪到响应式依赖时调用
    onRenderTracked(()=> {
      console.log('仅在开发模式下可用, 组件渲染过程中,追踪到响应式依赖时调用')
    })

    // DOM节点节点加载完成
    onMounted(()=> {
      console.log('DOM节点节点加载完成', el.value)
    })
    return {
      count,el
    }
  }
}
</script>
<style></style>
  1. onRenderTriggered 仅在开发模式下可用, 组件渲染过程中,响应式数据触发更新时调用
html 复制代码
<template>
  <div class="test">
  	<div ref="el">组件初始化</div>
    <button id="count" @click="count++"> 组件更新{{ count }}</button>>
  </div>
</template>
<script>
//按需引入所需方法
import { ref, onBeforeMount, onRenderTracked,onMounted} from 'vue'
export default {
 name:'about',
 setup(){
    const el = ref(null)
    const count = ref(0)
    // 组件挂载之前调用, 响应式数据已经设置完毕
    onBeforeMount(()=> {
      console.log('组件挂载之前调用', el.value)
      setTimeout(() => {
        count.value = 100
      }, 0);
    })

    // 仅在开发模式下可用, 组件渲染过程中,追踪到响应式依赖时调用
    onRenderTracked(()=> {
      console.log('仅在开发模式下可用, 组件渲染过程中,追踪到响应式依赖时调用')
    })

    // DOM节点节点加载完成
    onMounted(()=> {
      console.log('DOM节点加载完成', el.value, count.value)
    })

    // 仅在开发模式下可用, 组件渲染过程中,响应式数据触发更新时调用
    onRenderTriggered(()=> {
      console.log('仅在开发模式下可用,组件渲染过程中, 响应式数据触发更新时调用', count.value)
    })

    // DOM视图更新之前调用
    onBeforeUpdate(()=> {
      console.log('DOM视图更新之前调用')
    })

    // DOM视图更新完成后调用
    onUpdated(()=> {
      // 文本内容应该与当前的 `count.value` 一致
      console.log('DOM视图更新完成后调用', document.getElementById('count').textContent)
    })
    return {
      count,el
    }
  }
}
</script>
<style></style>

二、生命周期函数运行顺序

  1. onBeforeMount DOM节点渲染之前触发, 响应式数据已设置完毕
  2. onRenderTracked DOM节点渲染过程中, 追踪到页面有依赖响应式数据时触发 仅开放模式下可以
  3. onMounted DOM节点渲染完成后触发
  4. onRenderTriggered 响应式数据触发更新时调用
  5. onBeforeUpdate DOM视图更新之前调用
  6. onUpdated DOM视图更新完成后调用
  7. onErrorCaptured 当捕获一个来自子孙组件的错误时被调用
  8. onBeforeUnmount 路由跳转时,卸载当前组件之前触发
  9. onUnmounted 路由跳转时,卸载当前组件之后触发

三、 其他生命周期函数

  1. onActivated() 若组件实例是 缓存树的一部分,当组件被插入到 DOM 中时调用。
  2. onDeactivated() 若组件实例是 缓存树的一部分,当组件从 DOM 中被移除时调用。
  3. onServerPrefetch() 在组件实例在服务器上被渲染之前调用 , 仅服务器端使用

因为实际使用频率较少,所以没有列举相关实例,有需要的同学可以根据官方文档,自行再实际代码中测试

相关推荐
三翼鸟数字化技术团队12 分钟前
Vue自定义指令最佳实践教程
前端·vue.js
Jasmin Tin Wei41 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码1 小时前
Spring Task 定时任务
java·前端·spring
猿榜1 小时前
js逆向-喜某拉雅Xm-Sign参数解密
javascript
转转技术团队1 小时前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark2381 小时前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js