- Vue.js 3.0从入门到精通（视频教学版）
- 李小威编著
- 341字
- 2022-07-27 18:37:44
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 秒后效果