Vue组件生命周期函数

最新推荐文章于 2022-11-20 21:26:21 发布
最新推荐文章于 2022-11-20 21:26:21 发布
阅读量214 收藏
点赞数
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_15764487/article/details/80487285
版权
<!DOCTYPE html>
< html lang = "en" >

< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta http-equiv = "X-UA-Compatible" content = "ie=edge" >
< title >Document</ title >
< script src = "./vue2.js" > < / script >
</ head >

< body >
< div id = "app" >
< p >{{info}}</ p >
< button @ click = "info='hello1'" >更新info</ button >
< button @ click = "destroy" >销毁实例</ button >
</ div >
< script >
var myVm = new Vue ({
el: "#app" ,
data: {
info: "hello"
},
// 在实例初始化之后，数据观测 (data observer) 和 event/watcher 配置之前被调用。
beforeCreate : function () {
console . log ( "===============beforeCreate============================================" )
// $el表示Vue 实例使用的根 DOM 元素。
console . log ( '$el' , this .$el);
// $data Vue 实例观察的数据对象
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
// 在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，
            属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，dom还未生成，$el 属性目前不可见。
created : function () {
console . log ( "===============created=======================================" )
console . log ( '$el' , this .$el);
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
// 模板编译挂载之前调用，首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，
            则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
            接着判断是否有template属性，有的话就以template属性中的值作为模板，如果没有的话，
            就以el属性指向的作为模板。这里会生成vm.$el，但指令尚未被解析
beforeMount : function () {
console . log ( "===============beforeMount=========================================" )
console . log ( '$el' , this .$el);
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
// 模板编译挂载之后调用，vm.$el替换掉el指向的dom
mounted : function () {
console . log ( "===============mounted===========================================" )
console . log ( '$el' , this .$el);
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
// 数据变更导致虚拟DOM重新渲染之前调用
beforeUpdate : function () {
console . log ( "===============beforeUpdate============================================" );

},
// 数据变更导致虚拟DOM重新渲染之后调用
updated : function () {
console . log ( "===============updated======================================================" );
},
// 实例销毁之前调用，在这一步，实例完全可用
beforeDestroy : function () {
console . log ( "===============beforeDestroy===============================================" )
console . log ( '$el' , this .$el);
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
// vue实例指向的所有东西解除绑定，包括watcher、事件、所以的子组件，后续就不再受vue实例控制了
destroyed : function () {
console . log ( "===============destroyed================================================" )
console . log ( '$el' , this .$el);
console . log ( '$data' , this .$data);
console . log ( "info:" , this .info)
},
methods: {
destroy () {
// 表示销毁组件
this . $destroy ()
},
udpateinfo () {
this .info = 'hello2'
}
}
})
< / script >
</ body >

</ html >
甲乙丙遇见丁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
Vue父组件监听子组件生命周期
10-14
总结来说，Vue 父组件监听子组件生命周期是通过自定义事件和`@hook`修饰符实现的，这为开发者提供了更精细的控制，以确保组件之间的交互按预期进行。了解并熟练掌握这些机制，能够帮助开发者构建更复杂、响应更快的...
Vue组件的生命周期
lllllllwj的博客
04-23 260
组件生命周期 钩子函数，就是options里面的key, 它的值是函数 钩子函数写在其他配置项的后面 组件的有哪几个阶段？ 初始化阶段 运行中阶段 销毁阶段 初始化阶段 分为两个大阶段， 每一个大阶段包含两个生命周期钩子函数 ---- 生命周期 --》人的一生 钩子函数 --》 （人在某个阶段做得一些事情， 这些事情是自动触发） 有那四个钩子函数呢？每个钩...
Vue生命周期函数详解
热门推荐
wen110898的博客
09-28 1万+
前言： 相信很多前端的小伙伴们接触到了Vue都是先学会使用再去理解的吧，想要更好的理解 Vue，那么Vue的生命周期函数一定要理解！ 下图是我对Vue生命周期函数图解的详细解释，应该很通俗易懂了吧，不懂也没关系，下面我会附上代码帮助小伙伴们更好地理解。 首先我们要知道，Vue生命周期函数分为三个阶段： 创建阶段 运行阶段 销毁阶段 1.创建阶段： 创建Vue的实例对象，初始化。这时候该对象只有默认的一些周期函数和默认事件，其他东西还未创建。 实例初始化阶段主要有两个函数： beforeCreate
vue组件中的生命周期函数
qq_45645345的博客
04-23 1171
Vue组件中的生命周期函数
benlalagang的博客
07-07 270
生命周期就是组件从开始到结束经过的某些节点我们可以在这些节点中进行响应的操作组件创建-前在new一个实例后 还不能使用data 和methods组件创建-后可以使用data 和methods可以发起网络请求组件挂载到DOM-前已经编译好模板了 还没有挂载到DOM中 页面组件挂载到DOM-后可以进行DOM操作 如：init echarts图表组件销毁-后此时可以进行一切清理性工作this.$nextTick(回调函数) 在下一次DOM更新结束后执行其指定的回调什么时候用：当改变数据后，要基于更新后的新DOM进
vue组件生命周期函数
humiaoran的博客
05-21 527
总共分为8个阶段。创建前/后，载入前/后，更新前/后，销毁前/后（共11个） 创建前/后： 在beforeCreated阶段，vue实例的挂载元素$el和数据对象 data 都为undefined，还未初始化。在 created阶段，vue实例的数据对象data有了，$el还没有。 载入前/后： 在beforeMount阶段，vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点，data.message还未替换。在mounted阶段，vue实例挂载完成，data.message成功渲
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
vue 生命周期函数
12-21
1. **Vue组件生命周期** Vue组件从创建到销毁的过程可以分为几个阶段，每个阶段都有对应的生命周期钩子函数，开发者可以利用这些钩子来执行特定的任务。主要包括： - **创建阶段**：`beforeCreate` - 在实例初始化...
vue组件化--生命周期函数
IG_hyt的博客
05-16 521
学好vue框架你必须掌握的知识点
Vue生命周期函数
weixin_43613849的博客
05-29 1万+
1、常用生命周期函数 生命周期函数就是vue实例在某一个时间点会自动执行的函数 当我们创建一个实例的时候，也就是我们调用 new Vue() 这句话的时候，vue会帮助我们去创建一个实例，创建过程其实并不像我们想的那么简单，他要经过很多的步骤 Init(Events & Lifecycle):首先他会去初始化事件和生命周期相关的内容,当最基础的初始化完成的时候，在这个时间点上，vue会自动的帮我去之行一个函数，这个函数就是beforeCreate 1、beforeCreate be..
Vue组件（二）-生命周期函数
dreamingbaobei的博客
12-12 265
说到生命周期函数，就要来先谈谈生命周期，一个Vue实例从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称之为Vue的`生命周期`； 更通俗的说实例从被创建出来、运行、最后被销毁所要经历的一系列过程，就是生命周期。
Vue 生命周期函数
xyfck的博客
09-17 241
vue生命周期函数
Vue的生命周期资料
m0_59377549的博客
07-30 180
一、vue的生命周期是什么 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。在组件中具体的方法有: beforeCreate created beforeMount mounted ( beforeUpdate updated ) beforeDestroy destroyed 对应的中文就如其字面意思，英文不好的童鞋可以有道翻翻 二、vue生命周期的在项目中的执行顺序 … dat
11 Vue中组件的生命周期函数
qq_35329964的博客
07-19 186
生命周期函数就是vue实例在某一个时间点会自动执行的函数 生命周期函数在vue中使用如下图： 方法有：created,beforecreate,mounted,beforemount,updated,beforeupdate,destroed,beforedestroy；用法是和mathods同级； 第一个执行的时beforecreate方法,创建vue实例之前执行的方法，在vue中会先执行这个...
6. Vue组件的生命周期&生命周期函数
Mr_LiuP的博客
03-07 1388
vue组件生命周期以及生命周期函数详解
【Vue学习总结】11.Vue中组件的生命周期函数
程序猿之洞
09-20 905
接上篇《10.vue组件的使用》 上一篇我们主要讲解了vue组件的使用。本篇我们来讲解vue的组件的生命周期函数。 本系列博文使用的Vue版本：2.6.11 一、什么是生命周期函数 在vue里，生命周期函数就是组件挂载、更新和销毁时触发的一系列的方法，因为是在组件的各个生命周期发生时调用的回调方法，所以生命周期函数又被称为“生命钩子函数”。 vue提供生命周期函数的目的，就是使开发人员可以在组件不同的阶段有添加代码的机会。 之前我们在前年的博文中使用过其中一个生命周期函数，名为"mounted"，
Vue【六】vue生命周期（钩子函数）
小祥编程擅长前端
11-20 1471
Vue【六】vue生命周期（钩子函数），生命周期函数：是由vue框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行，不需要手动调用。生命周期 => 一个事物从出生 到 消亡的全部过程本文主要讲了vue基础语法中的生命周期（钩子函数）。
vue 组件生命周期钩子函数
最新发布
10-17
Vue 组件的生命周期钩子函数包括： 1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 2. created：实例已经创建完成之后被调用。在这一步，实例已完成以下的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值