标注图+部分举例聊聊Vue生命周期
栏目: JavaScript · 发布时间: 6年前
内容简介：“你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。”现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。每个 Vue 实例在被创建时都要经过一系列的初始化过程。
“你不需要立马弄明白所有的东西，不过随着你的不断学习和使用，它的参考价值会越来越高。”
现在项目中遇到了，好好回头总结一波Vue生命周期，以后用到的时候再来翻翻。
啥叫Vue生命周期？
每个 Vue 实例在被创建时都要经过一系列的初始化过程。
例如：从开始创建、初始化数据、编译模板、挂载Dom、数据变化时更新DOM、卸载等一系列过程。
我们称 这一系列的过程 就是Vue的生命周期。
通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
同时在这个过程中也会运行一些叫做 生命周期钩子 的函数，这给了用户在不同阶段添加自己的代码的机会，利用各个钩子来完成我们的业务代码。
啥也不说，先来个干货
这是对于Vue生命周期，官网给的那张图的标注图，图片网上看到的，我觉得标注地很nice，建议一步步仔细看完图片，然后把图片自己悄悄保存下来，对照着图片的内容看第二部分的举例说明。
我相信 程序员 看代码比看文字更容易理解
对照着上图标注的内容，我们一个钩子一个钩子地举例说明。
1.beforeCreate
实例初始化之后、创建实例之前的执行的钩子事件。
如下例子：
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王盖地虎'
},
beforeCreate() {
console.log('beforeCreate钩子事件：');
console.log($this.data);
console.log($this.el);
}
})
</script>
</body>
复制代码
得到的结果是：
：创建实例之前，数据观察和事件配置都没好准备好。也就是数据也没有、DOM也没生成。
2.created
实例创建完成后执行的钩子
在上一段代码例子中，我们再来console一下。
<body>
<div id="root">{{test}}</div>
<script type="text/javascript">
const vm = new Vue({
el: '#root',
data: {
test: '天王盖地虎'
},
created() {
console.log('created钩子事件：');
console.log(this.$data);
console.log(this.$el);
}
})
</script>
</body>
复制代码
得到的结果是：
：实例创建完成后，我们能读取到数据data的值，但是DOM还没生成，挂载属性el还不存在。
3.beforeMount
将编译完成的html挂载到对应的 虚拟DOM 时触发的钩子
此时页面并没有内容。
即此阶段解读为: 即将挂载
我们打印下此时的$el
beforeMount() {
console.log('beforeMount钩子事件：');
console.log(this.$el);
}
复制代码
得到的结果是：
小总结：此时的el不再是undefined,成功关联到我们指定的dom节点。但是此时的{{test}}还没有成功渲染成data中的数据，页面没有内容。
PS：相关的render函数首次被调用。
4.mounted
编译好的html挂载到页面完成后所执行的事件钩子函数。
此时的阶段解读为： 挂载完毕阶段
我们再打印下此时$el看看：
mounted() {
console.log('mounted钩子事件：');
console.log(this.$el);
}
复制代码
得到的结果是：
可见， {{test}}已经成功渲染成data里面test对应的值“天王盖地虎”了。
小总结：此时编译好的HTML已经挂载到了页面上，页面上已经渲染出了数据。一般会利用这个钩子函数做一些ajax请求获取数据进行数据初始化。
PS：mounted在整个实例中只执行一次。
5.beforeUpdate
小总结：当修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
6.updated
小总结：此阶段为更新渲染视图之后，此时再读取视图上的内容，已经是最新的内容。
PS:
1、该钩子在服务器端渲染期间不被调用。
2、应该避免在此期间更改状态，因为这可能会导致更新无限循环。
7.beforeDestroy
小总结：调用实例的destroy( )方法可以销毁当前的组件，在销毁前，会触发beforeDestroy钩子。
8.destroyed
小总结：成功销毁之后，会触发destroyed钩子，此时该实例与其他实例的关联已经被清除，Vue实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
话在最后
其实还有三个生命周期钩子没列出来：activated、deactivated、errorCaptured。这三个大家遇到了自行了解哈,暂且这样吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Release It!
Michael T. Nygard / Pragmatic Bookshelf / 2007-03-30 / USD 34.95
“Feature complete” is not the same as “production ready.” Whether it’s in Java, .NET, or Ruby on Rails, getting your application ready to ship is only half the battle. Did you design your system to......一起来看看 《Release It!》 这本书的介绍吧!
