Vue.js之life cycle我的理解

来源：互联网发布：速卖通搬家软件编辑：程序博客网时间：2024/06/03 22:48

学了一阵子Vue,感觉初步了解了一些，但是还是比价少，
今天想看一看Vue的生命周期，我想通过我自己的理解将其记录下来。

这里写图片描述

从网上搜到了各种关于Vue生命周期的博客，都写的大致相同。我的理解看，主要分为四个阶段：create,mount,update,destroy。

create

在create阶段，通过new Vue()方法获取到Vue实例，在这一阶段我们可以获取到data，但是这个时候我们还不能获取到真正的DOM。
这里我们有两个方法可以使用:
beforeCreate:整个Vue生命周期最开始的时候，就像生产一台电脑，最开始，我要告诉所有人，我要开始生产这台电脑了，但是这个时候实际上并没有做任何事情，也许说喊个口号告诉大家：开始生产了。。
在这个阶段，我们可以添加loading遮罩层，处于实例最开始的地方。
created: new Vue()创建实例已经完成，data，methods什么的已经可以访问了，但是在这个阶段，仍然还没有$el,没有真正的DOM，不能对DOM进行操作，但是data可以访问到了。就像：这台电脑已经生产完成了，你可以拿到这台电脑的型号参数，但是因为还没有出厂，你仍然不能使用这台电脑，只能脑补。。。

mount

在mount阶段，我们就可以拿到真正的DOM，并挂载到DOM树中，对其进行下一步的操作。
beforeMount:挂载el之前，这个阶段el还是虚拟的DOM,就像这台电脑已经卖给你了，你说是拥有了这台电脑，但是它还在运输途中，然而你并没有真正的电脑。
mounted:挂载之后，生成真正的DOM，并有可能已经挂载到了DOM树上了。就像收到了电脑，并且已经在使用了。

像上面的这些周期create和mount，在整个生命周期中只会被执行一次。

update

在vue使用过程中，随着状态不断的变化，进而引发update阶段。
beforeUpdate:在视图更新之前可以调用的函数，我们可以做一些如状态的修改等。
updated:更新完毕之后，DOM又重新挂载到DOM树上

destroy

销毁，最后一步。如组件被从DOM树中删除或者替换，都会调用这个。
beforeDestroy:在销毁之前执行的方法，我们可以在这里弹窗询问你真的要销毁吗？

destroyed: 组建销毁后调用的方法，我们可以在这里提示销毁成功什么的。

这里写图片描述

我们可以使用这个例子来实验：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div id="app">    <p>{{ message }}</p></div><script src="https://unpkg.com/vue/dist/vue.js"></script><script>    var app = new Vue({      el:'#app',      data:{        message:'Hello world!'      },      beforeCreate:function(){        console.group('before create : 创建前的状态...')        console.log('%c%s','color:red','el :' + this.$el)        console.log('%c%s','color:red','data :' + this.$data)        console.log('%c%s','color:red','message :' + this.message)      },      created:function(){        console.group('created 创建完毕的状态...')        console.log('%c%s','color:red','el   :' + this.$el)        console.log('%c%s','color:red','data   :' + this.$data)        console.log('%c%s','color:red','message   :' + this.message)      },      beforeMount:function(){        console.group('before mount:挂载前状态...')        console.log('%c%s','color:red','el  :' + this.$el)        console.log('%c%s','color:red','data  :' + this.$data)        console.log('%c%s','color:red','message  :' + this.message)      },      mounted:function(){        console.group('mouted: 挂载结束状态....')        console.log('%c%s','color:red','el  :' + this.$el)        console.log('%c%s','color:red','data  :' + this.$data)        console.log('%c%s','color:red','message  :' + this.message)      },      beforeUpdate:function(){        console.group('before update 更新前状态...')        console.log('%c%s','color:red','el  :' + this.$el)        console.log('%c%s','color:red','data  :' + this.$data)        console.log('%c%s','color:red','message  :' + this.message)      },      updated:function(){        console.group('updated: 更新完成状态....')        console.log('%c%s','color:red','el  :' + this.$el)        console.log('%c%s','color:red','data  :' + this.$data)        console.log('%c%s','color:red','message  :' + this.message)      },      beforeDestroy:function(){        console.group('before destroy 销毁前状态...')        console.log('%c%s','color:red','el :' + this.$el)        console.log('%c$s','color:red','data :' + this.$data)        console.log('%c%s','color:red','message :' + this.message)      },      destroyed:function(){        console.group('destroyed 销毁完成状态....')        console.log('%c%s','color:red','el  :' + this.$el)        console.log('%c%s','color:red','data  :' + this.$data)        console.log('%c%s','color:red','message  :' + this.message)      }    })</script></body></html>

当我们在浏览器中执行这个HTML的时候我们可以看到他的控制台的提示：
这里写图片描述

可以看到，整个只有create,mount这两个周期的函数执行了，并且都只执行了一次。当我们更新状态，在控制台修改数据：
这里写图片描述

得到了以下的结果：
这里写图片描述

可以看到，update阶段执行了，不管你在这里修改几次状态，都是只有update阶段的函数执行。

当我们销毁实例，在控制台打印app.$destroy()
这里写图片描述

可以看到，destory阶段执行了
这里写图片描述

感谢：Vue2.0 探索之路——生命周期和钩子函数的一些理解

阅读全文

1 0