vue3中的生命周期

已于 2023-08-04 19:28:24 修改
阅读量234 收藏 2
点赞数 2
分类专栏： vue3 文章标签： 前端 vue.js javascript
于 2023-07-17 08:16:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_60150712/article/details/131758354
版权

一、什么是生命周期函数

组件从创建到销毁的整个过程，不同阶段执行不同的函数

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

二、vue2生命周期和vue3生命周期的区别

在这里插入图片描述三、生命周期函数分为几种，分别有什么用？


1. beforeCreate


beforeCreate 选项式声明周期函数
在组件实例初始化之前调用（props 解析已解析、data 和 computed 等选项还未处理）
不能访问组件的实例 this 及其组件中的数据源和函数等
不能访问组件中的视图 DOM 元素
组合式 API 中的 setup() 钩子会在所有选项式 API 钩子之前调用


2. created


created 选项式生命周期函数
在组件实例化成功后调用
可访问组件的实例 this 及其组件中的数据源和函数等
不能访问组件中的视图 DOM 元素

最低0.47元/天 解锁文章
伊໌້ᮨ人໌້ᮨ
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue3生命周期
m0_67388537的博客
07-24 5671
每个 Vue 实例在被创建时都要经过一系列的初始化过程。例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。我们称这一系列的过程就是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。
十、VUE3生命周期
D_A_I_H_A_O的博客
05-28 329
中的顶层的导入、声明的变量和函数可在同一组件的模板中直接使用。你可以理解为模板是在同一作用域内声明的一个 JavaScript 函数——它自然可以访问与它一起声明的所有内容。我们可以使用响应式 API 来声明响应式的状态，在 setup() 函数中返回的对象会暴露给模板和组件实例。在 setup() 函数中手动暴露大量的状态和方法非常繁琐。幸运的是，我们可以通过使用单文件组件 (SFC) 来避免这种情况。
vue3之生命周期
小李在努力学习
03-24 2753
生命周期
【vue3系列】vue3之生命周期(带图)
热门推荐
qq_42445025的博客
12-16 5万+
Vue3之生命周期 主要Vue生命周期事件被分为两个钩子，分别在事件之前和之后调用，vue应用程序中有4个主要事件(8个钩子)： 创建 ---- 在组建创建时执行 挂载 ---- DOM被挂载时执行 更新 ---- 当响应数据被修改时执行 销毁 ---- 在元素被销毁之前立即执行 在【options API】中，生命周期钩子是被暴露在vue实例上的选项，我们只需要调用使用即可。 在【composition API】中，我们需要将生命周期钩子导入项目，然后才能使用。 import {onMounted
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue3+ts (源码+笔记+生命周期截图)
02-14
7. ** 生命周期钩子的改变**：Vue3 中生命周期钩子发生了变化，如 `beforeCreate` 和 `created` 合并为 `onBeforeMount`，`beforeDestroy` 和 `destroyed` 合并为 `onBeforeUnmount` 等。此外，还新增了一些生命周期...
浅析Vue 生命周期
08-27
Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue 实例时，会读取所有的...
解决Vue中的生命周期beforeDestory不触发的问题
10-15
主要介绍了解决Vue中的生命周期beforeDestory不触发的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
vue3 第三幕之【生命周期函数】(挂载篇+更新篇+卸载篇)
XSL_HR的博客
09-22 4659
关于vue3生命周期挂载 更新 卸载过程的详细分析总结
vue3 生命周期
qq_39773416的博客
03-04 4777
1、理解生命周期：首先new vue() 初始化事件还有生命周期，初始化完后就到 beforeCreate ，就初始化注入，响应式，data就是这里注册完了，create 执行，看有没有el属性，看下vue 的option里面有没有传template，如果有模板的话，编译模板，用render函数，没有就去取outHtml作为模板。 ...
vue3生命周期函数
m0_52622108的博客
08-17 484
Composition API也称为组合式API，实现代码的共享以及重用Vue3.2 中 只需要在 script 标签上加上 setup 属性，组件在编译的过程中代码运行的上下文是在 setup() 函数中，无需return，template可直接使用你可以通过在生命周期添加“on”的前缀来访问一个组件的生命周期钩子。选项 APIsetup内部的钩子不需要created不需要mountedonMountedupdatedonUpdatedunmounted。
Vue3中使用生命周期函数
林中明月间丶
03-30 4826
https://zhuanlan.zhihu.com/p/136417498 什么是Composition API 如果你还不知道，Vue3 Composition API 附带了一个setup()方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。 简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。 在旧的beforeCreate钩子函数之后和created的钩子函数...
Vue3-04-生命周期
晴雪月乔的博客
06-12 7821
Vue 生命周期
分析Vue3生命周期
Zy000428的博客
01-24 1627
在Vue中，生命周期是组件从创建到销毁的整个过程中的不同阶段。Vue组件的生命周期主要由一系列的钩子函数（hook functions）组成。以下是Vue组件生命周期的主要阶段：1. 创建阶段：- beforeCreate：在实例被创建之前调用，此时组件的响应式属性和事件还未初始化。- created：在实例创建完成后调用，此时组件的数据已经初始化完成，但DOM还未生成，可以进行一些初始化操作。2. 挂载阶段：- beforeMount：在组件挂载到DOM之前调用，此时DOM元素尚未生成。
学习vue3系列生命周期
前端精髓
08-08 3万+
之前已经介绍了 vue3 的相关知识点：ref，reactive，computed，watch，watchEffect，toRef，toRefs 这些响应式的API，相信大家对 vue3 已经有一定的理解了。 生命周期 除了这些函数 vue3 还增加了些生命周期，可以直接导入 onXXX 一族的函数来注册生命周期钩子：与 2.x 版本生命周期相对应的组合式 API。 1、beforeCreate -> 使用 setup() 2、created -> 使用 setup() 3、beforeMou.
Vue3 生命周期
小菜的博客
02-01 1577
beforeCreate 是在设置组件实例之前调用的 > 而组件实例就是存储着组件运行过程中的所有信息, 如 生命周期, 是否挂载, 状态(data) , props Created 是在设置完组件实例之后调用 BeforeMount 是在第一次挂载组件内部的 patch 函数(将 vdom 渲染到页面) 之前调用的 mounted 是在 patch 之后调用 他会将注册的函数放到一个微任务队列中, 等到所有 vnode 全面渲染完成, 然后刷新那个微任务队列
vue3中生命周期示例代码
最新发布
06-03
Vue 3的生命周期函数与Vue 2的生命周期函数相比有所不同，主要是将一些生命周期函数进行了重构和合并。以下是Vue 3中生命周期的示例代码： ``` <template> <div>{{ message }}</div> </template> <script> import { onMounted, onUpdated, onUnmounted } from 'vue' export default { data() { return { message: 'Hello, world!' } }, mounted() { console.log('mounted') }, updated() { console.log('updated') }, beforeUnmount() { console.log('beforeUnmount') }, methods: { updateMessage() { this.message = 'Hello, Vue 3!' } }, // Vue 3引入了新的生命周期函数 setup() { onMounted(() => { console.log('onMounted') }) onUpdated(() => { console.log('onUpdated') }) onUnmounted(() => { console.log('onUnmounted') }) return {} } } </script> ``` 上面的代码演示了Vue 3中生命周期函数的使用方式。其中，`mounted()`、`updated()`和`beforeUnmount()`函数与Vue 2中的生命周期函数相同，分别在组件挂载、更新和卸载时触发。而`setup()`函数是Vue 3新增的生命周期函数，用于组件的初始化工作，其中可以使用`onMounted()`、`onUpdated()`和`onUnmounted()`等函数来监听组件的挂载、更新和卸载等生命周期事件。需要注意的是，在Vue 3中，`setup()`函数必须返回一个对象或者`null`，而不能返回数据对象。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值