vue生命周期

学习了有一段时间了但是还是不能很轻松的利用vue的生命周期进行开发，有好多地方说，“你暂时不需要搞清楚这些…”，我觉得理解通透这个东西确实有点不切实际，但是至少应该让我们在以后的开发中少踩一点坑，所以我查看了许多前辈的经验之谈，希望对以后的开发有所帮助。

以下内容部分摘抄自https://www.jianshu.com/p/410b6099be69

一、vue的生命周期是什么

​ vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。具体方法有：

​ beforeCreate

​ created

​ beforeMount

​ mounted

​ beforeUpdate

​ updated

​ beforeDestroy

​ destroyed

还有activeted和deactivated这两个我还没有用到过，据说需要配合keep-alive来使用。

接下来这张图我真的是叹为观止，很清晰的表达了vue实例被创建到组件被销毁的过程：

​

二、vue生命周期在项目中的执行顺序

​ 这是html代码：

<div id="app">
    {{count}}
    <p><button @click="add">add</button></p>
</div>
<p>
    <button onclick="app.$destroy()">销毁</button>
</p>

​ 这是script代码：

    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
               count:1
            },
            methods:{
                add:function() {
                    this.count++;
                }
            },
            beforeCreate:function(){
                console.log('1-beforeCreate 初始化之前');
            },
            created:function(){
                console.log('2-created 创建完成');
            },
            beforeMount:function(){
                console.log('3-beforeMount 挂载之前');
            },
            mounted:function(){
                console.log('4-mounted 被挂载之后');
            },
            beforeUpdate:function(){
                console.log('5-beforeUpdate 数据更新前');
            },
            updated:function(){
                console.log('6-updated 被更新后');
            },
            beforeDestroy:function(){
                console.log('9-beforeDestroy 销毁之前');
            },
            destroyed:function(){
                console.log('10-destroyed 销毁之后')
            }
        })
    </script>

这样可以很清晰的看到各个生命周期的执行顺序，在网页中运行结果如下：

三、vue中内置的方法属性和生命周期的运行顺序（methods，computed，data，watch，props）

data props computed watch methods他们之间的生成顺序是什么呢？

根据翻看vue源码可知：

props => methods =>data => computed => watch;

总结

​ vue的生命周期，总得来说就是实例的创建到销毁这段时间的一个机制，也是vue框架的数据间的交互通信。平时用的话也没那么难，看源码的实现还是非常复杂的。最后希望大家在2021年都能够牛气冲天！加油呀！