zoukankan      html  css  js  c++  java
  • vue—生命周期的基本介绍

    Vue生命周期:

      什么是生命周期:

        Vue 实例从创建到销毁的过程,就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程,我们称这是 Vue 的生命周期。

      什么是钩子函数:

        因为过程都是分一个阶段一个阶段的并且都是相连的

      生命周期的四个阶段:

        create(初始)、mount(加载)、update(更新)、destroy(销毁)

      生命周期的八个过程:

        beforeCreate(){}  实例初始化之前  数据没有加载 页面没有显示

                            debugger; 断点调试

                                         往往在这个阶段做loading 请求状态

        Create(){}     实例初始化后,请求到了数据,事件,属性等,但是没有加载,页面依然没有显示,在这个阶段,往往发送 ajax请求,http请求

                                         create---beforeMount之间 vue会在options中查找有没有el选项,有就把它作为模板,没有就通过vm.$mount()  去挂载

                                                       created之后有个判断,先看你有没有el属性,在看看有没有模板属性,有模板属性呢,就会把模板上的东西渲染出去,没有模板属性呢,就把el上的东西当做模板渲染出去,

                                                       created-boforeMount的过程就是找模板,而模板都是虚拟的

        beforeMount(){}   vue会将el对应的模板 加到$el中去,但是还没有挂载出去,页面没有显示

        mounted(){}     页面加载出来

        beforeUpdate(){}   数据更新前,在虚拟dom中使用differ算法,在内存中实现的,mounted之前的过程就不管了。如果想看属性的变化,

                    在这个阶段可以使用watch(属性监听)这个方法监听属性

        update(){}      更新完了,在渲染,谁改变了渲染谁,不是整个dom树重新渲染

        beforeDestroy(){}   销毁之后

                    destroy销毁,实例销毁需要人为触发

                                    销毁:之前渲染好的保持不变,保留下来,后面再使用这个实例就不起作用了

                     Vm.$destroy()   进行销毁

        destroyed(){}     销毁之后

      简述一下每个周期具体适合那些场景:

        beforeDestroy:可以在这加个loading事件,在加载实例是触发

        created:初始化完成时的事件写在这里,如在这结束loading事件,异步请求也适宜在这里调用

        mouted:挂载元素,获取到DOM节点

        updated:如果对数据统一处理,在这里写上相应函数

        beforeDestroy:可以做一个确认停止事件的确认框

        nextTick:更新数据后立即操作dom

      嵌套组件的生命周期的执行顺序:

        vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted

      更改组件数据  修改子组件的数据

        vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted ——> son.beforeUpdate ——> son.updated

        组件更新数据 只会调用自己的beforeUpdate 和 updated 不会影响到其他组件的更新钩子

                   如果说父组件获取的子组件中的标签中的内容,这个内容会被子组件修改的,父组件获取的都是修改前的,因为子组件的更新不会在去触发父组件的mounted

                   this.$nextTick()    这个方法是组件中所有的钩子执行完毕之后才会触发(包括子组件)。

        过程:

                             vm.beforeCreate ——> vm.created ——> vm.beforeMount ——> son.beforeCreate ——> son.created ——> son.beforeMount ——> son.mounted ——> vm.mounted ——> son.beforeUpdate ——> son.updated ——> this.$nextTick()

      第一次页面加载会触发哪几个钩子?

        第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

      DOM渲染在 哪个周期中就已经完成了?

        DOM渲染在mounted中就已经完成了

  • 相关阅读:
    java映射
    java线程的一些方法和特性
    java线程通信
    java多线程同步
    java类对象概述
    JavaScript的对象——灵活与危险
    node.js项目中使用coffeescript的方式汇总
    12.2
    12.1
    11.30
  • 原文地址:https://www.cnblogs.com/yanghuiting/p/11580385.html
Copyright © 2011-2022 走看看