下载掌阅APP，畅读海量书库
立即打开
每个Vue实例在被创建时，都要经过一系列的初始化过程。例如，需要设置数据监听、编译模板、将实例挂载到DOM，并在数据变化时更新DOM等。同时，在这个过程中也会运行一些生命周期钩子的函数，这给了开发者在不同阶段添加自己代码的机会。
生命周期钩子函数说明如表4-1所示。
表4-1 生命周期钩子函数及说明
这些生命周期钩子函数与el和data类似，也是作为选项写入Vue实例中，并且钩子的this指向的是调用它的Vue实例。
提示
不要在钩子函数选项或回调上使用箭头函数，例如created:()=>console.log(this.a)或vm.$watch('a',newValue=>this.myMethod())。因为箭头函数并没有this，this会作为变量一直向上级词法作用域查找，直至找到为止，经常导致Uncaught TypeError:Cannot read property of undefined或Uncaught TypeError:this.myMethod is not a function之类的错误。
【例4.8】生命周期钩子函数（源代码\ch04\4.8.html）。
首先在页面加载完后触发beforeCreate、created、beforeMount、mounted，4秒修改msg的内容为“孤云还空山，众鸟各已归。”，并触发beforeUpdate和updated钩子函数。
在浏览器中运行程序，按F12键打开控制台并切换到“Console”选项，页面渲染完成后，效果如图4-9所示。
图4-9 初始化页面效果
4秒后调用setTimeout()，修改msg的内容，又触发另外的钩子函数，效果如图4-10所示。
图4-104 秒后效果
在使用Vue的过程中，经常需要对一些数据做初始化处理，常用的方法是在created与mounted钩子函数中处理。
created是在实例创建完成后立即调用。在这一步，实例已完成了数据观测、属性和方法的运算，以及watch/event事件回调。然而，挂载阶段还没开始，$el属性目前不可见。所以不能操作DOM元素，多用于初始化一些数据或方法。
mounted是在模板渲染成HTML后调用，通常是初始化页面完成后，再对HTML的DOM节点进行一些需要的操作。
【例4.9】created与mounted函数的应用（源代码\ch04\4.9.html）。
在浏览器中运行程序，效果如图4-11所示，单击“确定”按钮，页面加载完成效果如图4-12所示。
图4-11 页面效果
图4-12 单击“确定”按钮后效果