没有合适的资源？快使用搜索试试~ 我知道了~

文库首页前端Node.js详解30个常见Vue面试题

详解30个常见Vue面试题

vue.js

vue

需积分: 5 0 下载量 108 浏览量 2023-10-09 14:57:42 上传评论收藏 57KB DOCX 举报

温馨提示

试读

39页

本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对 Vue 有更好的掌握。文章最后一题，欢迎同学们积极回答，分享各自的经验 ~~~

资源推荐

资源详情

资源评论

最全vue面试题+详解答案.pdf

入门级Vue 面试题+详解答案.pdf

第十七届全国大学生智能车竞赛技术报告。

前言

本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框

架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下

Vue 掌握的程度。

本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，

当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也

能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补，对

Vue 有更好的掌握。文章最后一题，欢迎同学们积极回答，分享各自

的经验 ~~~

1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相

应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因

为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由

机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加

载。优点：

� 用户体验好、快，内容的改变不需要重新加载整个页面，避免了

不必要的跳转和重复渲染；

� 基于上面一点，SPA 相对对服务器压力小；

� 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据

处理；

缺点：

� 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需

要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面

按需加载；

� 前进后退路由管理：由于单页应用在一个页面中显示所有的内

容，所以不能使用浏览器的前进后退功能，所有的页面切换需要

自己建立堆栈管理；

� SEO 难度较大：由于所有的内容都在一个页面中动态替换显

示，所以在 SEO 上其有着天然的弱势。

2、v-show 与 v-if 有什么区别？

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件

监听器和子组件适当地被销毁和重建；也是惰性的：如果在初始渲染

时条件为假，则什么也不做——直到条件第一次变为真时，才会开始

渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，

并且只是简单地基于 CSS 的 “display” 属性进行切换。所以，v-if

适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show

则适用于需要非常频繁切换条件的场景。

3、Class 与 Style 如何动态绑定？

Class 可以通过对象语法和数组语法进行动态绑定：

� 对象语法：

<div v-bind:class="{ active: isActive, 'text-danger':

hasError }"></div>

data: {

isActive: true,

hasError: false

}

� 数组语法：

<div v-bind:class="[isActive ? activeClass : '',

errorClass]"></div>

data: {

activeClass: 'active',

errorClass: 'text-danger'

}

Style 也可以通过对象语法和数组语法进行动态绑定：

� 对象语法：

<div v-bind:style="{ color: activeColor, fontSize: fontSize +

'px' }"></div>

data: {

activeColor: 'red',

fontSize: 30

}

� 数组语法：

data: {

styleColor: {

color: 'red'

styleSize:{

fontSize:'23px'

}

4、怎样理解 Vue 的单向数据流？

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父

级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会

防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流

向难以理解。

额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷

新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如

果你这样做了，Vue 会在浏览器的控制台中发出警告。

子组件想修改时，只能通过 $emit 派发一个自定义事件，父组件接收

到后，由父组件修改。

有两种常见的试图改变一个 prop 的情形 :

� 这个 prop 用来传递一个初始值；这个子组件接下来希望将其

作为一个本地的 prop 数据来使用。在这种情况下，最好定义

一个本地的 data 属性并将这个 prop 用作其初始值：

props: ['initialCounter'],

data: function () {

return {

counter: this.initialCounter

}

� 这个 prop 以一种原始的值传入且需要进行转换。在这种情况

下，最好使用这个 prop 的值来定义一个计算属性

props: ['size'],

computed: {

normalizedSize: function () {

return this.size.trim().toLowerCase()

}

5、computed 和 watch 的区别和运用的场景？

computed：是计算属性，依赖其它属性值，并且 computed 的值

有缓存，只有它依赖的属性值发生改变，下一次获取 computed 的

值时才会重新计算 computed 的值；

watch：更多的是「观察」的作用，类似于某些数据的监听回调，

每当监听的数据变化时都会执行回调进行后续操作；

运用场景：

剩余38页未读，继续阅读

评论收藏

内容反馈

资源评论

资源反馈

评论星级较低，若资源使用遇到问题可联系上传者，3个工作日内问题未解决可申请退款~

程序猿的Code日常

粉丝: 513
资源: 478

上传资源快速赚钱

我的内容管理展开

我的资源快来上传第一个资源

我的收益

登录查看自己的收益

我的积分登录查看自己的积分

我的C币登录后查看C币余额

我的收藏

我的下载

下载帮助

前往需求广场，查看用户热搜

详解30个常见Vue面试题

vue面试题2020(25道)+vue3.0详解.md

详解30道Vue面试题

最全的Vue面试题+详解答案-vue面试题

最全vue面试题+详解答案.pdf

29个Vue经典面试题（附源码级详解)

50+Vue经典面试题详解，你值得收藏

50+Vue经典面试题详解，你值得收藏.docx

30道Vue面试题详解.doc

详解30道Vue面试题带答案建议收藏.docx

vue面试题详解.md

2023最新Vue面试题+详解答案

最全常见vue面试题+详解答案（建议收藏）

vue面试题且全部详解

最全vue面试题+详解答案

入门级Vue 面试题+详解答案.pdf

最全vue面试题+详解答案2023版.pdf

最全的 Vue 面试题+详解答案

详解30道Vue面试题.docx

第十七届全国大学生智能车竞赛技术报告

32个uniapp项目源码 涵盖商城团购等

反编译脚本解包 wxapkg

video downloadhelper 合作应用2.0.10版本.

CSDN积分的获取方式

web端播放rtsp/rtmp视频流demo

chatGPT商业版源码和教程.zip

100套大数据可视化大屏模板

微信小程序反编译脚本（配合Node.js使用）

stealth.min.js

VueSerial的usb.json

最新资源

32个uniapp项目源码涵盖商城团购等