学习vue——vue.js入门(四)

vue生命周期

vue有11个声明周期钩子函数，都在下图展示，下面我们说一下主要的四个阶段前后的主要的8个钩子函数。

初始化阶段，el和dom都还没有生成的有两个钩子函数，分别是beforeCreate和created

beforeCreate钩子函数 实例创建前后

beforeCreate为vue初始化过程中第一个钩子函数
官方说明：在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
解释：这个时期，this变量还不能使用，在data下的数据，和methods下的方法，watcher中的事件都不能获得到；
vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。
可以做页面拦截。当进一个路由的时候我们可以判断是否有权限进去，是否安全进去，携带参数是否完整，参数是否安全。使用这个钩子好函数的时候就避免了让页面去判断，省掉了创建一个组建Vue实例。可以做自定义重定向。当路由还没有进去时我们判断是否正确进去，若不正确进去可以重定向到指定的页面。

created钩子函数 实例创建前后

created为vue初始化后第一个钩子函数
官方说明：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始， e l 属 性 目 前 不 可 见 。 解 释 说 明 ： 这 个 时 候 可 以 操 作 v u e 实 例 中 的 数 据 和 各 种 方 法 ， 但 是 还 不 能 对 " d o m " 节