vue2.0视频教程系列第二十一节-生命周期函数(3)
上节课我们主要讲了beforeMounte, mounted, beforeUpdate, updated四个钩函数，了解了在什么时候会触发，这节课呢我们一起学习一下最后两个钩子函数：beforeDestroy和destroyed。顾名思义，是在组件销毁的时候会被触发。什么是组件销毁呢？就是在dom里被移除。
下面以一个小实例进行讲解一下哈：
我们用一个button来控制组件的销毁与否，并在控制台看函数触发时输出的内容。
首先在App.vue里的Dom结构如下：
我们会用flag来控制about组件是否被销毁，click事件呢则是点击时，如果原来的flag为true，则点击后为false，反之…
我们设置初始数据为：
flag: true
当然我们需要引入子组件，并注册…这些在这里就不再赘述。我们在子组件里的html部分为：
这是about组件
我们想想，销毁是针对子组件而言的，所以，beforeDestroy和destroyed是在子组件里被触发的。所以在js部分如下：
beforeDestroy() {
console.log("实例被销毁之前")
},
destroyed() {
console.log("实例被销毁之后")
}
我们看下页面效果，首先看的是控制台，没有任何内容输出，说明没有触发事件。我们再来看下DOM结构，会看到about组件在DOM流里。接下来我按下按钮，看看会发生什么呢？
我们看到，DOM文档流里，about组件已经被移除，控制台里会按次序输出：
实例被销毁之前
实例被销毁之后
说明钩子函数beforeDestroy和destroyed被触发。
Destroyed在我们的项目开发中会经常用到的，需要我们一起好好理解。
今天就到这里了，休息休息一会儿：）
欢迎关注微号：duzhan99
网友评论