vue的生命周期详解

最新推荐文章于 2022-10-18 17:42:55 发布
最新推荐文章于 2022-10-18 17:42:55 发布
阅读量379 收藏
点赞数
分类专栏： vueJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m_uncle/article/details/80443154
版权

直接上代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>vue生命周期</title>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="'hello'" v-if="show"></my-components>
</keep-alive>
<button @click="changs()">点击改变数据</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
let child = {
template: '<div>from child: {{msg}}</div>',
props: ['msg'],
data () {
return {
childMsg: 'child'
}
},
deactivated () {
console.log('component deactivated!')
},
activated () {
console.log('component activated')
}
}
var app = new Vue({
el: '#app',
data () {
return {
message: 'father',
show: true
}
},
beforeCreate () {
console.log('beforeCreate 创建前的状态==========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state)
},
created () {
console.log('created 创建完毕状态===========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(state)
},
beforeMount () {
console.log('beforeMount 挂载前的状态========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state)
},
mounted () {
console.log('mounted 挂载结束状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
// this.message = 'change';
},
beforeUpdate () {
console.log('beforeUpdate 更新前的状态===========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
console.log('beforeUpdate == ' + document.getElementsByTagName('p')[0].innerHTML);
// this.message = 'change2';
},
updated () {
console.log('updated 更新完成状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
console.log('updated == ' + document.getElementsByTagName('p')[0].innerHTML);
// this.message = 'change3';
},
beforeDestroy () {
console.log('updated 销毁前状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
},
destroyed () {
console.log('updated 销毁完成状态=========》')
let state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el)
console.log(state)
},
methods: {
changs () {
this.message = 'change'
}
},
components: {
'my-components': child
}
})
</script>
</body>

</html>

打开谷歌浏览器，按f12看下console就差不多明白了

比较常用的是：

beforecreate：可以在这里加一个loading事件

created：在这里结束loading，可以发起后端请求，拿回数据放入data

mounted：这里可以对dom的一些操作，比如说监听滚动条来到达吸顶的效果等等


m_uncle
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
VUE2生命周期
weixin_58462431的博客
12-28 202
vue生命周期： 创建前beforeCreate创建前的阶段，这个时候data中的数据还未被定义所以不能使用 创建后created最早开始使用data和methods中数据的钩子函数 挂载前beforeMount指令已经解析完毕内存中已经生成dom树还没渲染到本地 挂载后mounteddom已经渲染完毕最早可以操作DOM元素钩子函数 更新前beforeUpdate当data的数据发生改变会执行这个钩子内存更新但是DOM节点还未更新 更新后updated数据更新完成以...
【前端】Vue生命周期函数（详细讲解+中文图解）
最新发布
山赶着山，山山漫漫结成关
08-09 1万+
Vue生命周期函数（详细讲解+中文图解）
Vue生命周期详解
m0_58709145的博客
10-18 1万+
1.Vue实例从创建到销毁的这一过程叫做vue的生命周期.2.过程:开始创建—>初始化数据—>编辑模板—>挂载DOM($el)---->UI渲染—>数据更新---->卸载。
vue的生命周期
weixin_30888027的博客
08-06 159
vue生命后期有以下几个： beforeCreated created beforeMounted mounted beforeUpdated updated beforeDestroyed destroyed 共以上八个 1.在beforeCreate和created之间，进行数据观测(data observer) ，也就是在这个时候开始监控data中的数据变化了，...
jQuery图片放大镜插件
niuyongaiai的博客
09-13 3598
运行效果： 代码编辑： 响应式jQuery图片放大镜插件
关于Vue生命周期详解
10-29
关于Vue生命周期详解。 vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
vue组件生命周期详解
08-28
Vue组件生命周期详解 Vue组件生命周期是指从组件创建到销毁的整个过程，分为四个阶段：create、mount、update和destroy，每个阶段都有其对应的处理函数。下面我们将详细介绍每个阶段的处理函数和生命周期函数。 ...
Vue生命周期示例详解
08-30
在深入理解Vue生命周期之前，我们需要了解一些基本概念，如组件、数据绑定和Vue实例。 Vue生命周期涉及到的主要阶段包括： 1. **beforeCreate**：在实例被创建后，但数据观测（data observer）和属性及方法...
vue实例的生命周期详解
04-24
vue生命周期
NodeJS的安装
3y先生的博客
08-12 5343
(⊙o⊙)…好几个月没写博客了，感觉离开了好久，这是来北京工作之后第一次写博客，值得记录一下。
浅谈 Vue 项目优化
土家稀哥
06-20 2万+
好久不写博文了，本文作为我使用半年 vue 框架的经验小结，随便谈谈，且本文只适用于 vue-cli 初始化的项目或依赖于 webpack 打包的项目。 前几天看到大家说 vue 项目越大越难优化，带来很多痛苦，这是避免不了的，问题终究要解决，框架的性能是没有问题的，各大测试网站都有相关数据。下面进入正题 基础优化 所谓的基础优化是任何 web 项目都要做的，并且是问题的根源。H
VUE八大生命周期
一只小白奔向大牛的故事
11-14 6271
vue.js生命周期的八大状态： 1. beforeCreate（创建前） 2. created（创建后） 3. beforeMount(载入前) 4. mounted（载入后） 5. beforeUpdate（更新前） 6. updated（更新后） 7. beforeDestroy（销毁前） 8. destroyed（销毁后）  ...
详解vue生命周期-一篇文章搞懂详细过程
到达的专栏
04-17 1万+
首先，每一个vue实例都有一个完整的生命周期，也就是从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。 这是官方文档上的图片很熟悉： 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解: ...
Vue2.5笔记：Vue的实例与生命周期
weixin_34381666的博客
09-28 175
理解与认识 Vue 的实例是我们学习 Vue 非常重要的一步，也是非常必须的，因为实例是它的一个起点，也是它的一个入口，只有我们创建一个 Vue 实例之后，我们才行利用它进行一些列的操作。 首先 Vue 没有完全遵守 MVVM 的架构模式，但是它的设计也受到了该模式的启发，Vue 也就是在该模式中起到 VM（ViewModel） 的作用。如果有对 MVC、MVVM 模式不了解的同学可以参考阮一峰老...
vue生命周期钩子函数详解
热门推荐
小熊的博客
07-26 9万+
先放一张官网生命周期图： vue有8种生命周期函数： 钩子函数 触发的行为 在此阶段可以做的事情 beforeCreadted vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。 加loading事件 created vue实例的数据对象data有了，$el还没有 结束loading、请求数据为mounted...
vue生命周期
weixin_43837268的博客
06-19 115
Vue生命周期大致分为：created、mounted、update、activated、destroy，每一个周期钩子都可分为前后两个状态，例如：beforeCreate/created，下面，详细讲解一下 Create beforeCreate：组件实例刚刚被创建，组件属性计算之前，data数据初始化之前(el和data并未初始化) created：组件实例已经创建完成之后(实例已经...
vue生命周期详解
huangdj321的博客
06-21 471
从 vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件统称为生命周期生命周期钩子：就是生命周期事件的别名，生命周期钩子 = 生命周期函数 = 生命周期事件1、创建期间的生命周期函数 beforeMount：此时已经完成了模板编译，但是还没有挂载到页面中 mounted：此时已经将编译好的模板，挂载到了页面指定的容器中显示 2、运行期间的生命周期函数...
vue生命周期 详解和代码演示
07-12
Vue.js 是一个流行的 JavaScript 框架，它有一套完整的生命周期钩子函数，用于在组件的不同阶段执行特定的操作。下面是 Vue 组件的生命周期钩子函数及其对应的阶段： 1. beforeCreate: 在实例被创建之前调用，此时 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值