前端面试话术集锦第 12 篇：高频考点（Vue常考基础知识点）

已于 2023-10-07 09:38:37 修改
阅读量465 收藏 2
点赞数 1
分类专栏： 面试专栏-前端、后端面试 文章标签： 前端 面试 vue.js 求职招聘 职场和发展 跳槽 vue
于 2023-09-11 09:54:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/lvoelife/article/details/132696339
版权
本文详细介绍了Vue.js的生命周期、组件通信、extend、mixin与mixins的区别、computed与watch的用法，以及v-show与v-if的差异。此外，还探讨了在组件中何时使用对象作为data。这是前端面试的高频考点，适合求职者和开发者复习Vue基础知识。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

这是记录前端面试的话术集锦第十二篇博文——高频考点（Vue常考基础知识点），我会不断更新该博文。❗❗❗

这一章节我们将来学习Vue的一些经常考到的基础知识点。

1. 生命周期钩子函数

  1. 在beforeCreate钩子函数调用的时候，是获取不到props或者data中的数据的，因为这些数据的初始化都在initState中。

  2. 接着会执行created钩子函数，在这一步的时候已经可以访问到之前不能访问到的数据，但是这时候组件还没被挂载，所以是看不到的。

  3. 然后会先执行beforeMount钩子函数，开始创建VDOM，最后执行mounted钩子，并将VDOM渲染为真实DOM并且渲染数据。组件中如果有子组件的话，会递归挂载子组件，只有当所有子组件全部挂载完毕，才会执行根组件的挂载钩子。

  4. 继而是数据更新时会调用的钩子函数beforeUpdate和updated，这两个钩子函数没什么好说的，就是分别在数据更

