【框架类】—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() 在组件实例在服务器上被渲染之前调用 , 仅服务器端使用

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

相关推荐
疯狂的沙粒19 分钟前
在uni-app中如何从Options API迁移到Composition API?
javascript·vue.js·uni-app
siwangqishiq223 分钟前
Vulkan Tutorial 教程翻译(四) 绘制三角形 2.2 呈现
前端
李三岁_foucsli24 分钟前
js中消息队列和事件循环到底是怎么个事,宏任务和微任务还存在吗?
前端·chrome
尽欢i25 分钟前
HTML5 拖放 API
前端·html
xiaominlaopodaren39 分钟前
Three.js 光影魔法:如何单独点亮你的3D模型
javascript
PasserbyX41 分钟前
一句话解释JS链式调用
前端·javascript
1024小神42 分钟前
tauri项目,如何在rust端读取电脑环境变量
前端·javascript
Nano1 小时前
前端适配方案深度解析:从响应式到自适应设计
前端
古夕1 小时前
如何将异步操作封装为Promise
前端·javascript
小小小小宇1 小时前
前端定高和不定高虚拟列表
前端