vue3-生命周期

这篇具有很好参考价值的文章主要介绍了vue3-生命周期。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

生命周期

生命周期
  • vue 组件实例都有自己的一个生命周期

  • 从创建->初始化数据->编译模版->挂载实例到 DOM->数据变更后更新 DOM ->卸载组件

  • 生命周期简单说就是 vue 实例从创建到销毁的过程

生命周期钩子

在各个周期运行时,会执行钩子函数,让开发者有机会在特定阶段运行自己的代码。这就是生命周期钩子

官方示意图:

vue3-生命周期,vue3,javascript,vue.js,前端,vue

生命周期钩子函数

钩子函数 说明
beforeCreate 在实例初始化之后 调用
created 实例已经创建完成之后调用
beforeMount 在挂载开始之前被调用
mounted 在组件挂载完成后执行
beforeUpdate 在组件即将因为响应式状态变更而更新其 DOM 树之前调用
updated 在组件因为响应式状态变更而更新其 DOM 树之后调用
beforeDestroy 实例销毁之前调用
destroyed 实例销毁后调用
<script lang="ts" setup>
import {
  ref,
  reactive,
  onBeforeMount, // 在组件挂载之前执行的函数
  onMounted,
  onBeforeUpdate, // 在组件修改之前执行的函数
  onUpdated,
  onBeforeUnmount, // 在组件卸载之前执行的函数
  onUnmounted
} from 'vue'

// setup 替代了 beforeCreate   setup

// reactive 创建响应式对象
let data = reactive({
  // 定义响应式数据
  count: 0
})

const clickMe = () => {
  data.count++
  alert('hi')
}

console.log('1-开始创建组件-----setup()')

onBeforeMount(() => {
  console.log('2-组件挂载到页面之前执行-----onBeforeMount()')
})

onMounted(() => {
  console.log('3-组件挂载到页面之后执行-----onMounted()')
})
onBeforeUpdate(() => {
  console.log('4-组件更新之前-----onBeforeUpdate()')
})

onUpdated(() => {
  console.log('5-组件更新之后-----onUpdated()')
})

onBeforeUnmount(() => {
  console.log('6-组件卸载之前-----onBeforeUnmount()')
})
onUnmounted(() => {
  console.log('7-组件卸载之后-----onUnmounted()')
})
</script>

<template>
  <div class="container">
    <p>数字为{{ data.count }}</p>
    <button @click="clickMe">修改数据</button>
  </div>
</template>

<style lang="scss" scoped>
.container {
}
</style>

vue3-生命周期,vue3,javascript,vue.js,前端,vue

vue3-生命周期,vue3,javascript,vue.js,前端,vue

VUE3 与 VUE2 生命周期的对比

setup 方式

  vue2            vue3
  
beforeCreate  -> setup()
created       -> setup()
beforeMount   -> onBeforeMount
mounted       -> onMounted
beforeUpdate  -> onBeforeUpdate
updated       -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed     -> onUnmounted
activated     -> onActivated
deactivated   -> onDeactivated
errorCaptured -> onErrorCaptured

通过这样对比,

  1. 可以很容易的看出 vue3 的钩子函数基本是再 vue2 的基础上加了一个 on,但也有两个钩子函数发生了变化。

  2. BeforeDestroy 变成了 onBeforeUnmount

  3. destroyed 变成了 onUnmounted

尤大的介绍是 mount 比 Destroy 更形象,也和 beforeMount 相对应。

onServerPrefetch() (ssr) 在组件实例在服务器上被渲染之前调用文章来源地址https://www.toymoban.com/news/detail-823060.html

