vue学习笔记：Vue生命周期
概念
一个Vue 实例从开始创建、初始化数据、编译模板、挂载 DOM、渲染→更新→渲染、卸载等一系列过程，这就是 Vue 的生命周期。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
Vue实例的生命周期全过程（图）
Vue实例的生命周期，主要分为三个阶段，每个阶段都会执行不同的钩子函数，分别为：
挂载(初始化相关属性,例如watch属性，method属性)
beforeCreate
created
beforeMount
mounted
更新(元素或组件的变更操作)
beforeUpdate
updated
销毁（销毁相关属性）
beforeDestroy
destroyed
八大生命周期的特点
beforeCreate: Vue实例初始化之后，以及事件初始化，以及组件的父子关系确定后执行该钩子函数，一般在开发中很少使用。
created: 在调用该方法之前，初始化会被使用到的状态，状态包括props,methods,data,computed,watch。
而且会实现对data中属性的监听，也就是在created的时候数据已经和data属性进行了绑定。(放在data中的属性当值发生改变的时候，视图也会改变)。同时也会对传递到组件中的数据进行校验。所以在执行created的时候，所有的状态都初始化完成，我们也完全可以在该阶段发送异步的ajax请求，获取数据。但是，在created方法中，是无法获取到对应的的$el选项,也就是无法获取DOM。
created方法执行完毕后，下面会判断对象中有没有el选项。如果有，继续执行下面的流程，也就是判断是否有template选项，如果没有el选项，则停止整个生命周期的流程，直到执行了vm.$mount(el)。
接下来会触发 beforeMount 这个钩子函数。在执行该钩子函数的时候，虚拟 DOM 已经创建完成，马上就要渲染了，在这里可以更改 data 中的数据，不会触发 updated 。
当整个组件挂在完成后，有可能会进行数据的修改，当Vue发现data中的数据发生了变化，会触发对应组件的重新渲染，先后调用了beforeUpdate 和updated钩子函数。
在updated之前beoreUpdate之后有一个非常重要的操作就是虚拟DOM会重新构建，也就是新构建的虚拟DOM与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染。而到了updated这个方法，就表示数据已经更新完成，DOM也重新render完成。
beforeDestroy 这个钩子函数在实例销毁前调用，在这一步，实例仍然可用。在该方法中，可以做一些清理的工作，例如：清除定时器等。
执行到destroyed钩子函数的时候，Vue实例已经被销毁，所有的事件监听器会被移除，所有的子实例也会被销毁，断开DOM与数据之间的关联。
最新文章
- 创建/发布cocoapods公共库
- jQuery下拉菜单插件Tendina.
- 大数据存储:MongoDB实战指南——常见问题解答
- easyui datagrid json 格式
- 如何用PHP开发机器人。
- RMAN的入门篇
- Java第一个程序
- Hibernate的缓存技术详解
- 【转载】Jmeter获取响应结果中参数出现的次数
- sql server 2016 management studio没有的解决方式
- Android解惑 - 为什么要用Fragment.setArguments(Bundle bundle)来传递参数(转)
- python(5)–random模块及验证码
- CALayer -- 备忘
- Java多线程初学者指南（10）：使用Synchronized关键字同步类方法
- "Failed to fetch URL https://dl-ssl.google.com/android/repository/addons_list.xml,reason: Connection
- 改变TPageControl的活动标签颜色
- 线性规划与网络流24题●09方格取数问题&13星际转移问题
- 41. First Missing Positive(困难, 用到 counting sort 方法)
- Flask 框架介绍
- Elasticsearch 简单快照备份