Vue life cycle
Vue before each instance is created to go through a series of initialization process that is vue life cycle, in this process there will be some hook function will get callbacks
- Vue page smallest unit that can be used directly by the component that is, we often write:
var vm = new Vue({
el: '#app',
......
}Is the root element, EL specifies its template (id element is partially wrapped app), with respect to the template attributes
may write:
var vm = new Vue({
......
}
vm.$mount("#app");Root component subassembly which may be used:
var vm = new Vue({
......
components: {
'my-components': child
}
}
vm.$mount("#app");So that it can use the name my-components in the div with id app to refer to child components
div id="app">
......
<my-components :msg="msg1" v-if="show"></my-components>
......
</div>- beforeCreate: After initialization instance, this time el and data did not initialize
- created: Real data data initialization is completed, but the root of a DOM instance of element el Vue yet initialized
- beforeMount: data are initialized and el, el no rendering into data, el is "virtual" node element
- mounted: el case mount has been rendered complete and the instance
Use cache component view keeplive
Sometimes we do not need to show when the page reloads, you can use the last cached pages, such as single-page application using routing switch the page, then cut back, often do not need to reload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components msg="hello" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script>
var child = {
template: '<div><input></input></div>',
props: ['msg'],
data: function() {
return {
childMsg: 'child'
};
},
created: function() {
console.log('child reated!');
},
mounted: function() {
console.log('child mounted!');
},
deactivated: function() {
console.log('component deactivated!');
},
activated: function() {
console.log('component activated');
}
};
var app = new Vue({
el: '#app',
data: function() {
return {
message: 'father',
show: true
};
},
components: {
'my-components': child
}
});
</script>
</html>Components keeplive be wrapped will use the cache, we can enter text input in
the console control app.show = false, then app.show = true, the text can be found before the first input also describe how the cache
deactivated, activated in the callback method only two components will be wrapped in keeplive, deactivated called when the component to disappear, activated invoked when the component's display
Comprehensive example
<!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="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<style>
</style>
</head>
<body>
<div id="app">
<p>{{message}}</p>
<keep-alive>
<my-components :msg="msg1" v-if="show"></my-components>
</keep-alive>
</div>
</body>
<script>
var child = {
template: '<div>from child: {{childMsg}}</div>',
props: ['msg'],
data: function() {
return {
childMsg: 'child'
}
},
beforeCreate: function() {
debugger;
},
created: function() {
debugger;
},
beforeMount: function() {
debugger;
},
mounted: function() {
debugger;
},
deactivated: function() {
alert("keepAlive停用");
},
activated: function() {
console.log('component activated');
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
};
var vm = new Vue({
el: '#app',
data: {
message: 'father',
msg1: "hello",
show: true
},
beforeCreate: function() {
debugger;
},
created: function() {
debugger;
},
beforeMount: function() {
debugger;
},
mounted: function() {
debugger;
},
beforeUpdate: function() {
alert("页面视图更新前");
},
updated: function() {
alert("页面视图更新后");
},
beforeDestroy: function() {
console.group('beforeDestroy 销毁前状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
destroyed: function() {
console.group('destroyed 销毁完成状态===============》');
var state = {
'el': this.$el,
'data': this.$data,
'message': this.message
}
console.log(this.$el);
console.log(state);
},
components: {
'my-components': child
}
});
</script>
</html>- debugger breakpoint for automatically loading the chrome
- 根组件的调用中：
beforeCreate执行时，data和el均为undefined
created执行时，data已经初始化，el为undefined
beforeMount执行时，data和el均已经初始化，此时el并没有渲染进数据，此时用console.log(this.$el);打印el，p元素还是{{message}}
，{{message}}还没有替换为真实的数据
el代表根组件的template，vue把它拿出来渲染（比如data数据渲染）后再放回去，el对象可以操作里面的各个html子节点
mounted执行时，此时el已经渲染完成并挂载到实例上 - 加载渲染调用顺序：
父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->子activated(如果是缓存视图)->父mounted->父activated(如果是缓存视图) - 控制根组件更新
控制台输入vm.msg1 = "123"
数据变化之前会调用beforeUpdate，更新后调用updated,这两个方法只有在更新数据的时候才调用（包括隐藏或显示组件，不管是不是缓存视图） - 控制子组件更新
vm.$children[0].childMsg = "111"
只会调用自己的beforeUpdate和updated，跟父组件无关 - Hide display control sub-assembly:
Hide:
Parent beforeUpdate-> child Deactivated (if cached views) -> Parent updated
display:
Parent beforeUpdate-> sub activated (if cached views) -> parent updated - The destruction process
vm $ destroy ().
Parent beforeDestroy-> child deactivated (if it is cached views) -> son beforeDestroy-> child destroyed-> Father destroyed