戳这里！五分钟搞懂Vue生命周期

最新推荐文章于 2022-04-21 10:19:40 发布

在逃前端练习生

最新推荐文章于 2022-04-21 10:19:40 发布

阅读量215

点赞数 1

分类专栏：知识分享文章标签： vue vue.js html javascript css

本文链接：https://blog.csdn.net/weixin_43000686/article/details/108879860

版权

知识分享专栏收录该内容

1 篇文章 0 订阅

订阅专栏

关于Vue生命周期

先上图
------------------图源Vue官网（https://cn.vuejs.org/）

来自Vue官网的生命周期图

生命周期可以分为三个阶段
①创建和挂载阶段
②更新阶段
③销毁阶段
下面来详细讲解一下
创建和挂载阶段

new Vue() //第一步
//2.加载生命周期函数
//3.调用beforeCreate()方法
//这里需要注意的是，这个方法使用不了数据、方法以及DOM操作
//4.读取Vue实例的配置项，加载数据方法、监听
//5.调用created()方法
//6.判断是否有el配置项，没有的话等待$mount()执行获得el
//7.判断是否有template配置项，如果没有，则使用el.outerHTML 当成template
//8.调用render函数来渲染DOM
//9.调用beforeMount()方法
//10.使用渲染好的template替换el
//11.调用mounted()
//12.vue实例可以正常工作啦~

更新阶段

//1.当数据发生变化时，数据监听回调被调起
//2.如果dom使用了该属性，调用beforeUpdate()
//3.重新渲染dom
//4.调用updated()方法
//5.调用$nextTick来监听具体由什么原因导致的dom更新

销毁阶段

//1.当实例调用$destroy()
//2.这时实例进入销毁阶段
//3.要调用beforeDestroy()方法，移除监听事件、外部对实例内部的引用 （不移除的话，即使实例销毁了，监听事件和引用还会一直存在）
//4.vue实例内部产生的引用和监听也被移除（这一步是vue内部自己完成的）
//5.调用destroy()方法

下面给一个实例来看看具体是怎么实现的

//完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app" class="one">
        <h1 ref="h1">{{message}}</h1>
        <h1>{{value}}</h1>
        <h2 ref = "h2">test h2</h2>
        <h3 ref = "h3">test h3</h3>
        <h4 ref = "h4">test h4</h4>
        <ul>
            <li v-for="item in 5" ref = "item">
                {{item}}
            </li>
        </ul>
        <button @click="modifyAction">修改message</button>
        <button @click="modifyValueAction">修改value</button>
    </div>

    <script src="./js/vue.js"></script>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'hello',
                value:'123',
                list:[]
            },
            // template:`
            //     <div id="app" class ="two">
            //         <h1>{{message}}</h1>    
            //     </div>
            // `,
            computed:{

            },
            watch:{
                message(){
                    console.log('message变化了..');
                    this.$nextTick(()=>{
                        console.log('nextTick.....');
                    });
                }
            },
            methods:{
                testAction(){
                    alert(1);
                },
                modifyAction(){
                    this.message = 'hi~';
                    // 数据发生变化,dom更新后，立即调用
                    this.$nextTick(()=>{
                        console.log('nextTick...');
                    });
                },
                modifyValueAction(){
                    this.value = 'abcd';
                    this.$nextTick(()=>{
                        console.log('nextTick...');
                    });
                }
            },
            beforeCreate(){
                console.log('beforeCreate...');
                console.log(this.message);
                // this.testAction();
            },
            created(){
                console.log('created...');
                console.log(this.message);
                // this.testAction();
                console.log(document.querySelector('h1').innerText);
            },
            beforeMount(){
                console.log('beforeMount....');
            },
            mounted(){
                console.log('mounted......');
                // mounted()方法可以操作dom 但是得使用$refs 不要使用document
                console.log(this.$refs);
            },
            beforeUpdate(){
                console.log('beforeUpdate....');
                console.log('innerText:',this.$refs.h1.innerText);
                console.log(this.message);
            },
            updated(){
                console.log('updated....');
                console.log(this.$refs.h1.innerText);
                console.log(this.message);
            },
            beforeDestroy(){
                console.log('beforeDestory...');
            },
            destoryed(){
                console.log('destoryed...');
            }
        });

        // setTimeout(()=>{
        //     // 动态挂载vue实例
        //     app.$mount('#app');
        // },2000);
    </script>
</body>
</html>