当前位置: 首页 > news >正文

谷粒商城实战笔记-42-前端基础-Vue-生命周期和钩子函数

下面是Vue官网关于生命周期及不同阶段的钩子函数的图示。
在这里插入图片描述

Vue 实例生命周期是指从一个组件被创建到最终被销毁的整个过程。

在这一过程中,Vue 提供了一系列的“钩子”函数,在生命周期的不同阶段执行自定义的代码。

以下是 Vue 对象生命周期的主要阶段和对应的钩子函数:

一,组件声明周期各阶段

1,创建阶段

  • beforeCreate: 在实例初始化之后,数据观测 (data observer) 和事件/ watcher 事件配置之前被调用。
  • created: 实例创建完成后被立即调用。此时,实例已经完成数据观测和属性、方法的运算,但 $el 尚未被编译和挂载。
  • beforeMount: 在挂载开始之前被调用:相关的 render 函数首次被调用。
  • mounted: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子。

2,运行阶段

  • beforeUpdate: 数据更新时调用,发生在虚拟 DOM 打补丁之前。
  • updated: 组件 DOM 更新后调用,当这个钩子被调用时,组件 DOM 已经更新,但是可能子组件还没有更新。

3,销毁阶段

  • beforeDestroy: 实例销毁之前调用。在这一步,实例仍然完全可用。
  • destroyed: Vue 实例销毁后调用。在这一步,所有事件监听器会被移除,所有的子实例也会被销毁。

4,错误处理

  • errorCaptured: 错误捕获钩子,当捕获一个来自后代组件的错误时被调用。

5,如何定义和使用钩子函数

钩子函数可以在 Vue 的选项对象中定义,如下所示:

export default {// 创建阶段beforeCreate() {console.log('beforeCreate');},created() {console.log('created');// 这里可以访问 this 对象并进行数据的初始化},beforeMount() {console.log('beforeMount');},mounted() {console.log('mounted');// 这里可以访问真实的 DOM 元素,如 this.$el},// 运行阶段beforeUpdate() {console.log('beforeUpdate');},updated() {console.log('updated');},// 销毁阶段beforeDestroy() {console.log('beforeDestroy');},destroyed() {console.log('destroyed');},// 错误处理errorCaptured(err, instance, info) {console.error(`Error captured in component: ${err}`);return false; // 返回 false 表示不再向上冒泡错误}
}

6,注意事项

  • 不要在 beforeCreatecreated 钩子函数中访问 DOM,因为在这两个阶段 DOM 还没有生成。
  • mounted 钩子函数中可以安全地访问和操作 DOM。
  • 如果你在组件中使用了异步数据加载,那么最好在 created 或者 mounted 钩子中进行,以便确保数据在 DOM 渲染之前或之后加载。
  • beforeDestroy 可以用来清除定时器、事件监听器等资源,而 destroyed 可以确认这些资源已经被清理。

二,实战

1,实战案例

下面通过一个案例来说明Vue的生命周期。

