目录
- 一、前言
- 二、生命周期
- 1、beforeCreat / created
- (1)、beforeCreat：
- （2）、created：
- 2、eforeMount / mounted
- （1）、beforeMount：
- （2）、mounted：
- 3、beforeUpdate / updated
- （1）、beforeUpdate：
- （2）、updated：
- 4、beforeDestroy / destroyed
- （1）、beforeDestroy：
- （2）、destroyed：
- 三、父子组件生命周期
一、前言
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
面试是遇到了关于vue生命周期以及双向绑定原理，今天写篇博客记录一下。
二、生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
图片取自vue官网：
可以看到：
vue的一个实例具有四个什么周期，分别对应8个钩子函数：beforeCreat，created，beforeMount，mounted，beforeUpdate，updated，beforeDestroy，destroyed
1、beforeCreat / created
(1)、beforeCreat：
当执行beforeCreat生命周期函数时，vue实例还没有被完全创建出来，此时data，methods等内部没有初始化，我们这个时候在函数内调用数据的话，后台会显示undefined。
（2）、created：
执行这个函数的时候，vue实例已经初始化了，可以在这里调用数据，不过还没渲染到页面上。 在当前函数中我们可以访问到data中的属性，此时，会将data中的属性和methods的方法添加到vue的实例身上，同时会将data中所有的属性添加一个getter/setter方法，前后端的ajax交互一般在这个钩子函数中。
初始化数据
定义前后端交互函数
2、eforeMount / mounted
（1）、beforeMount：
这时，vue已经将模板字符串编译成内存DOM，模板已经编译完成，还没有渲染到页面上。beforeMount执行的时候，页面中的元素没有被真正替换过来，只是之前写的一些模板字符串。
（2）、mounted：
创建阶段完成，页面渲染完毕，进入运行阶段。此时我们可以通过$refs来访问到真实的DOM结构。ref类似与id一样 值必须是唯一的，访问的时候我们可以使用this.$refs属性
初始化页面完成，对html的dom节点进行一些需要的操作
3、beforeUpdate / updated
这是vue实例运行时存在的生命周期钩子。
（1）、beforeUpdate：
内存中的数据已经改变，页面上的还没更新。
（2）、updated：
页面更新，页面上数据和内存中的一致
4、beforeDestroy / destroyed
vue实例销毁阶段的钩子函数。
（1）、beforeDestroy：
出发这个函数时，还没开始销毁，此时刚刚脱离运行阶段。data，methods，指令之类的都在正常运行。在这个生命周期函数中我们可以将绑定的事件进行移除。
（2）、destroyed：
组件销毁完毕，data，methods，指令之类的不可用。
三、父子组件生命周期
父子组件的创建和挂载：
父beforeCreate 👉 父created 👉 父beforeMount 👉 子beforeCreate 👉 子created 👉 子beforeMount 👉 子mounted 👉 父mounted
更新：
父beforeUpdate 👉 子beforeUpdate 👉 子updated 👉 父updated
