vue生命周期

最新推荐文章于 2022-10-31 10:18:26 发布

@碧水流沙

最新推荐文章于 2022-10-31 10:18:26 发布

阅读量597

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/weixin_43861707/article/details/105084098

版权

Vue生命周期

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。——官方文档

生命周期图示

在这里插vue
vue生命周期中有许多钩子函数分别是：

beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
beforeDestroy
destroyed

实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <my-component>123</my-component>
    </div>

    <template id="my-component">
        <div>
            <h1 id="title">hello----{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
            <button @click="destroy">destroy</button>
        </div>
    </template>

    <script src="../base/vue.js"></script>
    <script>
        


        //初始化阶段
        //1.vue中组件的生命周期 通过new初始化开始的
        //2.在实例化后会 组件或者实例的内部 会进行一些初始化的事件 并进行生命周期的配置
        //页面的真实DOM节点并没有被 挂载出来
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return{
                    msg:1
                }
            },
            methods:{
                destroy(){
                    this.$destroy()
                }
            },
            //3.beforeCreate 在初始化的时候会自动执行，函数内部获取不到数据(并没有进行数据劫持)
            beforeCreate(){
                console.log("beforeCreate-----")
                console.log(this.msg,document.getElementById("title"))//undefined null
            },
            //4.created 函数中内部数据 可以被挂载，但真实DOM并没有被渲染出来
            //如果 同步更改数据，并不会去影响运行中的 钩子函数执行
            //我们可以在created 钩子函数中进行初始事件的绑定 还可以进行ajax操作等
            created(){
                // this.msg=123456
                console.log("created-------------")
                console.log(this.msg,document.getElementById("title"))//1 null
            },
            //5.首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
            //6.如果vue实例中 具有template ,将其作为模板编译成render函数。如果没有template，就使用外部Html作为模板编译。
            //template优先级大于 外部Html


            //7.beforeMount 函数中此时真实DOM将被渲染 但还没被渲染
            //也可以 ajax操作和初始化事件绑定
            beforeMount(){
                console.log("beforeMount------")
                console.log(this.msg,document.getElementById("title"))//1 null
            },

            //8.生成了 虚拟DOM ，之后再rander里编译替换对应的el，渲染真实DOM
            //相当于rander内部进行了初始化渲染操作

            //9.mounted 函数是初始化阶段 的最后一个 钩子函数 。数据挂载 并且，真实DOM渲染出来了
            //此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。
            mounted(){
                console.log("mounted------")
                console.log(this.msg,document.getElementById("title"))//1  <h1 id="title">hello----1</h1>
            },
            //10.运行时钩子函数初始化阶段不会主动执行。当真实DOM挂载完之后，改变数据beforeUpdate函数才会执行.
            //函数里获取的DOM数据 是更新前的内容
            beforeUpdate(){
                console.log("beforeUpdate-----------")
                console.log(document.getElementById("title").innerHTML)
            },
            //11.updated函数 获取的数据 是更新后的数据
            //生成新的虚拟DOM，与之前的虚拟DOM进行对比，使用diff算法对比后进行真实DOM的渲染
            updated(){
                console.log("updated---------")
                console.log(document.getElementById("title").innerHTML)
            },
            //12.beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
            beforeDestroy(){
                console.log("beforeDestroy------------")
            },
            //13.destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
            destroyed(){
                console.log("destroyed------------")
            }
        })
        new Vue({}).$mount("#app")
    </script>
</body>
</html>

一个完整的vue生命周期如下：

初始化阶段
vue中组件的生命周期通过new初始化开始的
在实例化后会组件或者实例的内部会进行一些初始化的事件并进行生命周期的配置。
此时页面的真实DOM节点并没有被挂载出来。

1.beforeCreate 钩子函数在初始化的时候会自动执行，函数内部获取不到数据(并没有进行数据劫持)。
2.created 钩子函数内部的数据已经被挂载了，但真实DOM并没有被渲染出来。
如果同步更改数据，并不会去影响运行中的钩子函数执行。
我们可以在created 钩子函数中进行初始事件的绑定还可以进行ajax操作等。
实例打印出的结果：
在这里插入图片描述
3.created钩子函数和beforeMount间的生命周期

(1).首先会判断对象是否有el选项。如果有的话就继续向下编译，如果没有el选项，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
(2).如果vue实例中具有template ,将其作为模板编译成render函数。如果没有template，就使用外部Html作为模板编译。
(3). template优先级大于外部Html

4. beforeMount和mounted 钩子函数间的生命周期
在这里插入图片描述
(1).beforeMount函数中此时真实DOM将被渲染但还没被渲染。也可以 ajax操作和初始化事件绑定。
(2). 在生成了虚拟DOM ，之后再rander里编译替换对应的el，渲染真实DOM。相当于rander内部进行了初始化渲染操作。
(3).mounted 函数是初始化阶段的最后一个钩子函数。数据挂载并且，真实DOM渲染出来了。此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。

实例打印出的结果：
在这里插入图片描述
5.beforeUpdate钩子函数和updated钩子函数间的生命周期

(1).运行时钩子函数初始化阶段不会主动执行。当真实DOM挂载完之后，改变数据,beforeUpdate函数才会执行。函数里获取的DOM数据是更新前的内容。
(2).updated函数获取的数据是更新后的数据。生成新的虚拟DOM，与之前的虚拟DOM进行对比，使用diff算法对比后进行真实DOM的渲染。

实例改变数据打印出的结果：
在这里插入图片描述

6.beforeDestroy和destroyed钩子函数间的生命周期

(1).beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
(2).destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

当我们在实例中点击 destory按钮时也就是调用了 vm.$destory()函数。此时打印结果如下：
在这里插入图片描述

此时实例已经被销毁了。

参考文章

@碧水流沙

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期

Vue生命周期每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。——官方文档生命周期图示vue生命周期中有许多钩子函数分别是：beforeCreatecreatedbeforeMountmou...
复制链接

扫一扫