vue生命周期钩子函数详解
关于生命周期的钩子函数,做出了如下介绍:
这是生命周期的八个钩子函数
附代码如下(js部分):
var app = new Vue({
el: ‘#app’,
data: {
message: “hahahahhahahahah”
},
beforeCreate: function () {
console.group(‘beforeCreate 创建前状态===============》’);
console.log("%c%s", “color:red”, “el : " + this.
e
l
)
;
/
/
u
n
d
e
f
i
n
e
d
c
o
n
s
o
l
e
.
l
o
g
(
"
el); //undefined console.log("%c%s", "color:red", "data : " + this.
el);//undefinedconsole.log("data); //undefined
console.log(”%c%s", “color:red”, “message: " + this.message)
},
created: function () {
console.group(‘created 创建完毕状态===============》’);
console.log(”%c%s", “color:red”, “el : " + this.
e
l
)
;
/
/
u
n
d
e
f
i
n
e
d
c
o
n
s
o
l
e
.
l
o
g
(
"
el); //undefined console.log("%c%s", "color:red", "data : " + this.
el);//undefinedconsole.log("data); //已被初始化
console.log(”%c%s", “color:red”, “message: " + this.message); //已被初始化
},
beforeMount: function () {
console.group(‘beforeMount 挂载前状态===============》’);
console.log(”%c%s", “color:red”, “el : " + (this.
e
l
)
)
;
/
/
已
被
初
始
化
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
el)); //已被初始化 console.log(this.
el));//已被初始化console.log(this.el);
console.log(”%c%s", “color:red”, “data : " + this.KaTeX parse error: Expected 'EOF', got '}' at position 118: … }̲, m…el); //已被初始化
console.log(this.
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
"
el); console.log("%c%s", "color:red", "data : " + this.
el);console.log("data); //已被初始化
console.log(”%c%s", “color:red”, “message: " + this.message); //已被初始化
this.message = “hahahahahaha”;
console.log(”%c%s", “color:red”, “message: " + this.message); //已被初始化
},
beforeUpdate: function () {
console.group(‘beforeUpdate 更新前状态===============》’);
console.log(”%c%s", “color:red”, “el : " + this.
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
el); console.log(this.
el);console.log(this.el);
console.log(”%c%s", “color:red”, “data : " + this.KaTeX parse error: Expected 'EOF', got '}' at position 98: …); }̲, u…el);
console.log(this.
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
"
el); console.log("%c%s", "color:red", "data : " + this.
el);console.log("data);
console.log(”%c%s", “color:red”, “message: " + this.message);
},
beforeDestroy: function () {
console.group(‘beforeDestroy 销毁前状态===============》’);
console.log(”%c%s", “color:red”, “el : " + this.
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
t
h
i
s
.
el); console.log(this.
el);console.log(this.el);
console.log(”%c%s", “color:red”, “data : " + this.KaTeX parse error: Expected 'EOF', got '}' at position 98: …); }̲, d…el);
console.log(this.
e
l
)
;
c
o
n
s
o
l
e
.
l
o
g
(
"
el); console.log("%c%s", "color:red", "data : " + this.
el);console.log("data);
console.log(”%c%s", “color:red”, "message: " + this.message)
}
})
展示的结果图如下:
可以看出:
在beforeCreate这个阶段,组件实例刚被创建,还未完成初始化, 挂载元素el:undefinde; 数据对象data:undefined; message:undefined;
在created阶段,其实是已经完成如下配置:数据观测(data observe),属性和方法的运算,event和watch回调,但是,挂载还没有开始,$el还没有。 此处的挂载没有完成意味着模板没有生成html页面,即无法通过id等获取到页面的信息。但是此处可以发送Ajax请求。
在beforeMount阶段,data和el已经完成了初始化,但是很明显的就是
此处的el还是{{message}},这里就是使用了虚拟DOM技术,先占位,值还未渲染。等到mounted的时候,挂载完成,渲染到真实的DOM。
在boforeUpdate处,当data数据发生改变时,会触发。理解为:视图层的数据发生改变时触发。视图层的数据发生变化,才会触发boforeUpdate,当我没直接在mounted里更改data中的数据的时候,实际上并不会触发boforeUpdate。如果视图层数据被改变后,会触发beforeUpdate,如果在beforeUpdate里再一次改变数据,此时会再一次触发beforeUpdate吗?并不会,mounted改变了message,视图层的message发生变化,此时触发beforeUpdate,尽管beforeUpdate再次改变了message,但此时mounted改变过后的message还没有更新到视图层,因此在beforeUpdate里再次变化message的是没有更新到视图层的message,当然不会再次触发beforeUpdate。但是在updated里改变message后触发了beforeupdate(不建议,处理不好会造成死循环)。
destroyed钩子函数有一点一定要特别注意:在执行destroy方法后,对data的改变不会再触发周期函数,此时的vue实例已经解除了事件监听以及和dom的绑定,但是dom结构依然存在。所以对于实时显示的通知型组件,在他destroyed之前,我们必须手动removeChild()删除该节点;否则,DOM节点还是存在,影响浏览器性能。
【扩展】:在父子组件传值时,先执行父组件的created和beforeMounted函数;再按子组件的使用顺序,执行子组件的created和beforeMounted函数;依旧按照子组件的执行顺序执行mounted函数,最后是父组件的mounted函数;
也就是说父组件准备要挂载还没挂载的时候,子组件先完成挂载,最后父组件再挂载;所以在真正整个大组件挂载完成之前,内部的子组件和父组件之间的数据时可以流通的