前端应用_Vue_解释生命周期图

最新推荐文章于 2023-01-07 20:55:57 发布

上海_彭彭

最新推荐文章于 2023-01-07 20:55:57 发布

阅读量741

点赞数 1

分类专栏： Vue.js 文章标签： vue 生命周期

本文链接：https://blog.csdn.net/qq_34979346/article/details/99064764

版权

Vue.js 专栏收录该内容

46 篇文章 0 订阅

订阅专栏

组建的生命周期一直都在围绕了三个部分

页面元素展示
内存模版，内存也可以渲染dom树，此时只是渲染了模版并没有真正挂载到页面。
vue 的mode 也就是 vue 的数据层。比如数据层的数据改变了，就意味着页面渲染了吗，答案绝对不可能的，也需要重新渲染一份内存dom树，然后再挂载到页面去渲染。

流程图为如下：

beforeCreate 阶段

此阶段只是初始化vue对象，获取对象的结构，属于预解析下，并没有获取里面的数据。

created 阶段

获取里面的数据，初始化数据结构。里面的data 和方法全部有了。如果你想操作数据层就需要在这个阶段操作。

beforeMount 阶段

次阶段只是在内存中渲染一个dom树，并没有挂载到页面，只是挂载页面的初始化阶段，在内存中已经准备好了，

mounted 阶段

把内存中的dom树拿过来放到页面去渲染，真正的改变了页面显示。

beforeUpdate 阶段

此时数据层的数据已经改变了，但是页面上还是老的，页面没有和最新的数据同步。

Updated 阶段

数据层改不了，也是一样需要渲染一个内存dom树，然后把内存dom 树同步到页面上，也就是完成了 mode >view的更新。

beforeDestroy 阶段

这个阶段也就是从运行阶段过度到销毁阶段，但是这个阶段只是初始化一下，已经准备销毁 data，methods vue里的自定指令，但是也是可以用，

destroyed 阶段

此阶段已经完成了销毁，所有的数据层的数据全部不能用，这个对象在地球上已经不存在了。

请看示例代码如下，结合打印的结果理解：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
     <link href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" >

   <link href="https://cdn.bootcss.com/flat-ui/2.3.0/css/flat-ui.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">

    </script>
</head>
<body>
<div id='p' >

        <input type="button" value="button" @click="show1">
        <p id="pp">  {{msg}}</p>


</div>

<div>

    <script>
          var vue=new  Vue(
            {
                el: '#p',
                data: {
                    msg:'突然好想你',
                },
                methods: { 
                    show1: function(){
                      
                        this.msg="这个已经代表我更新了，请注意，不再是以前的我了"
                    },
                    show: function(){
                        console.log("我是一个方法已经被调用了")
                        
                    }         
                }, 
                beforeCreate(){
                    console.log("创建之前的data message，beforCreated显示的为：>>>"+this.msg)
                    console.log("创建之前的方法，beforeCreated显示的为：>>>"+this.show)
                    //创建之前的data message，beforCreated显示的为：>>>undefined
                    //创建之前的方法，beforeCreated显示的为：>>>undefined
                },
                created(){
                    console.log("创建之前的data message，created显示的为：>>>"+this.msg)
                    this.show()
                    //创建之前的data message，created显示的为：>>>突然好想你
                    // 我是一个方法已经被调用了

                },
                beforeMount(){
                    console.log("beforeMount 看是否能取到值，结果为："+document.getElementById("pp").innerText)
                    //beforeMount 看是否能取到值，结果为：{{msg}}
                },
                mounted(){
                    console.log("Mount 看是否能取到值，结果为："+document.getElementById("pp").innerText)
                    //Mount 看是否能取到值，结果为：突然好想你
                },
                beforeUpdate(){
                    console.log("beforeUpdated页面的值，结果为："+document.getElementById("pp").innerText)
                    console.log("beforeUpdated model 里面的值为"+ this.msg)
                    //beforeUpdated页面的值，结果为：突然好想你
                     //beforeUpdated model 里面的值为这个已经代表我更新了，请注意，不再是以前的我了
                },
                updated(){
                    console.log("Updated页面的值，结果为："+document.getElementById("pp").innerText)
                    console.log("update model 里面的值为"+ this.msg)\
                    //Updated页面的值，结果为：这个已经代表我更新了，请注意，不再是以前的我了
                    //update model 里面的值为这个已经代表我更新了，请注意，不再是以前的我了
                },

            }
        )
    </script>
</div>
</body>
</html>

再看不明白请看这个生命周期图：

在这里插入图片描述