生命周期钩子函数说明如表3-1所示。
表3-1 钩子函数及其说明
这些生命周期钩子函数与el和data类似,也是作为选项写入Vue实例内,并且钩子的this指向的是调用它的Vue实例。
【例3.7】生命周期钩子函数(源代码\ch03\3.7.html)。
首先在页面加载完后触发beforeCreate、created、beforeMount、mounted,6秒修改msg的内容为“借问谁家子,幽并游侠儿。”,触发beforeUpdate和updated钩子函数。
在谷歌浏览器中运行程序,按F12键打开控制台,并切换到 “Console”选项,页面渲染完成后,页面效果如图3-8所示。
6秒后调用setTimeout(),修改msg的内容,又触发另外的钩子函数,效果如图3-9所示。
图3-8 初始化页面效果
图3-9 6秒后效果