标注图+部分举例聊聊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。这三个大家遇到了自行了解哈,暂且这样吧。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
科学的极致：漫谈人工智能
集智俱乐部 / 人民邮电出版社 / 2015-7 / 49.00元
集智俱乐部是一个从事学术研究、享受科学乐趣的探索者组成的团体，倡导以平等开放的态度、科学实证的精神进行跨学科的研究与交流，力图搭建一个中国的“没有围墙的研究所”。这些令人崇敬的、充满激情与梦想的集智俱乐部成员将带你了解图灵机模型、冯•诺依曼计算机体系结构、怪圈与哥德尔定理、通用人工智能、深度学习、人类计算与自然语言处理，与你一起展开一场令人热血沸腾的科学之旅。一起来看看 《科学的极致：漫谈人工智能》 这本书的介绍吧!