创建一个Vue对象,并使用钩子函数。

      let app = new Vue({el: "#app",data: {name: "张三",num: 100},methods: {show() {return this.name;},add() {this.num++;}},beforeCreate() {console.log("=========beforeCreate=============");console.log("数据模型未加载:" + this.name, this.num);console.log("方法未加载:" + this.show());console.log("html模板未加载:" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("数据模型已加载:" + this.name, this.num);console.log("方法已加载:" + this.show());console.log("html模板已加载:" + document.getElementById("num"));console.log("html模板未渲染:" + document.getElementById("num").innerText);},beforeMount() {console.log("=========beforeMount=============");console.log("html模板未渲染:" + document.getElementById("num").innerText);},mounted() {console.log("=========mounted=============");console.log("html模板已渲染:" + document.getElementById("num").innerText);},beforeUpdate() {console.log("=========beforeUpdate=============");console.log("数据模型已更新:" + this.num);console.log("html模板未更新:" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("数据模型已更新:" + this.num);console.log("html模板已更新:" + document.getElementById("num").innerText);}});

在这里插入图片描述

如上图,浏览器中运行这段代码时,看到以下的日志输出顺序:

  1. beforeCreate 被调用:

    • 因为 beforeCreate 被调用时,Vue 实例的数据和方法都尚未初始化,所以 this 上还无法访问 name, num, show 方法,尝试访问会得到 undefined
    • 由于此时 DOM 还未生成,document.getElementById("num") 也会返回 null
  2. created 被调用:

    • 此时,数据和方法已经初始化,因此可以访问 name, num, show 方法。
    • 但是,HTML 模板尚未被渲染,document.getElementById("num") 可能返回页面上的元素,但其 innerText 属性仍为空或显示初始值。
  3. beforeMount 被调用:

    • 这个钩子在挂载开始前被调用,此时 DOM 元素已经存在,但是模板还未被 Vue 替换和渲染,所以 document.getElementById("num").innerText 依然显示的是未替换的原始内容。
  4. mounted 被调用:

    • 这个钩子在挂载完成后被调用,此时 DOM 已经被 Vue 替换并渲染,所以 document.getElementById("num").innerText 显示的是经过 Vue 替换后的值。
  5. num 发生变化时(例如通过调用 add 方法),beforeUpdateupdated 分别在更新前和更新后被调用:

    • beforeUpdate 中,num 的值已经是更新后的值,但是 DOM 还没有更新。
    • updated 中,num 的值依然是更新后的值,且 DOM 也已经更新完毕。

请注意,在 beforeCreatecreated 钩子中,尝试调用 this.show() 或访问 this.namethis.num 可能不会像预期那样工作,因为在 beforeCreate 阶段,this 指向的 Vue 实例尚未完全初始化。然而在 created 阶段,所有的数据和方法都已可用。

如果在你的 HTML 模板中有一个元素的 ID 为 “num” 并且使用了 {{ num }} 插值表达式,那么在 mountedupdated 钩子中,document.getElementById("num").innerText 应该会返回正确的数值。如果没有这样的元素,那么在任何钩子中尝试获取这个元素都会返回 null

2,完整代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title>
</head><body><div id="app"><span id="num">{{num}}</span><button @click="num++">赞!</button><h2>{{name}},有{{num}}个人点赞</h2></div><script src="../node_modules/vue/dist/vue.js"></script><script>let app = new Vue({el: "#app",data: {name: "张三",num: 100},methods: {show() {return this.name;},add() {this.num++;}},beforeCreate() {console.log("=========beforeCreate=============");console.log("数据模型未加载:" + this.name, this.num);console.log("方法未加载:" + this.show());console.log("html模板未加载:" + document.getElementById("num"));},created: function () {console.log("=========created=============");console.log("数据模型已加载:" + this.name, this.num);console.log("方法已加载:" + this.show());console.log("html模板已加载:" + document.getElementById("num"));console.log("html模板未渲染:" + document.getElementById("num").innerText);},beforeMount() {console.log("=========beforeMount=============");console.log("html模板未渲染:" + document.getElementById("num").innerText);},mounted() {console.log("=========mounted=============");console.log("html模板已渲染:" + document.getElementById("num").innerText);},beforeUpdate() {console.log("=========beforeUpdate=============");console.log("数据模型已更新:" + this.num);console.log("html模板未更新:" + document.getElementById("num").innerText);},updated() {console.log("=========updated=============");console.log("数据模型已更新:" + this.num);console.log("html模板已更新:" + document.getElementById("num").innerText);}});</script>
</body></html>

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 深入浅出WebRTC—ULPFEC
  • 挖掘基于边缘无线协同感知的低功耗物联网 (LPIOT) 的巨大潜力
  • 《梦醒蝶飞:释放Excel函数与公式的力量》18.2 数据可视化技术
  • Lianwei 安全周报|2024.07.22
  • go语言UTC时间转换为中国时间
  • 技术文档总结----思维导图
  • C#基础:数据库分表的好处和实现方式
  • gradle 构建项目添加版本信息
  • npm create-react-app 项目名报错
  • java题目之数字加密以及如何解密
  • 第一弹:基于ABAP OLE技术实现对服务器文件进行读写操作
  • HarmonyOS应用开发者高级认证,Next版本发布后最新题库 - 多选题序号3
  • springMVC常用注解
  • K8S 上部署 Prometheus + Grafana
  • VScode连接虚拟机运行Python文件的方法
  • [译] React v16.8: 含有Hooks的版本
  • Django 博客开发教程 16 - 统计文章阅读量
  • echarts花样作死的坑
  • gf框架之分页模块(五) - 自定义分页
  • JavaScript 基本功--面试宝典
  • JS笔记四:作用域、变量(函数)提升
  • js作用域和this的理解
  • Mysql5.6主从复制
  • PHP 7 修改了什么呢 -- 2
  • vue:响应原理
  • Vue实战(四)登录/注册页的实现
  • 从setTimeout-setInterval看JS线程
  • 使用Swoole加速Laravel(正式环境中)
  • k8s使用glusterfs实现动态持久化存储
  • # Apache SeaTunnel 究竟是什么?
  • ( 用例图)定义了系统的功能需求,它是从系统的外部看系统功能,并不描述系统内部对功能的具体实现
  • (1)(1.13) SiK无线电高级配置(五)
  • (1)Jupyter Notebook 下载及安装
  • (2022 CVPR) Unbiased Teacher v2
  • (附源码)php投票系统 毕业设计 121500
  • (计算机网络)物理层
  • (三) diretfbrc详解
  • (三)centos7案例实战—vmware虚拟机硬盘挂载与卸载
  • (转载)微软数据挖掘算法:Microsoft 时序算法(5)
  • (轉貼) VS2005 快捷键 (初級) (.NET) (Visual Studio)
  • ***php进行支付宝开发中return_url和notify_url的区别分析
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .desktop 桌面快捷_Linux桌面环境那么多,这几款优秀的任你选
  • .net 7 上传文件踩坑
  • .NET Core/Framework 创建委托以大幅度提高反射调用的性能
  • .NET Core引入性能分析引导优化
  • .Net Core中的内存缓存实现——Redis及MemoryCache(2个可选)方案的实现
  • .net framework 4.0中如何 输出 form 的name属性。
  • .NET MVC 验证码
  • .net 前台table如何加一列下拉框_如何用Word编辑参考文献
  • .Net中的设计模式——Factory Method模式
  • /etc/sudoers (root权限管理)
  • ?php echo ?,?php echo Hello world!;?
  • @Async 异步注解使用
  • @Autowired @Resource @Qualifier的区别