钩子函数	说明
beforeCreate	在实例初始化之后，数据观测和watch/event事件配置之前被调用
created	在实例创建完成后被立即调用，在这一步，实例已经完成数据观测、属性和方法的运算，以及watch/event事件回调。挂载阶段还未开始，$el属性尚不可用。多用于初始化数据或方法
mounted	实例被挂载后调用，这时el被新创建的vm.$el替换。如果实例挂载到了一个文档内的元素，当mounted被调用时，vm.$el也在文档内。在模板渲染成html后使用（初始化页面完成后，再对dom节点进行一些需要的操作）
beforeUpdate	数据更新时调用。适合在更新前访问现有的DOM，比如手动移除已添加的事件监听器
updated	数据修改会导致虚拟DOM重新渲染，在渲染后调用
activated	被keep-alive缓存的组件激活时调用
deactivated	被keep-alive缓存的组件停用时调用
beforeDestroy	实例销毁之前调用，在这一步，实例仍然可用
destroyed	实例销毁后调用。该钩子被调用后，对应vue实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>生命周期钩子函数</title>
    </head>
    <body>
        <div id="app">
            <p>{{msg}}</p>
        </div>
        <!--引入vue文件-->
        <script src="https://unpkg.com/vue@next"></script>
        <script>
            //创建一个应用程序
            const vm = Vue.createApp({
                data(){
                    return{
                        msg: '白日依山尽，黄河入海流'
                    }
                },
                beforeCreate(){
                    console.log('beforeCreate');
                },
                created(){
                    console.log('created');
                },
                beforeMount(){
                    console.log('beforeMount');
                },
                mounted(){
                    console.log('mounted');
                },
                beforeUpdate(){
                    console.log('beforeUpdate');
                },
                updated(){
                    console.log('updated');
                }
            }).mount('#app');
        setTimeout(function(){
            vm.msg = '无边落木萧萧下，不尽长江滚滚来';
        },4000);
        </script>
    </body>
</html>

运行以上代码，可以在网页控制台看到内容改变前打印了前四个函数，之后内容改变之后又打印了最后两个函数。

标签 PS, return, 修改

vue生命周期钩子函数