到了这里,关于vue3-生命周期的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3全家桶 - Vue3 - 【7】生命周期

    Vue3官网-生命周期钩子函数; 每个Vue组件实例在创建时都需要经历一系列的初始化步骤,比如数据侦听、编译模板、挂载实例到 DOM ,以及在数据改变时更新 DOM 。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。最常见的是

    2024年03月13日
    浏览(56)
  • vue3-生命周期钩子函数

    声明周期函数onMounted ,onUnmounted,onUpdated onMounted:页面渲染之前执行,执行完,页面就出来了 onUnmounted:组件注销之前执行,执行完组件就不在页面显示了。如果隐藏组件就行执行。 onUpdated:当组件内的内容发生变化时,就会执行这个更新钩子函数,比如删除数组中的某个元素

    2024年02月11日
    浏览(42)
  • 【Vue3】学习笔记-生命周期

    Vue3.0中可以继续使用Vue2.x中的生命周期钩子,但有有两个被更名: beforeDestroy 改名为 beforeUnmount destroyed 改名为 unmounted Vue3.0也提供了 Composition API 形式的生命周期钩子,与Vue2.x中钩子对应关系如下: beforeCreate === setup() created ======= setup() beforeMount === onBeforeMount mounted ======= onMo

    2024年02月11日
    浏览(41)
  • Vue.js 生命周期详解

    Vue.js 是一款流行的 JavaScript 框架,它采用了组件化的开发方式,使得前端开发更加简单和高效。在 Vue.js 的开发过程中,了解和理解 Vue 的生命周期非常重要。本文将详细介绍 Vue 生命周期的四个阶段:创建、挂载、更新和销毁。 在创建阶段,Vue 实例被创建并初始化。这个阶

    2024年02月13日
    浏览(40)
  • Vue3通透教程【七】生命周期函数

    专栏介绍: 凉哥作为 Vue 的忠实 粉丝输出过大量的 Vue 文章,应粉丝要求开始更新 Vue3 的相关技术文章,Vue 框架目前的地位大家应该都晓得,所谓三大框架使用人数最多,公司选型最多的框架,凉哥之前在文章中也提到过就是 Vue 框架之所以火起来的原因,和 Vue 框架相比其

    2024年02月02日
    浏览(41)
  • 前端学习--Vue(4) 生命周期

    一个组件从创建-运行-销毁的真个阶段,强调的是一个时间段  1.1.1 创建 (只执行一次) created() 阶段任务:最早可以使用methods中的方法发起ajax请求获取数据,并将数据挂载到data中 mounted() 阶段任务:最早可以操作dom元素 1.1.2 运行 (最少0次,最多n次) beforeUpdate() 触发时机:

    2024年02月07日
    浏览(40)
  • Vue3 第三节 计算属性,监视属性,生命周期

    1.computed计算属性 2.watch监视函数 3.watchEffect函数 4.Vue的生命周期函数 计算属性简写和完整写法 2.1 监视情况分类  情况① 监视ref定义的响应式数据: 第一个参数是监视的数据,第二个参数是一个回调函数 immediate:一上来就执行,放到第三个参数中 情况② 监视多个ref定义的响应

    2024年02月14日
    浏览(46)
  • Vue2和Vue3生命周期映射关系及异同

    beforeCreate - 使用 setup() created - 使用 use setup() beforeMount -onBeforeMount mounted - onMounted beforeUpdate - onBeforeUpdate updated - onUpdated beforeDestroy- onBeforeUnmount destroyed -onUnmounted activated - onActivated deactivated - onDeactivated errorCaptured - onErrorCaptured beforeCreate - 使用 setup() 函数替代 Vue 2 中的 beforeCrea

    2024年01月24日
    浏览(42)
  • Vue.js生命周期及其应用示例

    Vue.js是一种流行的前端JavaScript框架,可以让开发人员轻松构建动态用户界面。Vue.js的一个关键特性是其生命周期系统,它允许开发人员在组件的不同阶段执行代码。在本文中,我们将探讨Vue.js生命周期的不同阶段以及如何在这些阶段执行代码,并举例说明。 Vue.js生命周期分

    2024年02月08日
    浏览(40)
  • 【Vue3】2-11 : 生命周期钩子函数及原理分析

    一、组件生命周期概述 1.1 官方生命周期 1.2 钩子函数(回调函数) ▶  生命周期可划分为三个部分(- 表示执行循序): 二、实战:测试生命周期流程 >  代码  >  效果 每个组件在被创建时都要经过一系列的初始化过程 ——例如, 设置数据监听 编译模板 将实例挂载到

    2024年01月21日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包