Vue父子组件及mixins生命周期执行顺序

最新推荐文章于 2024-03-08 13:19:26 发布
原创 最新推荐文章于 2024-03-08 13:19:26 发布 · 4.2k 阅读 · 9 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #前端

本文详细解析Vue.js的生命周期，包括创建、挂载、更新、销毁等各个阶段的特点与执行顺序，并介绍特殊钩子函数activated与deactivated的应用场景。

图为Vue生命周期 

生命周期分别为 

1. 创建前后: 在beforeCreated阶段，vue实例的挂载元素$el和数据对象Data都为undefined，还未初始化。created阶段，vue实例的数据对象data有了,el还没有

2. 挂载前后: 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲染。

3. 更新前后: 当data变化时，会触发beforeUpdate和updated方法。

4. 销毁前后: 在执行destroy方法后，对data的改变不会再触发周期函数，说明此时vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

5. activated: keep-alive组件激活时调用

6. deactivated: keep-alive组件销毁时调用

7. errorCaptured: 当捕获一个来自子孙组件的错误时被调用

父子组件及mixins生命周期执行顺序为

mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted >父mounted
Vue2：通过inject在子组件中使用父组件通过mixin引入的公用方法
l_q_l的专栏
02-07 338
在Vue 2中，mixins和inject都是用于实现组件间代码复用的机制，但它们的使用场景和方式有所不同。
解释 Vue 的混入（Mixins）是什么？
最新发布
qq_38822390的博客
03-04 622
Vue 的混入（Mixins）是一种强大的功能，可以帮助开发者在多个组件之间共享逻辑和功能。通过合并选项，混入使得代码更具可复用性和组织性。
vue中mixin使用和事件执行顺序
weixin_53474595的博客
12-05 1972
混入 (mixins)：mixins就是组件的变量、方法抽离。方便在多个组件引用同样的方法（注意： 多个组件的mixin变量不会相互污染影响，每个引用都是独立的）vue页面： mixin页面： 事件钩子中，mixin优先组件执行1.不同名方法 - 正常调用2.mixin和组件 方法名同名：- mixin方法不执行被覆盖，组件方法正常执行 和普通组件的变量一样使用。 注意： 多组件引用同一个mixin，不会相互污染改变变量
vue.js中生命周期的理解
wuwangchuxin_123456的博客
05-28 472
生命是生命周期呢？ 当前组件在创建到销毁经历的一系列过程，称之为生命周期 2. 生命周期的分为几个阶段？每个阶段有哪些钩子函数 生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁 初始化阶段：有4个钩子函数 ， 触发条件是自动的 beforeCreate 1. 组件即将创建，进行组件事件和生命周期的初始化 2. 项目中一般不使用（ 兵哥 ） 3. 有的开发者也会在这里进行数...
vue 的 mixin的使用和执行顺序
H_shaohui的博客
03-13 3776
在Vue中，mixin中的属性和方法都会被合并到组件中，但是不同类型的属性和方法会被合并到不同的结构中：datacomputedmethodswatchpropsprovide和inject以上属性和方法会被合并成一个新对象，如果出现相同的属性，组件中的属性会覆盖mixin中的属性。beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedactivateddeactivatedbeforeDestroydestroyed以上属性和方法会被合并成一个数组
vue中mixins的属性/方法/生命周期函数的优先级
yuanwen52的博客
05-12 4295
1、对于data定义属性，组件中定义属性覆盖mixins中同名字段 2、对于created、mounted等生命周期函数，mixins中中生命周期函数先执行（执行顺序按mixins中顺序），再执行组件中生命周期函数 3、对于methods中的同名方法，组件内的方法覆盖mixins中的方法 注：对于相同的computed属性，组件的computed属性覆盖mixins内的computed属性， 而对于相同的watch监听，mixins中的watch监听先执行。 ...
Vue生命周期以及父子组件生命周期函数的执行顺序
weixin_46389390的博客
04-20 3203
Vue的八个生命周期函数 beforecreate（创造前）在这一阶段开始处理组价实例的data，计算属性，方法，watch监听属性等配置。 created（创造后）这一阶段实例的计算属性，方法，watch监听属性等已经配置完成，但是组件还没有被挂载。 beforeMount（挂载前）组件开始挂载到页面上。 mouted（挂载后）组件挂载已经完成，可以在此进行ajax请求，浏览器中已经含有组件的dom结构，这也是最早可以操作dom的阶段。 beforeUpdate（更新前）当组件中进行数据更新时触发，此时
mixins与vue生命周期函数的执行顺序
09-07
mixins与vue生命周期函数的执行顺序如下： 1. mixin的beforeCreate 2. 父beforeCreate 3. mixin的created 4. 父created 5. mixin的beforeMount 6. 父beforeMount 7. 子beforeCreate 8. 子created 9. 子beforeMount ...
四个阶段 八个钩子函数 父子组件中的先后顺序 激活失活 10个钩子函数
qq_43944285的博客
05-09 572
什么是组件生命周期 一个组件从 创建 到 销毁 的整个过程就是生命周期 生命周期函数(钩子函数) 四个阶段 (一个阶段两个钩子函数) 八个钩子 vue 框架内置函数，随着组件的生命周期，自动 按次序 执行 **作用：**特定的时间点，执行某些特定的操作 场景: 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 生命周期函数(钩子函数) 四个阶段: ● 初始化 => 创建组件 => beforeCreate cr
VUE面试题目VUE基础
03-13
在面试中，了解Vue的基础知识是至关重要的，包括但不限于Vue实例的生命周期、计算属性与方法、指令系统、组件通信、路由、mixins以及过渡效果。 1. **Vue.js框架特点和优势**： - 响应式数据绑定：Vue通过Object....
mixin和组件生命周期
qq_42928070的博客
07-06 970
总结： mixin生命周期总在组件生命周期之前执行 mixin的beforeCreate > 父beforeCreate > mixin的created > 父created > mixin的beforeMount > 父beforeMount > 子beforeCreate > 子created > 子beforeMount > 子mounted > mixin的mounted > 父mounted ...
Vue生命周期
cmy741741的博客
08-20 381
Vue实例的生命周期全过程（图） 1.在beforeCreate和created钩子函数间的生命周期 在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，同时初始化事件 2.created钩子函数和beforeMount间的生命周期 首先系统会判断对象中有没有el选项 有el选项，则继续编译过程 没有...
vue得父子组件和mixins生命周期顺序
眼睛微微笑的博客
01-24 1473
代码仓: https://github.com/cc147151/filterTest 顺序如图所示： 销毁顺序：
vue minxin实现、生命周期合并策略
weixin_43294560的博客
12-20 1585
定义全局 Mixin 函数 // src/global-api/mixin.js import {mergeOptions} from '../util/index' //初始化mixin方法,即往Vue上挂载minxin方法,核心是mergeOptions export default function initMixin(Vue){ Vue.mixin = function (mixin) { // 合并对象 this.options=mergeOptions(this
vue mixin混入，生命周期执行阶段简易实现
青阳的博客
09-28 1373
vue源码实现，vue.mixin
vue mixins混入优先级 局部全局混入
weixin_45441173的博客
06-16 2099
vue mixins混入优先级 局部全局混入
Vue.js学习（四）：父子组件中的生命周期与钩子函数的调用顺序
热门推荐
michael8512的博客
01-11 1万+
借用下面这张图先简单了解Vue的整个生命周期 increase {{msg}} destroy 一、创建与挂载（created  and mounted） 当一个父组件中加载一个子组件，且父组件和子组件中同时调用mixin函数时，整个生命周期的顺序为： 1、创建父组件 beforeCreate：父组件中的mixins--父组件
一文教你搞懂Vue生命周期
会写bug的小邓程序员的博客
03-08 4286
vue2生命周期，beforeCreate,created,beforeMounted,mounted,beforeUpdate,update,beforeActived,actived,beforeDestory,destoryed,errorCaptured,watch,computed,props,provide,inject。面试常问问题
vue中的mixins生命周期比组件中的快！
逍遥的码农的博客
05-11 1450
vue中mixins mixins.js // mixins.js export default { data () { return { name: 'mixins', minixName: 'mixinsObj', flag: false } }, mounted() { console.log('mixinsMounted'); }, meth
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

萨科学习之路

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值