史上最全vue生命周期的讲解

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="app">

    </div>
</body>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{

        },
        methods:{

        },
        beforeCreate(){
            //  这是我们遇到的第一个生命周期函数，表示实例被完全创建出来之前，会执行他
            //  注意：在beforeCreate生命周期函数执行的时候，data和methods中的数据还没有被初始化
        },
        created(){
            //  这是遇到的第二个生命周期函数
            //  在created中，data和methods都已经被初始化好了
            //  如果要调用methods中的方法，或者操作data中的数据，最早只能在created中操作
        },
        beforeMount(){
            //  这是遇到的第三个生命周期函数，表示模板已经在内存中编译完成，但是尚未把模板渲染到页面中去
            //  在beforeMount执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
        },
        mounted(){
            //  这是遇到的第四个生命周期函数，表示内存中的模板，已经真实的挂载在页面中，用户已经可以看到渲染好的页面了
            //  mounted是实例创建期间德 最后一个生命周期函数，当执行完mounted就表示实例已经被完全创建好了
            // ，此时如果没有其他操作的话，这个实例就在我们的内存当中
        },
        //  接下来是运行中的两个事件
        beforeUpdate(){
            //  这时候表示我们的界面还没有被更新【数据被更新了吗？数据肯定被更新了】
            //  得出结论：当执行beforeUpdate的时候，页面中的显示数据还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
        },
        updated(){
            // updated 事件执行的时候，页面和data数据已经保持同步了，都是最新的
        },
        beforeDestroy(){
            //  当执行beforeDestroy钩子函数的时候Vue实例就已经从运行阶段，进入到了销毁阶段；
            //  当执行beforeDestroy的时候，是实例身上所有的data和所有的methods，以及过滤器，指令......都
            //  处于可用状态，此时还没有真正的执行销毁的过程
        },
        destroyed(){
            //  当执行到destroyed函数的时候，组件已经被完全销毁了，此时，组件中所有的数据，方法，指令，过滤器......
            //  都已经不可用了
        }
    })
</script>
</html>
生前无需久睡，死后自会长眠，努力解决生活中遇到的各种问题，不畏将来，勇敢面对，加油，你是最胖的，哈哈哈