2024年前端最全【Vue入门必备知识篇03】--- 生命周期 & 数据共享，2024年最新项目面试是什么意思啊

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

• 3.5 让文本框自动获得焦点

• 3.6 this.$nextTick(cb) 方法

• 二、总结

一、生命周期 & 数据共享

---

（1）组件的生命周期

1.1 生命周期 & 生命周期函数

1️⃣ 生命周期（Life Cycle）是指一个组件从创建 → 运行 → 销毁的整个阶段，强调的是一个时间段。

2️⃣ 生命周期函数：是由 vue 框架提供的内置函数，会伴随着组件的生命周期，自动按次序执行。

😆温馨提醒😆：生命周期强调的是时间段，生命周期函数强调的是时间点。

1.2 组件生命周期函数的分类

1.3 生命周期图示

可以参考 vue 官方文档给出的“生命周期图示”，进一步理解组件生命周期执行的过程：https://cn.vuejs.org/v2/guide/instance.html#生命周期图示

---

（2）组件之间的数据共享

2.1 组件之间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：

1. 父子关系

2. 兄弟关系

2.2 父子组件之间的数据共享

父子组件之间的数据共享又分为：

1. 父 → 子共享数据

2. 子 → 父共享数据

2.2.1 父组件向子组件共享数据

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

2.2.2 子组件向父组件共享数据

子组件向父组件共享数据使用自定义事件。示例代码如下：

2.3 兄弟组件之间的数据共享

在 vue2.x 中，兄弟组件之间数据共享的方案是EventBus。

😆EventBus 的使用步骤😆：

1. 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象；

2. 在数据发送方，调用 bus.$emit(‘事件名称’, 要发送的数据) 方法触发自定义事件；

3. 在数据接收方，调用 bus.$on(‘事件名称’, 事件处理函数) 方法注册一个自定义事件；

---

（3）ref 引用

3.1 什么是 ref 引用

1️⃣ ref 用来辅助开发者在不依赖于jQuery 的情况下，获取 DOM 元素或组件的引用。

2️⃣ 每个 vue 的组件实例上，都包含一个$refs 对象，里面存储着对应的DOM 元素或组件的引用。默认情况下，组件的 $refs 指向一个空对象。

代码演示如下：

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

ms/4304bb5a486d4c3ab8389e65ecb71ac0)**

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。