vue2.0生命周期和钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

钩子函数是用于描述一个组件实例从引入到退出的全过程中的某个过程，整个过程成为生命周期。

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreate	实例创建前执行	el 和 data 都为 undefined，还未初始化。methods、computed 以及 watch 上的数据或方法均不能被访问。
created	实例初始化完成后执行	页面还没开始渲染，不可访问 DOM 节点。el 仍然为 undefined。但可以操作 data 与 methods 等。可以做一些初始数据的获取，也发送ajax请求，在当前阶段无法与 DOM 进行交互，如果需要，可以通过 $nextTick 来访问 DOM
beforeMount	挂载前执行	el 和 data 都初始化了，虚拟 DOM 已经创建完成，即将开始渲染。
mounted	页面渲染完毕时执行	真实的 DOM 挂载完成，可访问 DOM 节点。可使用 refs 对 DOM 进行操作。也可以向后台发送请求。
beforeUpdate	数据发生更新时执行	此时 Vue 实例中的数据是最新的了，但是页面中的数据还是旧的，可以在此时进一步更改数据，而不会造成重新渲染。
updated	数据发生更新导致的 DOM 重新渲染完成时执行	此时 DOM 已经更新，可以执行 DOM 相关操作。
beforeDestroy	实例销毁前执行	实例仍然完全可以使用。在此阶段一般进行善后工作，如清除计时器、解除绑定等。
destroyed	实例销毁完成	实例绑定的所有东西都会被解除，如解除事件监听和对 DOM的数据绑定，所有子实例也统统被销毁，组件被拆解将无法使用。改变 data 也不会再重新渲染，但是 DOM 结构依然存在。

组件的生命周期共分为三个阶段：挂载阶段、更新阶段、销毁阶段。

每个阶段对应的钩子函数分别为：

1. 挂载阶段：beforeCreate、created、beforeMount、mounted
2. 更新阶段：beforeUpdate、updated
3. 销毁阶段：beforeDestroy、destroyed

由上可以得出created和mounted的区别

• created
  • 作用：页面渲染之前进行调用，通常在html生成之前进行数据初始化，数据在页面渲染之前生成。
• mounted
  • 作用：页面渲染之后进行调用，通常用于改变某些dom数据或者属性。