Vue框架2.0 基础知识(4) 生命周期详细介绍

最新推荐文章于 2024-05-13 09:17:36 发布

放学后J

最新推荐文章于 2024-05-13 09:17:36 发布

阅读量574

点赞数 1

文章标签： vue.js javascript 前端前端框架

本文链接：https://blog.csdn.net/weixin_46256704/article/details/123041809

版权

生命周期是什么？
在官网中我们可以看到这一段定义：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。

生命周期重点：
beforeCreate() 创建实例之前

created() 创建实例对象后

beforeMount() 在template挂载之前执行

mounted() 在虚拟DOM真正挂载完毕，常常在这里操纵的DOM元素

beforeUpdate()在数据更新之前

updated()在数据更新完毕

befpreDestroy() 这里常常有一个操作就是清除定时器，清除事件处理函数，

destroyed() 销毁之后

表述
了解之前，我们先贴上一张翻译过后的生命周期图，从图上，我们再一步一步来理解vue生命周期。

注：官网原图

详细描述：

new Vue()实例化一个vue实例，然后init初始化event 和 lifecycle，其实这个过程中分别调用了3个初始化函数（initLifecycle(), initEvents(), initRender()），分别初始化了生命周期，事件以及定义createElement函数，初始化生命周期时，定义了一些属性，

比如表示当前状态生命周期状态得_isMounted ，_isDestroyed ，_isBeingDestroyed，表示keep-alive中组件状态的_inactive，而初始化event时，实际上就是定义了$once、$off、$emit、$on几个函数。而createElement函数是在初始化render时定义的（调用了initRender函数）
执行beforeCreate生命周期函数(创建vue实例完成之前所执行的)
beforeCreate执行完后，会开始进行数据初始化，这个过程，会定义data数据，方法以及事件，并且完成数据劫持observe以及给组件实例配置watcher观察者实例。这样，后续当数据发生变化时，才能感知到数据的变化并完成页面的渲染
执行created生命周期函数，所以，当这个函数执行的时候，我们已经可以拿到data下的数据以及methods下的方法了，所以在这里，我们可以开始调用方法进行数据请求了
created执行完后，我们可以看到，这里有个判断，判断当前是否有el参数(这里为什么需要判断，是因为我们后面的操作是会依赖这个el的，后面会详细说)，如果有，我们再看是否有template参数。如果没有el，那么我们会等待调用$mount(el)方法(后面会详细说)。
确保有了el后，继续往下走，判断当有template参数时，我们会选择去将template模板转换成render函数（其实在这前面是还有一个判断的，判断当前是否有render函数，如果有的话，则会直接去渲染当前的render函数，如果没有那么我们才开始去查找是否有template模板），如果没有template，那么我们就会直接将获取到的el（也就是我们常见的#app，#app里面可能还会有其他标签）编译成templae, 然后在将这个template转换成render函数。
之后再调用beforMount，也就是说实际从creted到beforeMount之间，最主要的工作就是将模板或者el转换为render函数。并且我们可以看出一点，就是你不管是用el，还是用template, 或者是用我们最常用的.vue文件(如果是.vue文件，他其实是会先编译成为template)，最终他都是会被转换为render函数的。
beforeMount调用后，我们是不是要开始渲染render函数了，首先我们会先生产一个虚拟dom（用于后续数据发生变化时，新老虚拟dom对比计算），进行保存，然后再开始将render渲染成为真实的dom。渲染成真实dom后，会将渲染出来的真实dom替换掉原来的vm.$el（这一步我们可能不理解，请耐心往下看，后面我会举例说明）,然后再将替换后的$el append到我们的页面内。整个初步流程就算是走完了
之后再调用mounted，并将标识生命周期的一个属性_isMounted 置为true。所以mounted函数内，这个时候我们是可以操作dom的，因为这个时候dom已经渲染完成了。
再之后，只有当我们状态数据发生变化时,我们在触发beforeUpdate，要开始将我们变化后的数据渲染到页面上了（实际上这里是有个判断的，判断当前的_isMounted是不是为ture并且_isDestroyed是不是为false，也就是说，保证dom已经被挂载的情况下，且当前组件并未被销毁，才会走update流程）
beforeUpdate调用之后，我们又会重新生成一个新的虚拟dom(Vnode)，然后会拿这个最新的Vnode和原来的Vnode去做一个diff算，这里就涉及到一系列的计算，算出最小的更新范围，从而更新render函数中的最新数据，再将更新后的render函数渲染成真实dom。也就完成了我们的数据更新
然后再执行updated，所以updated里面也可以操作dom，并拿到最新更新后的dom。不过这里我要插一句话了，mouted和updated的执行，并不会等待所有子组件都被挂载完成后再执行，所以如果你希望所有视图都更新完毕后再做些什么事情，那么你最好在mouted或者updated中加一个$nextTick（），然后把要做的事情放在$netTick()中去做（至于为什么，以后讲到$nextTick再说吧）
再之后beforeDestroy没啥说的，实例销毁前，也就是说在这个函数内，你还是可以操作实例的
之后会做一系列的销毁动作，解除各种数据引用，移除事件监听，删除组件_watcher，删除子实例，删除自身self等。同时将实例属性_isDestroyed置为true
销毁完成后，再执行destroyed

代码详情：

<body>
    <div id="app">
        <h1>{{msg}}</h1>
        <button @click="modify">修改数据</button>
        <button @click="destroy">销毁实例对象</button>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
            el:"#app",
            tmplate:"<h2>哈哈哈</h2>",
            data(){
                return {
                    msg:"helloworld",
                    timer:null
                }
            },
            //在创建app实例之前
            beforeCreate(){
                //这个函数是在创建这个app实例之前 执行了
                // debugger
            },
            //这个函数是在创建这个app实例创建完毕 执行了
            created(){
                this.timer = setInterval(()=> {
                    console.log("这是一个定时器")
                }, 1000)
                // 这个函数是 在实例对象创建完毕执行执行了
                console.log(this.msg)
                // debugger
            },
            beforeMount(){
                //debugger
                console.log("在template还未挂载之前执行");
            },
            mounted(){
                //debugger
 
                console.log("在虚拟DOM真正挂载完毕");
                //DOM操作可以写在这个里面
            },
            beforeUpdate(){
                //debugger
                console.log("在数据更新之前执行");
            },
            updated(){
                //debugger
                console.log("在数据更新之后执行");
            },
            beforeDestroy(){
                //这里可以些什么代码？
                //清除定时器，清除事件处理函数
                clearInterval(this.timer)
            },
            destroyed(){
                console.log("摧毁完毕");
            },
        })
 
         //没有el的时候可以使用$mount
        //  app.$mount(document.querySelector("#app"))
    </script>
</body>

效果图：