beforeCreate()
详情:
在实例初始化之后,数据观测 (data observer) 和 event/watcher 事件配置之前被调用
<script>
export default {
beforeCreate(){
console.log('实例初始化');
}
}
</script>
created()
详情:
在实例创建完成后被立即调用。$el 属性目前不可见
<script>
export default {
created(){
console.log('实例创建完成后被立即调用');
}
}
</script>
beforeMount()
详情:
在挂载开始之前被调用:相关的 render 函数首次被调用
<script>
export default {
beforeMount(){
console.log('在挂载开始之前被调用');
}
}
</script>
mounted()
详情:
el 被新创建的 vm.el 也在文档内。
<script>
export default {
mounted(){
// 处理一些页面刷新 之后的接口调用 ★★★★★
console.log('处理一些页面刷新 之后的接口调用');
}
}
</script>
beforeUpdate()
详情:
数据更新时调用,发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM,比如手动移除已添加的事件监听器。
<script>
export default {
beforeUpdate(){
console.log('数据更新时调用');
}
}
</script>
updated()
详情:
由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。
<script>
export default {
updated(){
console.log('组件 DOM 已经更新');
}
}
</script>
// 所有视图渲染完毕 可以使用 vm.$nextTick 替换掉 updated
<script>
export default {
updated(){
this.$nextTick(function () {
// 仅在运行之后才运行的代码
// 整个视图已被渲染
})
}
}
</script>
activated()
详情:
keep-alive 组件激活时调用。
<script>
export default {
activated(){
console.log('只有在只用keep-alive 内置组件的时候才会被调用!!');
}
}
</script>
deactivated()
详情:
keep-alive 组件停用时调用。
<script>
export default {
deactivated(){
console.log('只有在使用 keep-alive 内置组件的时候才会被调用');
}
}
</script>
beforeDestroy()
详情:
实例销毁之前调用。在这一步,实例仍然完全可用。
<script>
export default {
beforeDestroy(){
console.log('实例销毁之前调用');
}
}
</script>
destroyed()
详情:
Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。
<script>
export default {
destroyed(){
console.log('Vue 实例销毁后调用');
}
}
</script>
网友评论