Vue生命周期

最新推荐文章于 2024-09-24 08:43:56 发布

weixin_46384785

最新推荐文章于 2024-09-24 08:43:56 发布

阅读量150

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_46384785/article/details/105081099

版权

Vue生命周期

1.生命周期图示
每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁在这里插入图片描述
可以看到在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">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./base/vue.js"></script>
</head>
<body>
    
    <div id="app"> 
        <my-component></my-component>
    </div>
  

    <!--定义组件的模板结构-->
    <template id="my-component">
        <div>
            <h1 id="title">hello---------{{msg}}</h1>
            <p><input type="text" v-model="msg"></p>
        </div>
    </template>
    <script>
        //一个组件或者实例的生命周期都是通过new开始的   
        Vue.component("my-component",{
            template:"#my-component",
            data(){
                return {
                    msg:1
                }
            },
            beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            },
            created(){
                console.log("created...")
                console.log(this.msg,document.getElementById("title"))
            },
            beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },
            mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },
            beforeUpdate(){
                console.log("beforeUpdate....")
            }
        })
        new Vue({}).$mount("#app");
    </script>
</body>
</html>

#初始化阶段:
在beforeCreate和created钩子函数之间的生命周期

//初始化的时候,这里立马执行了,所以这里的钩子函数是拿不到数据,真实的dom节点也是null的.
beforeCreate(){
                console.log("beforeCreate....")
                console.log(this.msg,document.getElementById("title"))
            },
           //此时这个钩子函数内部数据已经挂载,可以拿到数据,，但是真实的dom结构还没有渲染出来。所以通常会在此钩子函数里面进入ajax的异步操作，另外还可以做一些初始化事件的绑定
            created(){
                console.log("created...")
                console.log(this.msg,document.getElementById("title"))
            }, 
//生成好了虚拟dom，然后在render函数里面替换对应的el，渲染成真实dom节点
              beforeMount(){
                console.log("beforeMount....")
                console.log(this.msg,document.getElementById("title"))
            },
            //mounted钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了，真实的dom也已经渲染出来了
             mounted(){
                console.log("mounted.....")
                console.log(this.msg,document.getElementById("title"))
            },

#运行中阶段:
在beforeUpdate和updated钩子函数之间的生命周期
在这里插入图片描述

当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数。

//运行时钩子函数初始化阶段是不会主动执行的
         //只有dom挂载完毕了，然后再去当数据发生变化的时候，beforeUpdate这个钩子函数才会执行
 beforeUpdate(){
                console.log("beforeUpdate....")
            },
            //当数据发生改变的时候，引发虚拟dom的对比，虚拟dom对比完成后，再去渲染真实的dom结构
                //当真实的dom结构渲染完成后，内部才会执行updated钩子函数虚,拟dom重新渲染,并且应用更新
            updated() {
console.log('updated')
}

销毁阶段：
beforeDestroy和destroyed钩子函数间的生命周期,
在这里插入图片描述

实例销毁后调用，调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁,

beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
beforeDestroy(){
 console.log("beforeDestroy")
                console.log(this.msg,document.getElementById("title"))
},
destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
destroyed(){
console.log("destroyed")
                console.log(this.msg,document.getElementById("title"))
}