了解本专栏 订阅专栏 解锁全文
前端面试话术集锦第 13 篇：高频考点（Vue常考进阶知识点）
念兮为美
09-12 405
响应式原理：Vue内部使⽤Object.defineProperty()来实现数据响应式，通过这个函数可以监听到set和get的事件；但它有缺陷：如果通过下标⽅式修改数组数据或者给对象新增属性，并不会触发组件的重新渲染，因为它不能拦截到这些操作；编译过程：Vue会通过编译器将模板通过⼏个阶段最终编译为render函数，然后通过执⾏render函数⽣成Virtual DOM最终映射为真实DOM；NextTick 原理分析：nextTick可以让我们在下次DOM更新循环结束后执⾏延迟回调，⽤于获得更新后的DOM
前端面试话术集锦第 14 篇：高频考点（React常考基础知识点）
念兮为美
09-12 655
Reconciliation阶段可以被打断，故Reconciliation阶段执行的生命周期函数可能会出现调用多次的情况，从而引起Bug。故对于Reconciliation阶段调用的几个函数，除了shouldComponentUpdate，其他都应该避免使用，且V16中引入了新的API来解决这个问题。setState在React中是常用的API，但它存在一些的问题经常会导致初学者出错，核心原因是这个API是异步的。父子组件通信；兄弟组件通信；跨多层级组件通信；任意组件：通过Redux或Event Bus解决
前端面试话术集锦第 15 篇：高频考点（React常考进阶知识点）
念兮为美
09-13 461
HOC是什么？相比mixins有什么优点？React的思想存在函数式编程，高阶组件和高阶函数是相同意思。我们实现个函数，传入一组件，然后在函数内部再实现一函数去扩展传入的组件，最后返回一新的组件，这就是高阶组件的概念，作用就是为了更好的复用代码。HOC和Vue中的mixins作用一致，且在早期React也是使用mixins的方式。JSX上写的事件并没有绑定在对应的真实DOM上，而是通过事件代理的方式，将所有的事件统一绑定在document上。这样的方式不仅减少内存消耗，还能在组件挂载销毁时统一订阅和移除事件
前端面试话术集锦第 16 篇：高频考点（前端监控 & UDP知识点）
念兮为美
09-14 470
前端监控一般分三种：页面埋点(PV/UV、停留时长、流量来源、用户交互，实现思路分为手写埋点和无埋点的方式)、性能监控(只需调用performance.getEntriesByType('navigation')这行代码就行)、异常监控(使用window.onerror拦截报错或异步代码使用catch的方式捕获错误)。网络协议是每个前端工程师都须要掌握的知识，我们先学习传输层中的两个协议：UDP以及TCP。UDP与TC的区别是什么：面向无连接、不可靠性、高效、传输方式；UDP适合使用的场景：直播、王者荣耀等
前端面试的话术集锦第 11 篇：高频考点（React和Vue两大框架）
念兮为美
09-11 556
前端面试的话术集锦第 11 篇：高频考点（React和Vue两大框架）什么是 MVVM？比之MVC有什么区别？什么是Virtual DOM？为什么Virtual DOM比原生DOM快？前端路由原理？两种实现方式有什么区别？Hash 模式和History模式；两种模式对比；Vue 和 React 之间的区别；React和Vue虽然是两个不同的框架，但是他们的底层原理都是很相似的，无非在上层堆砌了自己的概念上去。
前端面试的话术集锦第 9 篇：高频考点（webpack性能优化）
念兮为美
09-08 709
减少Webpack打包时间；优化Loader文件搜索范围；HappyPack将Loader同步执行转换为并行；DllPlugin将特定的类库提前打包然后引入；代码压缩：UglifyJS压缩代码、mode设置为production就可以默认开启以上功能；一些小的优化点：resolve.extensions、resolve.alias、module.noParse；减少Webpack打包后的文件体积；按需加载；Scope Hoisting分析模块间的依赖关系；Tree Shaking实现删除项目中未被引用的代码
前端面试的话术集锦第 10 篇：高频考点（实现小型打包工具）
念兮为美
09-08 424
前端面试的话术集锦第 10 篇：高频考点（实现小型打包工具）。在这一章节中，带大家来实现一个几十行的迷你打包工具，该工具可以实现以下两个功能：1.将ES6转换为ES5、2.支持在JS文件中import CSS文件。通过这个工具的实现，大家可以理解到打包工具的原理到底是什么。涉及到ES6转ES5，需要安装一些Babel相关的工具。虽然实现这个工具只写了不到100行的代码，但是打包工具的核心原理就是这些了：找出入口文件所有的依赖关系，然后通过构建CommonJS代码来获取exports导出的内容
前端面试的话术集锦第 7 篇：高频考点（浏览器渲染原理 & 安全防范）
念兮为美
09-07 958
前端面试的话术集锦第 7 篇：高频考点（浏览器渲染原理 & 安全防范）。浏览器渲染原理；渲染过程；浏览器接收到HTML⽂件并转换为DOM树；将CSS⽂件转换为CSSOM树；⽣成渲染树；为什么操作DOM慢；插⼊⼏万个DOM，如何实现⻚⾯不卡顿？什么情况阻塞渲染；重绘（Repaint）和回流（Reflow）；减少重绘和回流；安全防范；什么是XSS攻击？如何防范XSS攻击？什么是CSP？转义字符；CSP；什么是 CSRF 攻击？如何防范 CSRF 攻击；什么是点击劫持？如何防范点击劫持？
前端面试的话术集锦第 8 篇：高频考点（JS性能优化 & 性能优化琐碎事）
念兮为美
09-07 778
前端面试的话术集锦第 7 篇：高频考点（JS性能优化 & 性能优化琐碎事）。从V8中看JS性能优化1.1 测试性能⼯具；JS 性能优化；性能优化琐碎事；图⽚优化；计算图⽚⼤⼩；图⽚加载优化；DNS 预解析；节流；防抖；预加载；预渲染；懒执⾏；懒加载；CDN；Chrome已经提供了⼀个⼤⽽全的性能测试⼯具Audits；除了Audits⼯具之外，还有⼀个Performance⼯具也可以供我们使⽤。JS代码⾸先会解析为抽象语法树AST，然后会通过解释器或者编译器转化为Bytecode或者Machine Code。
微前端的不断探索之路—— qiankun 实战与思考！
喵手的博客
04-10 482
前端世界的技术更新频率就像是一场没有终点的马拉松，快到你刚熟悉一个框架，下一个趋势就已经掀起了新的浪潮。而近年来，微前端作为“架构界的顶流”，用它的灵活性和模块化特性给我们带来了全新的开发思路。今天，咱们就来聊聊微前端框架中的**“网红”选手**——qiankun。从它的基础概念到实战案例，再到我们在实际开发中的一些思考，希望带你更深地感受这个框架的魅力。qiankun是基于single-spa简单易用：开箱即用，几乎没有学习成本；完整性：解决了主流微前端框架的坑点，比如样式隔离、JS 沙箱等；
2.4、Vue2计算属性
GQL___的博客
04-11 645
使用Vue的原有属性，经过一系列的运算/计算，最终得到了一个全新的属性，叫做计算属性。Vue的原有属性: data对象当中的属性可以叫做Vue的原有属性。全新的属性: 表示生成了一个新的属性，和data中的属性无关了，新的属性也有自己的属性名和属性值。(1) 以上比较大小的案例可以用computed完成，并且比watch还要简单。所以要遵守一个原则：computed和watch都能够完成的，优先选择computed。(2) 如果要开启异步任务，只能选择watch。因为computed依靠return。
前端学习10—Ajax
最新发布
weixin_49157844的博客
04-11 566
XML（可扩展标记语言），被设计用来传输和存储数据，XML 和 HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，全都是自定义标签，用来表示一些数据比如有个学生数据：name = "孙悟空";age = 18;gender = "男";
vue3的router.ts中，在children和不在的区别
qq_62893228的博客
04-09 337
【代码】vue3的router.ts中，在children和不在的区别。
JS 函数提升
vain_soloist的博客
04-09 243
在执行前会把当前作用域下的函数声明提升到最前面 ，不提升函数调用。特殊的，使用函数表达式声明的函数没有函数提升。函数在声明前就可被使用。
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
yehaocheng520的博客
04-09 285
vue实现目录锚点且滚动到指定区域时锚点自动回显——双向锚点
Payload CMS 内容管理系统
qq_25547755的博客
04-10 614
Payload CMS 内容管理系统
⭐算法OJ⭐滑动窗口最大值【双端队列(deque)】Sliding Window Maximum
大葱的田地🌱
04-07 342
双端队列(deque，全称double-ended queue)是C++标准模板库(STL)中的一个容器适配器，它允许在队列的两端高效地进行插入和删除操作。滑动窗口最大值是一个经典的算法问题，我们需要找到数组中每个大小为k的滑动窗口中的最大值。我们可以使用双端队列(deque)来高效解决这个问题。主要思路是维护一个双端队列，队列中存储的是数组元素的索引，且队列中的元素按照从大到小的顺序排列。这样可以保证队列前端始终是当前窗口的最大值。
OpenBMC：BmcWeb 处理http请求7 完成http请求
风静如云的博客
04-09 200
上面说的特点其实是其析构函数，当最后一个被捕获的shared_ptr析构时(也就是完成了所有的响应数据的设置后)，shared_ptr会调用AsyncResp的析构函数，也就是调用了res.end();其实 AsyncResp类很简单，里面有一个crow::Response类型，用于保存响应数据。说过，由于AsyncResp设计的特点，需要捕获asyncResp的值[asyncResp]可以看到asyncResp是一个shared_ptr。1.AsyncResp类。构造了asyncResp。
传统项目纯前端实现导出excel之xlsx.bundle.js
qq_43016560的博客
04-10 306
自从vue问世后，使得前端开发更加简洁从容，极大的丰富组件样式和页面渲染效果，使得前端功能的可扩展性得到极大地加强。虽然vue的使用对于前后端分离的项目对于功能实现与扩展有了质的飞跃，但仍旧有些传统的项目步履维艰，功能延伸性开发束手束脚，效率相对低下，就比如在某些mvc+jsp页面要实现excel的导出功能，有时候会后端框架封装的约束，这个时候直接在前端实现excel导出，就变的极为方便。本文介绍一款js插件——xlsx.bundle.js
2023前端面试必备：Vue/React+基础数据类型与内存管理详解
在面试中，对这些基础概念的掌握不仅是考察候选人JavaScript语言基础的关键，还展示了他们对现代前端框架Vue和React的理解程度。Vue以其易用性和组件化设计闻名，而React则以其虚拟DOM和组件化思维为核心，面试者...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

互联网全栈开发实战

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值