vue1、2生命周期对比

最新推荐文章于 2023-12-24 15:00:18 发布
最新推荐文章于 2023-12-24 15:00:18 发布
阅读量236 收藏
点赞数
分类专栏： vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qi_haoran123/article/details/95063898
版权

vue1.0+  

vue2.0

描述

init

beforeCreate

组件实例刚被创建,组件属性计算之前,例如:data

created

created

组件实例创建完成,属性已经绑定,但是DOM还未生成,$el属性还未存在

beforeComplie

beforeMount

模板编译/挂载之前

compiled

mounted

模板编译/挂载之后

ready

mounted

模板编译/挂载之后

-------

beforeUpdate

组件更新之前

-------

update

组件更新之后

-------

activated

for keep-alive,组件被激活时调用

-------

deactivated

for keep-alive,组件被移除时调用

attached

--------------

detached

--------------

beforeDestory

beforeDestory

组件销毁前调用

destoryed

destoryed

组件销毁后调用

 

qi_haoran123
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue2 与 Vue3 生命周期对比
青山不改，绿水长流。
09-22 3287
内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。这个钩子函数获取的数据是更新后的数据，生成新的虚拟dom，跟上一次的虚拟dom结构进行比较，比较出来差异（diff算法）后再渲染真实dom，当数据引发dom重新渲染的时候，在updated钩子函数里面就可以获取最新的真实dom了。vue 实例的 $el 和 data 都已初始化，dom节点马上要被渲染出来了，但是还没有真正的渲染出来,挂载之前为虚拟的 dom节点，模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中。
Vue 01 - Vue 的生命周期
weixin_57519357的博客
09-16 299
Vue生命周期基础知识
vue1.0和vue2.0生命周期----整理一
weixin_30868855的博客
08-22 72
## 1. 作用域区别 　　1.x 随意的定义作用域 　　2.x 不允许body 或者html 元素 ## 2. 生命周期 　　1.x: 　　　　created 实例已经创建 　　　　beforeCompile 在编译之前 　　　　compiled 编译之后 　　　　ready 实例已经插入到文档之中 　　　　beforeDetroy 在销毁之前 　　　　destroyed 销毁之后...
Vue2 与 Vue3生命周期对比
m0_48942526的博客
05-17 189
Vue2 与 Vue3生命周期对比 1. Vue2.x 2. vu3.x 3. 与 2.x 版本生命周期相对应的组合式 API beforeCreate -> 使用 setup() created -> 使用 setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy ->
Vue2和Vue3生命周期的对比
elevenhope的博客
02-07 2108
一、Vue生命周期 vue实例从创建到销毁的过程，具体来说就是vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染数据、更新数据、最后销毁这样的一个过程。 二、生命周期对比 Vue2生命周期 Vue3生命周期 beforeCreate setup() created setup() beforeMount onBeforeMount mounted onMounted beforeUpdate onBeforeUpdate updated onUpdated
vue生命周期和react生命周期对比【推荐】
10-18
本文通过实例代码给大家介绍了vue生命周期和react生命周期对比 ,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
mimall:基于Vue2.x的移动端小米商城
05-17
项目中运用了大部分vue常用的知识点，如vue基本指令、组件、计算属性、数据渲染、生命周期钩子、slot插槽等等，并附有大量注释，对于初学vue想通过实际项目进阶的小伙伴们也会有一定帮助。 如果项目对你有帮助的话...
vue面试题1.pdf
10-21
Vue 中常用的生命周期钩子函数 1. created：实例已经创建完成之后调用。 2. mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 3. activated：keep-alive 组件激活时调用。 十. Vuex 的原理...
经典vue面试题及答案
06-11
1. 理解Vue的基本概念和用法：在面试前要充分理解Vue的基本概念和用法，包括Vue组件、生命周期、指令、路由等。同时还要熟悉Vue的常用API和工具，例如Vue CLI、Vue Router、Vuex等。 2. 实践经验很重要：在面试中，...
VUE基础（1）：VUE的生命周期
imagine_tion的博客
12-01 311
一、
vue2和vue3生命四种周期函数的比较（详细讲解）
最新发布
2301_78646673的博客
12-24 550
vue组件实例在创建时要经历一系列的初始化步骤，在这个过程中vue会在合适的时刻，调用特定的函数，从而让开发者有机会在特定的阶段运行自己的代码，这些特定的函数称为：生命周期函数生命周期整体分为四个阶段，分别是：创建、挂载、更新、销毁。每个阶段都有两个钩子，一前一后。vue3中“创建”只有一个函数了，并且要用到的生命周期函数都要自己先进行引入才能使用。常用的生命周期函数也就：onMounted(挂载完毕)onUpdated(更新完毕)onBeforeUnmount(卸载完毕)
vue1.0与2.0区别之生命周期
Tank_in_the_street的博客
06-08 3703
vue1.0和vue2.0之间的区别
前端学习笔记（9）-Vue2和 Vue3生命周期区别
JiangZhengyang7的博客
11-23 2576
1.vue2常用生命周期： 2.Vue3中生命周期函数的修改 3.父子组件生命周期测试 3.1 初始化渲染 3.2 更新
最新 Vue 生命周期 V2.0 VS V3.0 对比总结
猫头虎：授渔优于赠鱼，兴趣引领智慧，探索之乐尤显珍贵。商务合作：Libin9iOak，共赴知识与乐趣的探索之旅！
07-02 2559
V2: 代码演示: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue系列</title> </head> <body> <div id="app"> <h1 id="h1">{{msg}}</h1> <input type="text" v.
vue 1.0生命周期
wlm_suzhou的博客
07-10 1356
vue 1.0生命周期 钩子函数 created beforeCompile Compiled ready beforeDestory destroyed created 在创建之前，首先初始化vue实例，监测data，初始化事件，然后进入created生命周期。created之后，判断是否包含el，如果包含，则判断是否包含template，否则装载el元素，判断是...
Vue的生命周期
ZZY1078689276的专栏
10-31 1053
文章目录initcreatedbeforeCompilecompiledactivatereadyattacheddetachedbeforeDestroydestroyed示例源码html源码：get.json运行结果分析   在1.0版本中，Vue的生命周期一共有九个步骤，分别是：init、created、beforeCompile、compiled、activate、ready、attach...
vue生命周期总结（个人理解）
binquan_liang的博客
09-19 310
附上官网生命周期图： beforeCreate：开始创建阶段，这个阶段主要做的事是，初始化Vue实例，此时组件的对象还未创建，el 和 data 并未初始化，因此无法访问methods， data等上的方法和数据。 created：Vue实例创建之后调用，数据观察，属性和方法的运算，完成了data的初始化，但el还没有初始化，挂载阶段还没有开始，可以正常调用methods方法，这个时候可以进行一些获取数据的请求。 beforeMount：挂载之前被调用，此时，render函数首次调用（虚拟DOM的
vue（1）— 简单介绍&生命周期
weixin_30786657的博客
07-30 116
目前，前端可以说是三分天下的时代，是前端发展史一个辉煌的时代，三大主流框架Vue，Angular，React三分天下。此文主要介绍Vue框架。 Vue 一套用于构建用户界面的渐进式框架，采用MVVM开发模式，实现数据双向绑定，虚拟DOM提高性能。 1、渐进式怎么理解？ vue是自底向上逐层应用：声明式渲染—组件系统—客户端路由—大数据状态管理—构建工具； 2、MVVM数据双向绑定？ M—...
1.vue生命周期详解(2020.12.05)
weixin_43795084的博客
12-05 232
vue生命周期，直接上官方图 要明确生命周期，我们必须从钩子下手，beforeCreate，created，beforeMount,mounted,beforeDestroy,destroyed。
vue3和vue2的生命周期对比
08-23
Vue 3 和 Vue 2 的生命周期有一些变化和优化。下面是它们的对比： 1. 创建阶段： - Vue 2：beforeCreate -> created - Vue 3：beforeCreate -> onBeforeMount -> created -> onMounted 2. 更新阶段： - Vue 2：beforeUpdate -> updated - Vue 3：beforeUpdate -> onBeforeUpdate -> updated -> onUpdated 3. 销毁阶段： - Vue 2：beforeDestroy -> destroyed - Vue 3：onBeforeUnmount -> beforeUnmount -> onUnmounted 4. 新增的阶段： - Vue 3 引入了两个新的生命周期钩子函数： - onBeforeMount: 在挂载之前调用，类似于 Vue 2 的 beforeMount。 - onBeforeUpdate: 在更新之前调用，类似于 Vue 2 的 beforeUpdate。 5. 移除的阶段： - Vue 3 移除了 beforeMount 和 beforeUpdate 这两个生命周期钩子函数，将它们替换为了新增的钩子函数。 总体上，Vue 3 的生命周期相对于 Vue 2 更加细致和灵活，提供了更多的钩子函数来处理不同的场景。这些变化使得开发者能够更好地控制组件的生命周期，提高了代码的可读性和可维护性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值