Vue的生命周期图
红色圈出来的都是钩子函数，成对的，和el、template、data一个级别。
组件也是一个Vue实例，也有这些生命周期，并不是说要显式new Vue()才是一个Vue对象。
demo Vue的生命周期
index.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <!-- 引入vue.js --> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="app"></div> <script src="js/test.js"></script> </body> </html>
把js脚本单独拿了出来
test.js
Vue.component('Test',{
template:`
<div>
<p>{{msg}},我是test组件</p>
<button @click='msg+=" chy"'>更新数据</button> <!-- +是字符串拼接 -->
</div>
`,
data(){
return{
msg:'hello'
}
},
// 组件创建前，数据尚未挂载
beforeCreate(){
console.log('组件创建前',this.msg); //this.msg是undefined
},
// 组件创建后，数据已挂载
created(){
console.log('组件创建后',this.msg); //this.msg有值
},
// dom挂载前，此时此组件的dom尚未挂载
beforeMount() {
console.log('dom挂载前',document.body.innerHTML); //<div id="app"></div>
},
// dom挂载后，此时此组件的dom已挂载
mounted() {
console.log('dom挂载后',document.body.innerHTML); //<div><div><p>hello,我是test组件</p></div></div>
},
// 组件激活。dom挂载后，组件会被激活
activated() {
console.log('组件激活')
},
// 组件停用
deactivated() {
console.log('组件停用');
},
// 数据更新前，数据指的是内存中的数据，比如msg
beforeUpdate() {
console.log('数据更新前',document.body.innerHTML);
},
// 数据更新后
updated() {
console.log('数据更新后',document.body.innerHTML); //如果打印的是this.msg，数据要已发生更新才能界定更新前后，此时数据已变了，更新前后打印出来的this.msg是一样的
},
// 组件销毁前
beforeDestroy() {
console.log('组件销毁前');
},
// 组件销毁后
destroyed() {
console.log('组件销毁后');
},
})
new Vue({
el:'#app',
template:`
<div>
<Test v-if='display'></Test> <!--绑定内存中给的display变量。v-if不显示组件时，会销毁组件；显示组件时，是重新创建组件-->
<button @click='createOrDestroy'>销毁|创建组件</button>
</div>
`,
data(){
return{
display:true
}
},
methods:{
createOrDestroy(){
this.display=!this.display; //换为相反的
}
}
});
<keep-alive><Test v-if='display'></Test></keep-alive>
性能调优
频繁的新建组件对性能有很大的影响。可以把组件放在<keep-alive>中：
<keep-alive> <Test v-if='display'></Test> </keep-alive>
这样v-if为false时会缓存组件（停用组件），并不是直接销毁；当v-if为true时又激活组件。