前言
- vue的生命周期:vue实例从创建的销毁的整个过程
- vue的生命周期函数:
- vue生命周期钩子函数/vue生命周期钩子 - 附着了用户在不同的阶段添加自己代码依赖的机会
一、生命周期是什么?
借用官网的一句话就是:每一个vue实例从创建到销毁的过程,就是这个vue实例的生命周期。在这个过程中,他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中,具体vue做了些啥,我们今天来了解一下。
二、生命周期流程图示
三、生命周期各个阶段
1.创建阶段
const vm = new Vue( )
Init EventS & Lifecycle
· 加载事件和生命周期函数
· 这里的Events指仅仅是自己内部的事件
示例:
const vm = new Vue({
el: '#app',
data: {
message: 'hello world',
},
mounted(){
},
})
在加载过程中会将mounted()
这个事件自动读取到本身的内存中,并不是将这个函数调用起来(仅仅只是读取,将其进行一个获取,并没有都这个事件进行调用),将配置的事件(函数)加载到自己的内部中。
3. 调用beforeCreate()
4. Init Injections & reactvity
· 加载数据以及添加数据监听
· 这里加载的是我们已经在data
中配置的数据
· 这一步在beforeCreate()
函数和created()
函数之间运行
· 作用:加载data
数据,这是已经给data
中的各个属性添加了get
和 set
方法
· 在该阶段主要实现了给数据/属性添加get
和 set
方法,实现数据的双向绑定,在此时也可以监听属性值
注意:
· 只有在这个时候data
中的属性才会有响应
· 如果之后要添加属性,页面将不会出现响应,这也是经常出现的一个问题点
解决方案:
1):在初始的时候将属性值在data
中申明好
2):让这个属性的对象成为新的一个对象,那么此时所有的属性都会重新添加get
和set
方法
const vm = new Vue({
el: '#app',
data: {
message: 'hello world',
info: {
a: 1,
b: 2,
}
},
created(){
this.info = {
...this.info,
c:3
}
},
});
这样做的目的在于将c
这个属性值定义按时并不会赋值,这是为undefined
。如果后面重新对c
进行赋值的话,就将info
作为作为一个新的对象,这时就会重新添加get
和set
方法
3):
总结
提示:这里对文章进行总结:
例如:以上就是今天要讲的内容,本文仅仅简单介绍了pandas的使用,而pandas提供了大量能使我们快速便捷地处理数据的函数和方法。