Vue生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_35976650/article/details/102750711

生命周期是指的Vues实例的生命周期，即 Vue实例从创建、使用、到销毁的过程。

Vue在实例的这个过程提供了一系列的生命周期钩子函数。
在这里插入图片描述
图来源于官网

1、准备期

进行一些初始化操作，加载校验数据。

beforeCreate：实例被完全创建出来之前会执行钩子函数，data 和 method数据未加载
created：实例已被创建出来，data 和 methods 中的数据可以使用

2、创建期

beforeMount：此时模板已在内存中编辑完成了，但尚未渲染到页面中去
mounted：表示内存中的模板已经被渲染好，模板数据已被替换，是实例创建期间的最后一个是生命周期函数，当执行完mounted了，实例就被完全创建好，如果没有其他操作，他将一直存在在内存中

3、运行期

运行期的钩子函数会执行零次或多次。

beforeUpdate：表示数据被更新了，但界面还没有被更新
updated：表示数据和data数据已经同步，页面已更新

4、销毁阶段

基本不会用到。

beforeDestory：当执行beforeDestroy()钩子函数的时候，Vue实例进入到销毁阶段，此时，实例身上所有的data和所有的methods，以及过滤器、指令………都处于可用状态，还没有真正执行销毁的过程.
destroyed：当执行到destroyed()函数的时候，组件已经被完全销毁了，此时，组件中所有的数据、方法、指令、过滤器.….都已经不可用了

5、示例

<body>
<div id="app">
    <input type="button" value="修改msg" @click="msg='No'">
    <h3 id="h3">{{ msg }}</h3>
</div>

<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msg: 'ok'
        },
        methods: {
            show() {
                console.log('执行了show()方法...');
            }
        },
        
        // 准备期
        beforeCreate(){
            // 注意： 在beforeCreate()生命周期函数执行的时候，data 和 methods 中的数据都还没有被初始化
            // console.log(this.msg);
            // this.show();
        },
        created() {
            console.log(this.msg);
            this.show();
        },
        
        
        // 创建期
        beforeMount() {
            // 注意：该函数执行时，页面中的元素还没有被真正替换，仍为一些模板字符串
            console.log(document.getElementById('h3').innerText);  // {{ msg }}
        },
        mounted() {
            console.log(document.getElementById('h3').innerText);  // ok
        },
        
        
        // 运行期
        beforeUpdate(){
            console.log('界面上元素的内容： ' + document.getElementById('h3').innerText);
            console.log('data中的 msg 的数据是：' + this.msg);
            // 界面上元素的内容： ok
            // data中的 msg 的数据是：No
            // 结论： 执行beforeUpdate()函数时，页面上的数据和内存中data的数据不同步
        },
        updated(){
            console.log('界面上元素的内容： ' + document.getElementById('h3').innerText); // No
            console.log('data中的 msg 的数据是：' + this.msg);  // No
        },


        // 销毁期
        beforeDestory() { },
        destroyed() { }
    });
</script>
</body>