vue---组件生命周期

1、每个组件在被创建的时候都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己代码的机会。

比如说我们希望在设置数据的时候，你要做一些事情，挂载到实例上在做一些事情，数据页面发生更新，在做一些事情。也就是说，你可以在不同阶段去做不同的事情了，这个就是生命周期的意义。

2、vue生命周期一共有八个，从vue的创建开始一直到整个组件结束。

3、生命周期函数是不需要我们进行调用的，虽然我们称它为函数，但是这个函数是自动化调用的，不需要我们手动去调用。

4、八个生命周期函数：

创建时：beforeCreate（组件准备创建，创建之前）、created（创建完成，不代表组件显示）

渲染时：beforeMount（渲染之前触发）、mounted（渲染之后触发）

更新时：beforeUpdate（准备要更新，还未开始）、updated（页面数据已经更新完成）

卸载时：beforeUnmount（卸载之前）、unmounted（卸载之后，已经卸载完成）

比如你要知道beforeUpdate是在组件的数据发生变化之前，会触发这个生命周期函数。

项目展示：

1、先启动项目，在终端输入：npm run serve

2、创建组件文件MyComponent.vue

3、在组件文件中输入：

<template>
    <h3>生命周期函数</h3>
    <p>{{message}}</p>
</template>

<script>
    export default{
        data(){
            return{
                message:""
            }
        },
        beforeCreate(){
            console.log("组件创建之前");
        },
        created(){
            console.log("组件创建完成");
        },
        beforeMount(){
            console.log("渲染之前");
        },
        mounted(){
            console.log("组件渲染完成");
        },
        beforeUpdate(){
            console.log("组件更新之前");
        },
        updated(){
            console.log("组件更新之后");
        },
        beforeUnmount(){
            console.log("组件卸载之前");
        },
        unmounted(){
            console.log("组件卸载之后");
        }
    }
</script>

4、为了可以看到它的运行，我们在App.vue当中把这个组件给引用一下：

<template>
    <MyComponent />
</template>

<script>
    import MyComponent from './components/MyComponent.vue'
    export default{
          name:'App',
          components:{
                  MyComponent      
          }  
    }
</script>

此时访问localhost:8080可以看到执行了四个周期函数。

注意：生命周期函数都是按照顺序来执行的。即使把created写在beforeCreate前面也是先执行beforeCreate，也就意味着它跟编写的顺序无关，它一定是组件到了那个时期才会主动去调用对应的函数。

5、更新也就是页面发生了变化，比如此时放一个按钮：

<template>
    <h3>生命周期函数</h3>
    <p>{{message}}</p>
    <button @click="message='数据'">按钮</button>
</template>

<script>
    export default{
        data(){
            return{
                message:""
            }
        },
        beforeCreate(){
            console.log("组件创建之前");
        },
        created(){
            console.log("组件创建完成");
        },
        beforeMount(){
            console.log("渲染之前");
        },
        mounted(){
            console.log("组件渲染完成");
        },
        beforeUpdate(){
            console.log("组件更新之前");
        },
        updated(){
            console.log("组件更新之后");
        },
        beforeUnmount(){
            console.log("组件卸载之前");
        },
        unmounted(){
            console.log("组件卸载之后");
        }
    }
</script>

可以看到页面上本来没有内容（因为message=“”），点击按钮，显示出了数据两个字。在控制台显示出了六个生命周期函数，多了组件更新的函数，分别是数据更新之前和数据更新之后。

6、当组件被销毁，组件没有用被销毁，回收的时候，分别会执行组件卸载的两个函数。

7、那我们可以用这些生命周期来做什么呢？比如mounted，我们可以把网络请求放到这里，当我们执行到这里的时候，说明这个组件已经显示在页面之上了，我们在这里去做网络请求，请求到数据之后，再重新把这个数据渲染在页面之上，那么为什么不在组件创建的时候去做这件事呢？

我们可以打开京东，或者是其他的商品界面，可以看到有很多的小块，商品没有出来，小块就代表这些组件已经渲染完成了，但是组件中没有数据，数据是通过网络请求来的，所以我们把网络请求放在mounted当中，因为对于用户来说，页面能显示出来和页面中显示之后，一定要把数据显示出来是两个概念。首先要知道告诉用户这个页面已经存在，然后再告诉用户这个数据你要稍等片刻，等网络请求拿到了数据在显示在页面上。

8、每一个生命周期都有它应用场景，比如说组件卸载，组件卸载之前我们需要做什么？

把页面中不需要的东西，消耗性能的东西都可以删掉，比如说定时器，定时器很消耗性能，尤其是那种循环的定时器，不停的执行，当你的组件都不存在，定时器也就没有意义了，所以可以在beforeUnmount函数当中把定时器清理掉。