（七）不只是 huohuo 的 Vue 面试题

最新推荐文章于 2022-05-09 10:31:03 发布
最新推荐文章于 2022-05-09 10:31:03 发布
阅读量272 收藏
点赞数 1
分类专栏： 前端面试 Vue 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huohuoit/article/details/119568428
版权
本文探讨前端渲染、响应式原理，深入解析Vue的响应式系统和双向数据绑定实现。通过Object.defineProperty实现数据劫持，理解MVVM模式在Vue中的应用及其优缺点，并对比MVC。此外，还介绍了简易MVVM的实现。
摘要由CSDN通过智能技术生成

终于来到了框架部分，我们所熟悉的前端框架的底层都是 JS，所以我们更应该关注的是框架的思想原理及源码设计。基本的使用部分，推荐详看官方文档。因为时间和精力优先，这里暂时只给出文章整体脉络，后续慢慢补充完整。

如何理解前端渲染

把数据填充到HTML标签中：模板 + 数据 →前端渲染→静态HTML内容

more

如何理解响应式

Html5 中的响应式

屏幕尺寸的变化导致样式的变化

数据的响应式

数据的变化导致页面内容的变化

Vue 的响应式系统

  • 任何⼀个 Vue Component 都有⼀个与之对应的 Watcher 实例
  • Vue 的 data 上的属性会被添加 getter 和 setter 属性
  • 当 Vue Component render 函数被执⾏的时候, data 上会被 触碰(touch)，即被读，getter ⽅法会被调用，
