官网
https://cn.vuejs.org/v2/guide/instance.html
概述
created 和 beforeCreate
- #### A 可以操作数据 B 数据没有初始化
mounted 和 beforeMount
- #### A 可以操作DOM B 还未生成DOM
updated 和 beforeUpdate
- #### A 可以获取最终数据 B 可以二次修改
destroyed 和 beforeDestroy
性能调优：频繁销毁创建的组件，比如页面中部分内容显示与隐藏，但是用的是v-if，使用内置组件**<keep-alive></keep-alive>包裹, 被其包裹的组件，在v-if=false的时候，不会销毁，而是停用, v-if="true" 不会创建,而是激活,避免频繁创建组件对象的性能损耗，组件的激活和停用，activated 和 deactivated
代码1
<!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" >
var Test={
template:`
<div>我是Test组件{{ msg }}
</div>
`,
data(){
return{
msg:'HELLO VUE'
}
}
}
new Vue({
el:'#app',
components:{
Test
},
template:`
<div>
<test ></test>
</div>
`,
data(){
return {
}
}
})
</script>
</body>
</html>运行效果
代码2(组件创建前与组件创建后)
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)
//undefine
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
//HELLO VUE
},
……
}运行效果
代码3(Dom挂载前与Dom挂载后)
var Test={
template:`
<div>我是Test组件{{ msg }}
</div>
`,
data(){
return{
msg:'HELLO VUE'
}
},
//Dom挂载前
beforeMount(){
console.log('Dom挂载前')
console.log(document.body.innerHTML)
},
//Dom挂载后
mounted(){
console.log('Dom挂载后')
console.log(document.body.innerHTML)
}
} 运行效果
代码4(数据更新前与数据更新后)
var Test={
template:`
<div>我是Test组件{{ msg }}
<button @click="msg+='1'">msg+1</button>
</div>
`,
data(){
return{
msg:'HELLO VUE'
}
},
//点击button后
//基于数据更新前
beforeUpdate(){
console.log('数据更新前')
console.log(document.body.innerHTML)
},
//基于数据更新后
updated(){
console.log('数据更新后')
console.log(document.body.innerHTML)
}
}运行效果
代码5(销毁前和销毁后)
##test
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)
//undefine
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
//HELLO VUE
},
//销毁前
beforeDestroy(){
console.log('销毁前')
},
//销毁后
destroyed(){
console.log('销毁后')
}
}
##
new Vue({
el:'#app',
components:{
Test
},
template:`
<div>
<test v-if='testshow'></test></br>
<button @click='clickbut'>销毁组件</button>
</div>
`,
data(){
return {
testshow:true
}
},
methods:{
clickbut(){
this.testshow=!this.testshow
}
}
})运行效果
代码6(激活与停用)
##
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)
//undefine
},
//组件创建后
created(){
console.log('组件创建后')
console.log(this.msg)
//HELLO VUE
},
//销毁前
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
}
}
})运行效果
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
