4.4.1　认识生命周期钩子函数

生命周期钩子函数说明如表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　秒后效果

本周热推：
Python极简讲义：一本书入门数据分析与机器学习Java从初学到精通Python编程：从入门到实践C语言从入门到精通编码：隐匿在计算机软硬件背后的语言
上一章目录下一章