vue2和vue3 的生命周期

于 2024-05-18 11:34:07 发布
阅读量145 收藏 4
点赞数 9
文章标签： 前端 javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73919677/article/details/139021605
版权

vue2生命周期：

        分为四个阶段：

                初始化前：beforeCreate,表示实例完成创建出来之前，执行的时候data和methods还没有初始化

                初始化后：Created，表示实例被创建出来了，用来调用页面初始化接口

                挂载前：beforeMount，表示模版已经在内存中编译完成了，但还没有把模版渲染到页面中

                挂载后：Mounted，表示内存中的模版已经真实的挂载到了页面上

                更新前：beforeUpdate，数据被修改了

                更新后：Update，data和页面完成同步

                销毁前：beforeDestrory，还没有开始执行销毁过程

                销毁后：Destrory，完成销毁

vue3生命周期

               v3将beforeCreate和Created进行了省略换成了setup。同时v3的生命周期需要在入口函数中使用，并且是箭头函数的形式，使用前必须进行导入操作。

setUp，开始创建组件，

onBeforeMount,挂载前执行

onMounted，挂载后执行

onBeforeUpdate,更新前执行

onUpdated，更新后执行

onBeforeUnmount,卸载之前执行

onUnmounted,卸载之后执行

龙倾京
关注
  • 9
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 的生命周期
无知小九的博客
08-04 256
5）beforeUpdate 钩子函数，在响应式数据更新时触发，发生在虚拟 DOM 重新渲染和打补丁之前，这个时候我们可以对可能会被移除的元素做一些操作，比如移除事件监听器。（8）destroyed 钩子函数，在实例销毁之后调用，调用后，Vue 实例中的所有东西都会解除绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。Vue 一共有8个生命阶段，分别是创建前、创建后、加载前、加载后、更新前、更新后、销毁前和销毁后，每个阶段对应了一个生命周期的钩子函数。钩子函数，在组件被挂载到页面之前触发。...
Vue2生命周期图解（详细）
03-31
Vue2生命周期图解（详细）
Vue学习笔记3.2-生命周期函数 beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destro
热门推荐
@凌晨三点半的博客
01-02 1万+
Vue生命周期函数有beforeCreate、created、beforeMount、Mounted、beforeUpdate、updated、beforeDestroy、destroyed、activated、deactivated、errorCaptured。共11个。本文直说前8个，另外3个以后再说   首先要说明下 什么是生命周期函数： 生命周期函数就是指在某一个特定时间节点会自...
Vue组件间的通信方式浅析
astonishqft的博客
09-29 516
在Vue组件库开发过程中，Vue组件之间的通信一直是一个重要的话题，虽然官方推出的Vuex状态管理方案可以很好的解决组件之间的通信问题，但是在组件库内部使用Vuex往往会比较重，本文将系统的罗列出几种不使用Vuex，比较实用的组件间的通信方式，供大家参考。
vue基本知识—3.生命周期
贝贝小菜鸟的博客
02-10 153
每个Vue实例在被创建时都要经过一系列的初始化过程，例如:需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时，更新DOM等，这些都称为Vue实例的生命周期。 3.1使用生命周期钩子 在VUE实例的生命周期过程中会运行一些叫做生命周期的钩子函数，这给用户在不同阶段添加自己代码的机会 <template> <div id="app"> <p v-if="courses.length==0">没有任何课程信息</p> <ul&gt
vue3.x篇二：生命周期
杨阳洋的博客
12-17 183
vue3.0的生命周期 <template> <div>生命周期</div> <button @click="update">版本号{{version}}</button> </template> <script> //按需引入 import {ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted
vue3生命周期--钩子函数图解（中文版）.svg
11-02
vue3生命周期--钩子函数图解（中文版）
vue生命周期和react生命周期对比【推荐】
10-18
对于Vue和React的生命周期对比，我们可以发现Vue提供了更多的生命周期钩子，使开发者可以更细致地控制组件的创建、挂载、更新和销毁过程。而React虽然钩子函数相对较少，但使用新的函数式组件和Hooks API可以实现...
vue3-demo2.rar
最新发布
02-05
`setup`是Vue3组件的新入口点，它在生命周期钩子之前运行，并可以访问到`props`和`this`的上下文。在这里，你可以初始化状态、监听器和计算属性，使用Composition API来组织代码。 4. **Suspense 组件**： Vue3...
Vue2 D3.js demo
03-03
5. **生命周期钩子**：Vue2的生命周期钩子函数（如`mounted`、`updated`）可以用来在特定时刻执行D3.js的绘图逻辑，确保图表在正确的时间生成或更新。 6. **整合D3.js与Vue2**：将D3.js的图表生成逻辑放入Vue组件中...
【笔记】vue3.2 生命周期钩子的使用
咫尺天涯的专栏
12-26 1302
在vue3.2的文档中，似乎没有对生命周期钩子使用的特别介绍，其实，我们本着没有特别介绍就跟以前一样的态度，在vue3.x中怎么用，在vue3.2中一样是那么用。 那就上例子？ <script setup> import { onMounted, onUnmounted } from 'vue' onMounted(() => { // do something }) onUnmounted(() => { // do something }) </script.
vue3.2
kun2645386952的博客
03-07 420
vue3.2随笔
vue3和vue2生命周期​
myStyle的博客
10-12 1609
在vue对象存活的情况下，进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等。
Vue生命周期函数
llf_cloud的博客
07-14 423
简介 生命周期函数代表的是Vue实例，或者是Vue组件，在网页中各个生命阶段所执行的函数。生命周期函数可以分为创建阶段和运行期间以及销毁期间。其中创建期间的函数有beforeCreate、created、beforeMount、mounted；运行期间的函数有beforeUpdate、updated；销毁期间有beforeDestroy、destroyed。以下是官方文档给到的一张图，从这种图中我们可以了解到每个部分执行的函数。 一、创建期间： 1.1 beforeCreate： Vue或者组件刚刚实例化
vue3、vue2 生命周期
weixin_45397766的博客
03-25 936
父组件 <template> <h2>APP</h2> <button @click="isShow = !isShow">切换</button> <hr> <Child v-if="isShow"/> </template> <script lang="ts"> import { defineComponent, ref, reactive } from 'vue' im
Vue系列之vue生命周期详解
老__L的博客
02-17 2660
Vue 实例从创建到销毁的过程，就是生命周期。也就是说从开始创建、初始化数据、编译模板、挂载DOM→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。
Vue---Vue2/Vue3生命周期总结
COCOLI_BK的博客
06-24 872
Vue2/Vue3生命周期总结！！！
Vue3.2核心知识
m0_70005958的博客
11-06 125
3.setup中不可以使用this来访问组件实例，setup 的调用发生在 data property、computed property 或 methods 被解析之前。2.setup是处于生命周期函数 beforeCreate 和 Created 两个钩子函数之前执行。4.我们可以借助getCurrentInstance 在setup中获取组件实例，等同于this。1.在我们使用setup时，一定首先要记住setup是一个生命周期。
Vue3 中生命周期的使用
weixin_62897746的博客
02-21 6741
组件从创建到销毁的整个过程，不同阶段执行不同的函数 每个 `Vue` 组件实例在创建时都需要经历一系列的初始化步骤，比如数据侦听，编译模板，挂载实例到 `DOM`，以及在数据改变时更新 `DOM`。在此过程中，它也会运行被称为生命周期钩子的函数，让开发者有机会在特定阶段运行自己的代码。最常用的是`created`、`mounted`、`updated` 和 `unmounted`。
vue2和vue3生命周期
08-25
Vue2和Vue3的生命周期有一些区别。 在Vue2中，常用的生命周期钩子函数有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed。这些钩子函数允许在组件的不同生命周期...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值