常用生命周期函数
- mounted 挂载完成之后 会发送ajax请求 启动定时器 绑定自定义事件(还没讲) 会调用一次(上户口)
- beforeDestory 清除计时器 解除自定义事件的绑定 取消订阅(还没有讲) (临终遗言)
生命周期注意点:
- 是vue在关键时期帮助我们调用的 是一些特殊函数
- 名字不能更改 但是内容可以写自己的逻辑
- 函数中的this 指向的也是 vm 或者 组件实例对象
参考网址 https://juejin.cn/post/7032881219524100132
vue生命周期.png
// 测试生命周期函数
// 执行一些初始化的工作 此时还拿不到数据
beforeCreate() {
// console.log("执行了 beforeCreate");
// console.log(this.name);
},
// 初始化数据完成可以拿到数据了 但是 还没有开始解析模板
created() {
console.log(this.name);
// debugger; // 调试程序指令 程序会停止 注意要 打开 控制命令 刷新才会生效
},
// 开始挂载之前 在操作真是DOM之前先告诉你一声
beforeMount() {
console.log("准备要挂载了");
// debugger
},
// 挂载完成 可以操作 真实DOM了
mounted() {
console.log("挂载完毕");
// debugger
},
// 数据更新之前 告诉你一声 初始化到挂载 不会执行
// 此时还没有开始 将虚拟DOM 重新渲染
beforeUpdate() {
console.log("有数据发生变化了 快来看啊");
// debugger;
},
// 数据更新完成 虚拟DOM 已经重新渲染完成
updated() {
console.log("完成了数据更新");
// debugger
},
// 开始销毁之前
beforeDestroy() {
console.log("花儿将要凋落 ");
// debugger
},
// 实例已经被销毁了
destroyed() {
console.log(this);
console.log("彻底凉凉 送一首歌曲");
},