最低0.47元/天 解锁文章
huohuoit
关注
专栏目录
（五）不只是 huohuo 的 JS 面试题
huohuoit的博客
07-26 700
写过最多的是 JS 相关的文章，做过最完整的是 JS 的思维导图，敲过最多的依然是 JS 代码，我觉得自己的 JS 还算可以了。写到这里的时候，我已经离职一周，参加了几次面试，大多数问题都能按自己的理解回答上来，同时，也让我意识到，那只是我以为的可以，只是没有遇到真正厉害的面试官罢了 ~ 写 JS 面试题之前，我纠结了好多次，我已经看过很多优秀的相关文章了，也写过很多各种各样的笔记了，还有没有必要再重复写。面完几次之后，有过正确解答，也有一知半解。有些问题让我意识到，这不是一次重复，而是一次重新认识，..
（一）不只是 huohuo 的 HTML 面试题
huohuoit的博客
06-22 189
这里我应该是有一些话想说的，可能一刹那的特殊情感未到，没想好到底要说哪些话，先占个坑~~~ HTML部分并不是前端面试中的重点，在组件化流行的开发背景下，其中丰富的标签也似乎难以出现在我们手底敲打的代码中。似渐行渐远，也似自己还未触及到哪个壁垒，这里还是想在自己回顾的同时好好探究一番遇到的相关问题。同时，也是为了知识体系的完整性，就先从此篇开始。好吧，其实也因为我有点整洁完整强迫症哈哈哈~~~ VScode 永远的神！ 也许我们习惯了脚手架，习惯了 template，但我们仍然不能忘了HTM..
（四）不只是 huohuo 的 CSS 面试题
huohuoit的博客
07-13 341
终于到了 CSS 篇了，好像可以放松一些了，可能相比于前面两篇，你会觉得 CSS 要简单很多吧。不会吧不会吧，不会真有人觉得 CSS 简单吧？不知道你是否认同， CSS 是所有编程语言里最好玩的一门语言。但是我想你必须认同张鑫旭老师的神作《CSS世界》，从中你势必跟我一样会发现 CSS 是有多么的奇妙啊！ 由于个人职业规划上时间原因，我并未好好的读完这本神作，但是在这篇文章里，我一定会在读完后写下自己所有的理解，请保持期待哦！ 所以，关于这一篇，目前的结构是以核心面试题问答的形式展开 ~ .
（二）不只是 huohuo 的 浏览器 面试题
huohuoit的博客
06-23 625
按照网上习惯性的文章撰写路线，第二篇应该是 CSS，也确实，各种各样的标签，也是由CSS在背后默默地做属性支持。但是对于 HTML 的很多问题，跟浏览器的关系太大了，让我不禁想去好好看看 HTML 跟浏览器之间的那些事。另外，可能一提到前端，绝大多数人都会脱口而出“JavaScript”，不过我觉得 CSS 才是前端技术里最精彩绝伦的技术，所以后面我会对 CSS 做一个特殊处理，先让我先把浏览器相关面试题做一份梳理吧。 ...
（六）不只是 huohuo 的 JS 面试题--续
郊眠寺
05-09 173
谈谈你对 this 的了解 对于this关键字，在OOP编程语言中我们再熟悉不过了，在 C++、C#、Java 中，或许你可以使用得顺手捏来，但是在JS中，用起来可是要混乱的多了喔！ this 指向问题 我相信这个问题给大家带来过不少的困扰，可能当面试官问你，这个时候或那个时候，this指向哪，你都能正确说出，但是当面试官把问题包装下，不直接问你，很多人就摸不着头脑了 要判断this的指向，我们首先要明确一点： this的指向不是在编写时确定的，而是在执行时确定的，且遵循了一定的规则 默认情况下：this
（六）不只是 huohuo 的 JS 面试题-续
huohuoit的博客
08-08 217
JS 的内容实在太多太多了，上一篇也写了挺久了，两万多字对于一篇博客来说有些太长了，所以开了这篇续篇。但是目前主要精力不会着手于这篇文章，因为实在太忙了，最近还有一些面试需要准备，框架和算法都还没好好复习到。所以这篇暂时先列出一些主题内容，过段时间再来好好整理啦！ ...
（三）不只是 huohuo 的 HTTP/TCP 面试题
huohuoit的博客
07-04 312
在上一篇，我们讲了很多关于浏览器的问题，其中谈到了很多次 HTTP 、TCP 。那么，这一篇，我们就主要来讲讲关于 HTTP 的问题吧 ~
不只是 huohuo 的 前端安全 面试题
梅花寺
05-09 170
什么是 XSS 攻击？ 简而言之，就是页面被注入了恶意代码。 攻击者通过在目标网站上注入恶意脚本，使之在用户的浏览器上运行。利用这些恶意脚本，攻击者可获取用户的敏感信息如Cookie、SessionID等，进而危害数据安全。 本质：恶意代码未经过滤，与网站正常的代码混在一起；浏览器无法分辨哪些脚本是可信的，导致恶意脚本被执行。而由于直接在用户的终端执行，恶意代码能够直接获取用户的信息，或者利用这些信息冒充用户向网站发起攻击者定义的请求。 如何进行的 XSS 攻击？ 有哪些地方可以被攻击呢？ 用户输入片段
Vue电商项目中遇到的一些问题
huohuoit的博客
07-29 1309
1、为什么vue组件有的写成export default，有什么用？ 声明一个vue，相当于 new Vue({}) 达到可复用的目的，也就是说，export default 相当于导出当前vue组件，在其它引入当前组件时可以使用当前组件中的方法和变量。 2、export和 exportdefault的区别 export可以导出多个命名模块，引入时（都用import）用大括号括起来 exportdefault只能导出一个默认模块，这个模块可匿名，引入的时候可以给这个模块取任意名字，且...
前端面试----深信服面试题全概
huohuoit的博客
07-16 4420
这里结合了CSDN多位博主的深信服面试题，为了锻炼自己的答题能力和技术点理解，这里对博主的各个题目进行了自己的解答（最好用自己的理解自己的话解答），同时部分解答借鉴了博主的回答。记在word笔记的时候没有记录博主地址，但还是感谢分享，一起努力加油啊！ 一、HTML （1）常见的HTML块级元素和行内元素 （2）HTML5的新标签有什么了解，详述一下表单的新标签 （3）Image标签中alt和title有什么区别 二、CSS （1）CSS盒子模型（IE盒子模型，标准盒子模型） （2）CSS元素居
字节跳动前端面试总结（持续更新）
huohuoit的博客
06-24 2464
一、HTML 二、CSS 三、JS 1、setTimeOut()和setInterval()的区别 都是用来处理延时和定时任务的函数 setTimeOut()只延迟执行一次，且是在指定的毫秒数之后再调用函数。setInterval()是一段时间执行一次，可以执行多次，是在每隔指定的毫秒数循环调用函数，直到clearInterval把它清除掉。 2、原型链继承 让子类的原型对象（prototype）指向父类的实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从..
ES6-promise（阮一峰ES6读后总结）
huohuoit的博客
06-12 1348
一、Promise的含义 Promise是异步编程的一种解决方案，语法上来说是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理，使得控制异步操作更加容易 。 Promise对象的两个特点： 1、对象的状态不受外界影响 Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败） 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态 2、.
2021Vue经典面试题总结（1）
huohuoit的博客
05-31 1098
一、基础 1.父子组件传值 （1）父传子 父组件通过属性将值传递给子组件，子组件内部通过props接收传递过来的值 <menu-item title="来自父组件的数据"></menu-item> <menu-item :title="title"></menu-item> Vue.component('menu-item', { props: ['title'], template: '<div>{{ t...
JS-构造函数和原型（constructor、__proto__、prototype）
huohuoit的博客
06-09 888
一、构造函数和原型 1、概述 在 ES6之前 ，对象不是基于类创建的，而是用一种称为构建函数的特殊函数来定义对象和它们的特征。 创建对象可以通过以下三种方式： 1. 对象字面量 2. new Object() 3. 自定义构造函数 2、构造函数 构造函数是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 一起使用。我 们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。 （1）在 JS 中，使用构造函数时要注意以下两点.
JS-详细的防抖和节流
huohuoit的博客
06-11 649
1、防抖和节流 防抖 节流 概念 短时间频繁触发同一事件，只会执行一次函数 函数每隔一段时间只会执行一次 实现原理 设置一个计时器，约定在XX毫秒后再触发事件处理，每次触发事件都会重新设置计时器，直到XX毫秒内无第二次操作 设置一个计时器，约定XX毫秒后执行事件，如果时间到了，就执行函数，并重置计时器 应用场景 搜索框/滚动条的监听事件处理等。如果不做防抖，每输入一个字/滚动屏幕，都会触发事件处理，造成性能浪费 窗口调整，页面滚动，抢购疯狂..
Vue经典面试题总结（2）进阶篇
huohuoit的博客
07-14 634
1、描述组件渲染和更新过程 渲染组件时，会通过 Vue.extend 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程.核心就是diff算法 2、组件中的 data为什么是一个函数? 同一个组件被复用多次，会创建多个实例。这些实例用的是同一个构造函数，如果 data 是一个对象的 话。那么所有组件都共享了同一个对象。为了保证组件的数据独立性要求每个组件必须通过 data 函数 返回一个对象作为组件的状态。 3、Vue中事件
2021前端精选文章总结
huohuoit的博客
02-01 500
半年没有怎么在CSDN写新文章了，有很多话想讲在开头，但是想先放一放，我已经迫不及待想随着自己的面试复习计划更新自己认真看过的精彩文章了！！！接下来我会常常更新这篇博客记录的文章，作为自己深入复习和制作思维导图基础记录。加油吧，小伙子！ （打基础都可以看看，但是我更推荐想深入理解的小伙伴看，此行的目的主要还是偏向理解原理啊。可能目前有点乱，但请谅解，没有太多时间来美化，我真的迫不及待把设定好的复习框架搞定了！让我开始吧！） 这里我先记录一些暂未未整理优秀的博主和文章 花神：https://juejin
多角度看Vue中常见的性能优化
huohuoit的博客
07-14 366
Vue中常见的性能优化？ （1）编码优化 不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher vue 在 v-for 时给每项元素绑定事件需要用事件代理 SPA 页面采用keep-alive缓存组件 拆分组件( 提高复用性、增加代码的可维护性,减少不必要的渲染 ) v-if 当值为false时内部指令不会执行,具有阻断功能，很多情况下使用v-if替代v-show key 保证唯一性 ( 默认 vue 会采用就地复用策略 ) ...
string.indexOf(string)
最新发布
07-27
- *1* *2* [String.indexOf()的四种方法](https://blog.csdn.net/huohuo5211314/article/details/121718176)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值