Vue2视频教程系列第二十一节-生命周期函数(3)

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