-
需要频繁的创建和销毁组件
-
组件缓存
-
内置组件中
-
被其包裹的组件，在v-if=false的时候，不会销毁，而是停用
-
v-if="true" 不会创建,而是激活
-
避免频繁创建组件对象的性能损耗
-
组件的激活和停用
-
成对比较
-
created 和 beforeCreate
-
mounted 和 beforeMount
-
updated 和 beforeUpdate
-
destroyed 和 beforeDestroy
性能调优：频繁销毁创建的组件使用内置组件包裹
<!DOCTYPE html>
<html>
<head>
<title>vue的生命周期</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="main.js">
</script>
</body>
</html>
// created 和 beforeCreate
// A 可以操作数据 B 数据没有初始化
// mounted 和 beforeMount
// A 可以操作DOM B 还未生成DOM
// updated 和 beforeUpdate
// A 可以获取最终数据 B 可以二次修改
// destroyed 和 beforeDestroy
var Test={
template:`
<div>我是Test组件{{ msg }}
<button @click="msg+='1'">msg+1</button>
</div>
`,
data(){
return{
msg:'HELLO VUE'
}
},
//组件创建前
beforeCreate(){
console.log('组件创建前')
console.log(this.msg)
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
},
//Dom挂载前
// beforeMount(){
// console.log('Dom挂载前')
// console.log(document.body.innerHTML)
// },
// //Dom挂载后
// mounted(){
// console.log('Dom挂载后')
// console.log(document.body.innerHTML)
// }
//基于数据更新前
beforeUpdate(){
console.log('数据更新前')
console.log(document.body.innerHTML)
},
//基于数据更新后
updated(){
console.log('数据更新后')
console.log(document.body.innerHTML)
},
//销毁前
beforeDestroy(){
console.log('销毁前')
},
//销毁后
destroyed(){
console.log('销毁后')
},
//组件停用
deactivated(){
console.log('组件停用')
},
//组件激活
activated (){
console.log('组件激活')
}
}
new Vue({
el:'#app',
components:{
Test
},
template:`
<div>
<keep-alive><test v-if='testshow'></test></keep-alive></br>
<button @click='clickbut'>销毁组件</button>
</div>
`,
data(){
return {
testshow:true
}
},
methods:{
clickbut(){
this.testshow=!this.testshow
}
}
})
