<div id='box'>
<button @click='xx = !xx'>切换<button/>
<div/>
<script>
Vue.component('abc',{
template:"<div>abc组件 <input type='text' v-model='mess' </div>"
data(){
return{
mess:''
}
created(){
console.log('created-组件创建完成调用')
},
beforeCreate(){
console.log('beforeCreate-组件创建之前调用')
},
beforeMount(){
console.log('beforeMount ->组件挂载之前调用')
},
mounted(){
console.log('mounted ->组件挂载完成调用')
},
beforeUpdate(){
console.log('beforeUpdate ->组件更新之前调用')
},
updated(){
console.log('updated ->组件更新完成调用')
},
beforeDestroy(){
console.log('beforeDestroy ->组件销毁之前调用')
},
destroyed(){
console.log('destroyed ->组件销毁完成调用')
}
)}
new Vue({
el:'#box', //挂载节点
data:{
xx:false
}
})
<script/>
大家可以更详细的了解一下vue生命周期函数执行过程
在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。
创建阶段:
beforecreate:实例已经初始化,但不能获取DOM节点。(没有data,没有el)
created:实例已经创建,仍然不能获取DOM节点。(有data,没有el)
载入阶段:
beforemount:模板编译完成,但还没挂载到界面上。(有data,有el)
mounted:编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段:
beforeupdate:数据发生变化立即调用,此时data中数据是最新的,但页面上数据仍然是旧的(检测到数据更新时,但DOM更新前执行)。
updated:更新结束后执行,此时data中的值和页面上的值都是最新的。
销毁阶段:
beforedestroy:当要销毁vue实例时,在销毁之前执行。
destroy:在销毁vue实例时执行。