精华内容
下载资源
问答
  • 父子组件生命周期顺序 1.渲染:(同步引入(顺序同上)父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted ...

    父子组件生命周期顺序

    1.渲染:(同步引入(顺序同上)父组件的beforeCreate、created、beforeMount --> 所有子组件的beforeCreate、created、beforeMount --> 所有子组件的mounted --> 父组件的mounted
    (异步引入(顺序如下)父组件的beforeCreate、created、beforeMount、mounted --> 子组件的beforeCreate、created、beforeMount、mounted
    2.子组件更新过程 beforeUpdate(父) - beforeUpdate(子)-updated(子)- updated(父)
    3.父组件更新过程 beforeUpdate(父)- updated(父)
    4.销毁过程 beforeDestroy(父)- beforeDestroy(子)- destroyed(子)- destroyed(父)

    展开全文
  • https://www.jianshu.com/p/768d0d1aaf90 创建的时候,子组件创建过程,夹在父组件的 beforeMount, mounted之间。 销毁的时候,子组件销毁过程夹在父组件的beforeDestroy, Destroyed之间。

    https://www.jianshu.com/p/768d0d1aaf90

     创建的时候,子组件创建过程,夹在父组件的  beforeMount, mounted之间。
    销毁的时候,子组件销毁过程夹在父组件的beforeDestroy, Destroyed之间。

     

     

     

    展开全文
  • 本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
  • Vue父子组件生命周期顺序一、Vue生命周期图二、常见的生命周期函数三、代码举例3.1根组件的beforeCreate阶段3.2根组件的Created阶段3.3根组件的beforeMount阶段3.4子组件的beforeCreate、Created、beforeMount、...

    一、Vue生命周期图

    请添加图片描述

    二、常见的生命周期函数

    1. beforeCreate:实例创建前执行。
      el 和 data 都为 undefined,还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。
    2. created:实例初始化完成后执行。
      页面还没开始渲染,不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取,在当前阶段无法与 DOM 进行交互,如果需要,可以通过 $nextTick 来访问 DOM。
    3. beforeMount:挂载前执行。
      el 和 data 都初始化了,虚拟 DOM 已经创建完成,即将开始渲染。
    4. mounted:页面渲染完毕时执行。
      真实的 DOM 挂载完成,可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。
    5. beforeUpdate:数据发生更新时执行。
      此时 Vue 实例中的数据是最新的了,但是页面中的数据还是旧的,可以在此时进一步更改数据,而不会造成重新渲染
    6. updated:数据发生更新导致的 DOM 重新渲染完成时执行。
      此时 DOM 已经更新,可以执行 DOM 相关操作
    7. beforeDestroy:实例销毁前执行。
      实例仍然完全可以使用。在此阶段一般进行善后工作,如清除计时器、解除绑定等。
    8. destroyed:实例销毁完成。
      实例绑定的所有东西都会被解除,如解除事件监听和对 DOM的数据绑定,所有子实例也统统被销毁,组件被拆解将无法使用。改变 data 也不会再重新渲染,但是 DOM 结构依然存在。

    三、代码举例

    <!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>
        <style>
            
        </style>
    </head>   
    <body>
    <div id="app">
        <p>{{message}}</p>
        <keep-alive>
            <my-components :msg="msg1" v-if="show"></my-components>
        </keep-alive>
    </div>
    </body>
    <script src="./js/vue.js"></script>
    <script>
        var child = {
            template: '<div>from child: {{childMsg}}</div>',
            props: ['msg'],
            data: function() {
                return {
                    childMsg: 'child'
                }   
            },
            beforeCreate: function () {
                debugger;
            },
            created: function () {
                debugger;
            },
            beforeMount: function () {
                debugger;
            },
            mounted: function () {
                debugger;
            },
            deactivated: function(){
                alert("keepAlive停用");
            },
            activated: function () {
                console.log('component activated');
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                var state = {
                    'el': this.$el,
                    'data': this.$data,
                    'message': this.message
                }
                console.log(this.$el);
                console.log(state);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                var state = {
                    'el': this.$el,
                    'data': this.$data,
                    'message': this.message
                }
                console.log(this.$el);
                console.log(state);
            },
        };
        var vm = new Vue({
            el: '#app',
            data: {
                    message: 'father',
                    msg1: "hello",
                    show: true
                },
            beforeCreate: function () {
                debugger;
            },
            created: function () {
                debugger;
            },
            beforeMount: function () {
                debugger;
            },
            mounted: function () {
                debugger;    
            },
            beforeUpdate: function () {
                alert("页面视图更新前");
            },
            updated: function () {
                alert("页面视图更新后");
            },
            beforeDestroy: function () {
                console.group('beforeDestroy 销毁前状态===============》');
                var state = {
                    'el': this.$el,
                    'data': this.$data,
                    'message': this.message
                }
                console.log(this.$el);
                console.log(state);
            },
            destroyed: function () {
                console.group('destroyed 销毁完成状态===============》');
                var state = {
                    'el': this.$el,
                    'data': this.$data,
                    'message': this.message
                }
                console.log(this.$el);
                console.log(state);
            },
            components: {
                'my-components': child
            }
        });
    </script>
    </html>
    
    生命周期函数详细
    activatedkeep-alive组件激活时调用
    deactivatedkeep-alive 组件停用时调用

    3.1根组件的beforeCreate阶段

    在这里插入图片描述

    在调用beforeCreate()函数时,只进行了一些必要的初始化操作(例如一些全局的配置和根实例的一些属性初始化),此时data属性为undefined,没有可供操作的数据。

    3.2根组件的Created阶段

    在这里插入图片描述
    调用Created()函数,在这一步,实例已完成以下的配置:数据代理和动态数据绑定(data observer),属性和方法的运算, watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。

    3.3根组件的beforeMount阶段

    在这里插入图片描述
    在这里插入图片描述
    在调用boforeMount()函数前首先会判断对象是否有el选项。如果有的话就继续向下编译,如果没有el选项,则停止编译,也就意味着停止了生命周期,直到在该vue实例上调用vm.$mount(el)。

    在这个例子中,我们有el元素,因此会调用boforeMount()函数,此时已经开始执行模板解析函数,但还没有将$el元素挂载页面,页面视图因此也未更新。在标红处,还是 {{message}},这里就是应用的 Virtual DOM(虚拟Dom)技术,先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

    3.4子组件的beforeCreate、Created、beforeMount、Mounted阶段

    在父组件执行beforeMount阶段后,进入子组件的beforeCreate、Created、beforeMount阶段,这些阶段和父组件类似。beforeMount阶段后,执行的是子组件Mounted阶段,该阶段时子组件已经挂载到父组件上,并且父组件随之挂载到页面中。
    由下图可以知道,在beforeMount阶段之后、Mounted阶段之前,数据已经被加载到视图上了,即$el元素被挂载到页面时触发了视图的更新。
    在这里插入图片描述

    3.5子组件的activated阶段

    我们发现在子父组件全部挂载到页面之后被触发。这是因为子组件my-components被<keep-alive>包裹,随$el的挂载被触发。如果子组件没有被<keep-alive>包裹,那么该阶段将不会被触发。
    在这里插入图片描述

    3.6父组件的mounted阶段

    mounted执行时:此时el已经渲染完成并挂载到实例上。至此,从Vue实例的初始化到将新的模板挂载到页面上的阶段已经完成,退出debugger。

    3.7deactivated、beforeUpdate、updated阶段

    当数据变化后、虚拟DOM渲染重新渲染页面前会触发beforeUpdate()函数,此时视图还未改变。当虚拟DOM渲染页面视图更新后会触发updated()函数。
    在这里插入图片描述
    当修改vm.show = false这个属性时,不仅会触发beforeUpdate、updated函数,还会触发deactivated函数(因为keep-alive 组件停用时调用)。
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    在控制台输入vm.show = false。得到三者的调用顺序分别为beforeUpdate、deactivated、updated。我们可以知道的是deactivated函数的触发时间是在视图更新时触发。因为当视图更新时才能知道keep-alive组件被停用了。

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

    调用app.$destroy()方法即可将其销毁
    在这里插入图片描述
    beforeDestroy钩子函数在实例销毁之前调用。在这一步,实例仍然完全可用。

    destroyed钩子函数在Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁(也就是说子组件也会触发相应的函数)。这里的销毁并不指代’抹去’,而是表示’解绑’。

    销毁时beforeDestory函数的传递顺序为由父到子,destory的传递顺序为由子到父。

    四、总结

    执行顺序:

    1. 挂载阶段
      该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为:
      父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted
      一定得等子组件挂载完毕后,父组件才能挂在完毕,所以父组件的 mounted 在最后。

    2. 子租组件更新阶段
      该过程主要涉及 beforeUpdate、updated 2 个钩子函数。注意,当父子组件有数据传递时,才有这个更新阶段执行顺序的比较。执行顺序为:
      父beforeUpdate -> 子beforeUpdate -> 子updated -> 父updated

    3. 父组件更新过程

      父beforeUpdate ->父updated

    4. 销毁阶段
      该过程主要涉及beforeDestroy、destroyed 2 个钩子函数。执行顺序为:
      父beforeDestroy -> 子beforeDestroy -> 子destroyed -> 父destroyed

    5. 总结
      Vue 父子组件生命周期钩子的执行顺序遵循:从外到内,再从内到外。

    展开全文
  • 主要介绍了vue同步父子组件和异步父子组件生命周期顺序问题,需要的朋友可以参考下
  • Vue组件生命周期主要为8个: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。 其实官方图已经讲明白很多了。包括各个阶段之间做了些什么事情,但在掌握上终归...

    祭出官方图: 

     

     

     Vue组件的生命周期主要为8个: beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。

    其实官方图已经讲明白很多了。包括各个阶段之间做了些什么事情,但在掌握上终归还是有一些模糊的地方。

    下面做了一些梳理。

    个人理解是主要分为三个阶段:

    • 创建阶段(注册实例与挂载): beforeCreate、created、beforeMount、mounted
    • 运行阶段:beforeUpdate、updated
    • 注销阶段:beforeDestroy、destroyed

    以下代码vue分别注册了father和child组件,并在father中调用了child子组件来观察他们的生命周期已经先后关系:

    <!-- HTML部分 -->
    <!-- 父组件挂载 -->
    <div id="app"></div>
    
    <!-- child模板 -->
    <div class="child" @click="updateTest()">
        i'm child <br />
        data: {{data}}
    </div>
    
    <!-- father模板 -->
    <div class="father">
            <button @click="changeDate()">{{tData}}</button>
            <button @click="destroyEl()">destroy</button>
            <child v-if="showChild"></child>
            I'm father
    </div>

     

     

    /*JavaScript部分*/
    
    /*child*/
    var child = Vue.extend({
         template: '#child',
         data(){
           return {
             data: 0
           }
         },
         methods:{
            consoleinfo(){    console.log(this.data)},
            updateTest(){     this.data += 1}
         },
         beforeCreate(){    console.log('child-beforeCreate')},
         created(){        console.log('child-created')},
         beforeMount(){    console.log('child-beforeMount')},
         mounted(){        console.log('child-mounted')},
         beforeUpdate(){    console.log('child-beforeUpdate')},
         updated(){        console.log('child-updated')},
         beforeDestroy(){
             console.log('child-beforeDestroy:')
             this.consoleinfo()
         },
         destroyed(){
             console.log('child-destroyed:')
             this.consoleinfo()
         }
    })   

     

    /*father*/
    new Vue({
        el: '#app',
        template:'#father',
        components:{child},
        data(){
             return {
                 tData: 0,
                 tCom: 'computed',
                 showChild: true
             }
        },
        computed:{
             tComputed(){ return this.tCom}
       },
       methods:{
             consoleinfo(){
                 console.log('data: ' + this.tData)
                 console.log('computed: ' + this.tComputed)
                 console.log('el: ' + this.$el.outerHTML)
             },
             changeDate(){
                 this.tData += 1
                 this.tCom = 'changeComputed'
             },
             destroyEl(){
            //this.showChild = false
                 this.$destroy()
             }
       },
       /**
       创建阶段
       */
       beforeCreate(){
             console.log('beforeCreate:')
             this.consoleinfo()
       },
       created(){
             console.log('created:')
             this.consoleinfo()
       },
       beforeMount(){
             console.log('beforeMount:')
             this.consoleinfo()
       },
       mounted(){
             console.log('mounted:')
             this.consoleinfo()
       },
       /**
       运行阶段
       */
       beforeUpdate(){
             console.log('beforeUpdate:')
             this.consoleinfo()
       },
       updated(){
             console.log('updated:')
             this.consoleinfo()
       },
       /**
       注销阶段
       */
       beforeDestroy(){
             console.log('beforeDestroy:')
             this.consoleinfo()
       },
       destroyed(){
             console.log('destroyed:')
             this.consoleinfo()
       }
    })    

     

     

    接下来看下各个生命周期控制台的输出:

    创建阶段

    beforeCreate:

    在beforeCreate阶段之前,vue做了init初始化的操作。操作包括:

    —— 注册一些vue默认的属性方法事件(例如初始化vue的生命周期 —— 钩子beforeCreate()等)

    因此,在beforeCreate钩子调用时,这些默认属性方法事件已经注册完成,但是vue实例中的data、computed、methods等都未定义:

    —— 图中函数consoleinfo(),报错“not a function”’

    Created:

    beforeCreate与Created之间,实例将定义的data、methods等初始化并进行注入。

    因此在Created阶段,控制台已经能够输出data、computed值,包括控制台输出的方法methods,这些值都已在当前father组件实例中定义生成了。

    —— 此时只是在js操作了vue实例,dom中的元素还并未挂载,因此实例的$el并不能够调用outerHTML,因此报错。

    ——(虽然father组件调用了child组件,但是此时子组件child生命周期还未开始!这里要注意,只是father组件做初始化。子组件实例的生命周期什么时候开始,接下来的father生命周期里会涉及)

    —— 由于data数据、methods方法等在created中已被定义,此时已经可以去做一些ajax请求后台数据

    beforeMount

    created与beforeMount之间,主要做了两步工作:

    1、判断实例在dom中有没有挂载的元素(el:‘#app’),只有挂载了才能够继续。挂载好后,实例即与挂载dom元素进行了绑定(占坑),实例中也可以进行引用;

    2、渲染dom模板。渲染dom模板只是在内存中,并非是在HTML中的DOM结构中渲染,所以前台在这个阶段时,组件对应的元素是没有显示的。(在调用 this.$el.outerHTML 后,控制台输出 <div id="app"></div>)

    —— 可以看到fathe组件的beforeMount时,child子组件的vue创建生命周期已经完成到mounted阶段。说明father在执行dom模板渲染的时候,会监测模板中是否有自定义的vue子组件。如果有,就进入子组件的生命周期的创建阶段,等到所有子组件的完成创建并挂载(mounted)到父组件的模板当中后。才能表明父组件在内存中的模板渲染完成。

    —— 子组件的mounted阶段虽然完成,但父组件仍在beforeMounte阶段时。前台也看不见子组件渲染的效果,子组件只是完成了挂载到父组件的模板中了(控制台可以看到dom树中的元素并未变化)。因此此刻在子组件的mounted阶段直接调用一些方法(dom操作方法)可能会造成异常错误。为保险起见可在子组件中通过 $nextTick() 回调,等下一次DOM更新后再进行dom的操作。

    —— 以上内存中渲染DOM可以了解一下Virtual DOM技术。

    mounted

    mounted阶段表示,当前实例在内存中渲染的组件模板,已成功挂在到父组件orDOM树中。

    控制台可以看出DOM树中元素已经发生变化。

    —— 这个阶段可以引用到元素,上面子组件提到过,一些情况下可以通过 $nextTick() 回调,避免一些意外错误。

    运行阶段

    beforeUpdate

    通过点击左上角的button来改变father实例中的值

    控制台

    首先:只有实例中定义的变量绑定在了dom树中,例如 <div>{{data}}<div>,当data发生改变,才会进入beforeUpdate阶段。若dom树中未绑定某变量,该变量只在实例中发生变化,那么就不会进入beforeUpdate阶段!

    我在代码中绑定了tData变量,从beforeUpdate阶段中可以看到,内部变量tData已经变化。页面中DOM的 tData绑定值还未变化。

    子组件的数据更新,不会引起父组件的beforeUpdate和updated生命周期钩子

    update

     

    beforeUpdate和updated阶段直接,vue根据变量更新后的数据在虚拟DOM中进行渲染(图中re-render)。

    而后进行页面相应组件的更新。

    控制台组件中值为1

    注销阶段

    若一个组件被判断为销毁,则进入相应的销毁阶段。一般情况下销毁阶段的调用有:

    • v-if = ‘false’ 
    • v-for 列表发生了变化(列表中部分item不再使用)
    • 实例调用 $destroy() 方法

    beforeDestroy

    进入该阶段,表明实例已经接收到了被销毁的指令。

    在该阶段,实例的属性、方法、事件等仍然可以调用。

    destroyed

    在beforeDestroy与destroyed之间,组件开始注销自己的属性、方法、事件以及自己的子组件。只有等到所有都已注销完成(子组件达到destroyed阶段),父组件才能够进入destroyed阶段。看控制台。

    以上注销方法,是通过 $destroy() 来进行的,可以看到调用该方法后,页面上的元素并未随vue实例注销。但是通过点击button已经无法改变其button数组,说明实例已经不存在。

    —— $destroy只是完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

    —— 官方建议,$destroy 在多数情况下,还是用 v-if 和 v-for 来替代

     

    转载于:https://www.cnblogs.com/jaykoo/p/10529518.html

    展开全文
  • Vue 父子组件生命周期执行顺序

    千次阅读 2021-02-01 17:54:10
    父子组件中分别打印日志,可以得出以下执行顺序。 1.1.挂载阶段 该过程主要涉及 beforeCreate、created、beforeMount、mounted 4 个钩子函数。执行顺序为: 父beforeCreate -> 父created -> 父beforeMount -...
  • 生命周期顺序 可以随便写一对父子组件,然后打印出他们所有的生命周期: 加载渲染过程: 父组件的beforeCreate、created、beforeMount ——> 子组件的beforeCreat、created、beforeMount、mounted ——> 父...
  • 我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件生命周期的执行顺序是什么? 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父created -> 父...
  • vue 父子组件生命周期执行顺序

    千次阅读 2020-07-22 10:07:01
    我们已经非常熟悉单个的vue组件的生命周期执行顺序了,但是,如果有嵌套组件,父子组件生命周期的执行顺序是什么? 总结一下结果吧: 当父子组件在加载的时候,执行的先后顺序为 父beforeCreate -> 父...
  • 父子组件生命周期顺序 1.组件引入的 两种方式 非懒加载 import HelloWorld from './components/HelloWorld.vue' components: { HelloWorld, } 懒加载 es6中import懒加载 Hello: () => import("@/views/...
  • 然而今天被问到父子组件生命周期执行顺序的时候一头雾水,根本不知道怎么回事。然后写了一段demo验证一下大佬们说的顺序。 <!DOCTYPE html> <html lang="en"> <head> <meta charse...
  • 同步引入时生命周期顺序为: 父组件的beforeCreate、created、beforeMount–> 所有子组件的beforeCreate、created、beforeMount–> 所有子组件的mounted–> 父组件的mounted 总结:父组件先创建,然后子...
  • 问题背景在单一组件中,钩子的执行顺序是beforeCreate-> created ->...父子组件生命周期执行顺序组件,分别在他们的钩子函数中打印日志,观察执行顺序。得到的结果如图所示,父组件先创建,然后...
  • 在用uni-app框架开发小程序时,微信...但在头条端则不行,顺序正好反过来了,父组件mounted生命周期先执行,子组件mounted生命周期后执行。自然想到的方法是加nextTick。这样: this.$nextTick( () => { this.$refs.
  • 当渲染时,会createElm创建元素,创建元素后会进行初始化,初始化组件的时候内部还有组件,会不停的去渲染,所以它的渲染顺序是先父后子,完成顺序是先子后父。 ...
  • Vue中父子组件生命周期顺序如下: 可以看到父组件在渲染完成之后并不是马上挂载,而是先等待子组件创建、渲染、挂载完成之后再去挂载。 父组件先初始化 => 父组件渲染完毕 => 子组件开始初始化 => 子组件...
  • Vue中父子组件生命周期执行顺序初探 结论如下图但是我在开发的过程中发现了异常 1. 如果从其他页面过来的话,嵌套组件的生命周期入上图所示 2. 但是如果在当前页面刷新的话,顺序性就变味下面那样 父created-父...
  • 先附一张官网上的vue实例的生命周期图,每个Vue实例在被创建的时候都需要经过一系列的初始化过程,例如需要设置数据监听,编译模板,将实例挂载到DOM并在数据变化时更新DOM等。同时在这个过程中也会运行一些叫做生命...
  • 初次渲染就会触发的生命周期 beforeCreate() created() beforeMount() mounted() 组件的调用顺序都是先父后子,渲染完成的顺序是先子后父。组件的销毁操作是先父后子,销毁完成的顺序是先子后父。 加载渲染...
  • 但是,如果有嵌套组件,父子组件生命周期的执行顺序是什么呢?嵌套组件又分为2种情况:一种是在template直接引入(大部分场景),另一种是element-ui里面的嵌套,两种执行顺序是否一样呢?马上开启探索和验证之旅~1....
  • vue 父子组件生命周期顺序 1、加载渲染过程 父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted 我们看到是先执行父组件的...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 7,499
精华内容 2,999
关键字:

父子组件生命周期顺序