生命周期
1.vue有哪些生命周期函数
有8个
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed
2.一旦进入组件或页面会执行哪些生命周期、顺序
beforeCreate
created
beforeMount
mounted
3.添加了keep-alive后,会增加哪些生命周期
activated、deactivated
4.在哪个阶段有$el,在哪个阶段有$data
beforeCreate 都没有
created 有$data,无$el(即还没有dom节点)
beforeMount 有$data,无$el
mounted 都有(所以到了mounted中才有dom节点)
(补充:$el表示组件的根节点,$data表示下面代码中的data
<div id=‘app’>
new Vue({
el:’#app’,
data(){
return {
str:’123’
}
}
//这里的生命周期函数的写法先后顺序不会影响生命周期函数的执行顺序
beforeCreate(){
console.log(‘beforeCreate’,this.$el,this.$data);
}
created(){
console.log(‘created’);
}
beforeMount(){
console.log(‘beforeMount’);
}
mounted(){
console.log(‘mounted’);
}
})
class Vue{
constructor(option) {
//这里的生命周期函数的顺序决定了函数的执行顺序
option.beforeCreate.bind(this)();//改变this的指向,最后的()表示执行
this.$data = options.data;// 实现在created之后有data
option.created.bind(this)();
option.beforeMount.bind(this)();
this.$el = document.querySelector(options.el);//实现在beforeMount之后有el
}
}
5.如果加了keep-alive,第一次进入组件会执行哪些生命周期函数
beforeCreate
created
beforeMount
mounted
activated
(补充:keep-alive用于缓存组件)
6.如果加了keep-alive,第2次 或 第n次 进入组件会执行哪些生命周期函数
activated
(补充:因为这时候页面已经被缓存了)
标签:el,生命周期,beforeCreate,beforeMount,created,vue,mounted,data,页面 From: https://www.cnblogs.com/web-aqin/p/16621361.html