生命周期
定义：
每个 Vue 实例在被创建时都要经过从创建倒挂载再到更新、卸载的一系列过程，同时在这个过程中也会运行一些叫做生命周期钩子的函数，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
钩子函数的执行时间
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
还有两个特殊的（配合使用keep-alive）：activated、deactivated
activated
keep-alive组件被激活时调用
deactivated
keep-alive组件被停用时调用
钩子函数中该做的事情
created
实例已经创建完成，因为它是最早触发的原因可以进行一些数据，资源的请求。
mounted
实例已经挂载完成，可以进行一些DOM操作
beforeUpdate
可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
destroyed
可以执行一些优化操作
keep-alive
在使用vue-router时有时需要使用<keep-alive></keep-alive>来缓存组件状态，这个时候created钩子就不会被重复调用了，如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
看栗子：
<!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>
</head>
<body>
<div id="app">
<App/>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
let Vhead = {
template:'<div class="header">{{msg}}</div>',
data(){
return {
msg:'我是header组件'
}
},
// 组件创建之前
beforeCreate(){
console.log('beforeCreate')
console.log(this.msg)
},
// 组件创建之后
created(){
console.log('created')
console.log(this.msg)
},
// 数据挂载到dom之前【应用于后台请求】
beforeMount(){
console.log('beforeMount')
console.log(document.getElementById('app'))
},
// 数据挂载到dom后
mounted(){
console.log('mounted')
console.log(document.getElementById('app'))
},
// 组件被销毁前
beforeDestroy(){
console.log('beforeDestroy')
},
// 组件被销毁后【定时器的清除】
destroyed(){
console.log('destroyed')
},
// 组件被激活
activated(){
console.log('组件被激活')
},
// 组件被被冻结，组件使用v-if时，为true时，又创新创建组件，造成很大的开销，可以使用keep-alive
// keep-alive用于缓存组件
deactivated(){
console.log('组件被冻结')
}
}
let App = {
template:`
<div>
<keep-alive>
<Vhead v-if="isShow"></Vhead>
</keep-alive>
<button @click="isShow = !isShow">创建销毁</button>
</div>
`,
data(){
return{
msg:'app',
isShow:true
}
},
components:{
Vhead
}
}
new Vue({
el:'#app',
data(){
return{
msg:'hello',
}
},
methods:{
},
components:{
App
},
})
</script>
</html>
网友评论