通俗易懂的理解vue组件的生命周期

最新推荐文章于 2024-04-05 03:14:43 发布

我心中的妖怪长大了

最新推荐文章于 2024-04-05 03:14:43 发布

阅读量161

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/weixin_42786389/article/details/105083006

版权

说到vue组件的生命周期最最经典得就是官网的流程图了,下面是根据官网的流程图,大概的把钩子函数都执行了一遍.

前期需要了解的工作:

看官网流程图(下面有)
了解组件的生命周期大概分为三个阶段:初始化阶段,运行阶段,销毁阶段
初始化阶段:
beforeCreate() ---------创建前-这个钩子函数初始化的时候立马执行,次钩子函数内是拿不到数据的页面真实dom也没有挂载
created()-------------创建后–钩子函数内部数据已经挂载了,但是真实的dom节点还是没有渲染出来,同步去更改数据的话,是不会影响运行中的钩子函数的执行的(运行中的钩子函数是不会执行的), 通常会在此钩子函数里面进行ajax的操作,另外还可以做一些初始化事件的绑定,接下来就是组件或者实例去找各自的模板
beforeMount()----------挂载前-代表dom马上要被渲染出来了,但是页面还没有真正被渲染出来,可以在此钩子函数里面进行ajax的操作,另外还可以做一些初始化事件的绑定----->生成好了虚拟dom,然后在render函数里面替换相应的el,渲染成真实的dom,相当于在render里面做了初始化渲染操作
mounted()-------挂载后-初始化阶段最后一个函数,数据已经挂载完毕,在真实的dom里面进行渲染,这个钩子可以用来做一些实例化的相关操作(拖拽等)
运行阶段:
beforeUpdate()-------------更新前–运行时的钩子函数初始化阶段是不会主动执行的,只有dom挂在完毕了,数据发生变化,被渲染之前触发,真实dom是更新之前的内容,但是虚拟dom上是最新的值,其中diff算法对比
updated()-------更新后-这个钩子函数里面的获取的内容是更新后的内容,真实dom中的数据和内存中的data趋于一致
销毁阶段
beforeDestroy()----------销毁前-当组件销毁的时候就会触发执行,vm.$destroy()的时候组件就被销毁了
这个钩子函数销毁之前,可以做一些善后操作,可以清除一些事件绑定,定时器
destroyed()---------------销毁后-组件一旦被销毁了,组建的dom解构还是存在的,只是事件的数据双向绑定,监听失效了

vue生命周期
下面是代码运行的实例:

<div id="app">
    <zujiana></zujiana>
</div>
    <template id="zujiana">
        <div>

            <h1 id="title">{{msg}}</h1>
        <hr/>
        <input type="text" v-model=msg>
        </div>
        
    </template>
        
    <script>
        Vue.component('zujiana',{
            template:"#zujiana",
            data() {
                return {
                    msg:1
                }
            },
            //这个钩子函数初始化的时候立马执行,此钩子函数获取不到数据
            //同时页面中的节点也没有挂载出来
            beforeCreate() {
                console.log("beforCreate")
                console.log(this.msg,document.getElementById('title'))
            },
            //钩子函数内部的数据已经被挂载出来了,但是真实的dom节点还是没有渲染出来
            //这个钩子函数里面,如果同步去更改数据的话,运行中的钩子是不会执行的
            //通常会在此钩子函数里面进行ajax的异步操作,
            //另外还可以做一些初始化事件的绑定
            created() {
                // this.msg=12000000000
                console.log("created")
                console.log(this.msg,document.querySelector('#title'))
            },
            //接下来的过程就是组件或者实例去找各自的魔板,然后将其编译成虚拟dom,即将放入render中进行初始化渲染操作
            //beforeMount代表DOM马上就要被渲染出来了,但是还没有真正的页面中渲染出来
            //此钩子函数与created钩子函数基本一致,可以做ajax与初始化事件的绑定操作
            //不能获取到真正的dom节点
            beforeMount() {
                console.log('beforemount')
                console.log(this.msg,document.querySelector('#title'))
            },
            //生成好了虚拟dom,然后再render函数里面替换对应的el,渲染成真实的DOM节点
            //相当于在render()函数里面做了一个初始化渲染的操作
            //```````可以获取到真正的dom节点
            //mounte钩子函数是初始化阶段的最后一个钩子函数
            //数据已经挂载完毕了,真实的Dom也已经渲染出来了
            //这个钩子函数里面可以用来做一些真实的dom操作,比如拖拽等
            mounted() {
                console.log('mounted')
                console.log(this.msg,document.querySelector('#title'))

            },
            //beforeUpdate钩子函数是初始化阶段不会主动运行的
            //只有DOM挂载完毕了,然后当数据在发生变化时,这个钩子函数才会执行
            beforeUpdate() {
                console.log('beforeUpdate')
                console.log(this.msg,document.querySelector('#title'))
            },
            //当数据发生改变时,引发虚拟DOM的对比,虚拟DOM对比完成后,再去渲染真实的Dom结构
            //当真实的DOM结构完成以后,内部才会执行updated钩子函数
            updated() {
                console.log('updated')
                console.log(this.msg,document.querySelector('#title'))
            },
        })



    new Vue({}).$mount("#app")
    </script>

关于没有执行的销毁阶段: