没有合适的资源?快使用搜索试试~ 我知道了~
1、说说你对 SPA 单页面的理解,它的优缺点分别是什么? 2、v-show 与 v-if 有什么区别? 3、Class 与 Style 如何动态绑定? 4、怎样理解 Vue 的单向数据流? 5、computed 和 watch 的区别和运用的场景? 6、直接给一个数组项赋值,Vue 能检测到变化吗? 7、谈谈你对 Vue 生命周期的理解? 8、Vue 的父组件和子组件生命周期钩子函数执行顺序? 9、在哪个生命周期内调用异步请求? 10、在什么阶段才能访问操作DOM? 11、父组件可以监听到子组件的生命周期吗? 12、谈谈你对 keep-alive 的了解? 13、组件中 data 为什么是一个函数? 14、v-model 的原理? 15、Vue 组件间通信有哪几种方式? 16、你使用过 Vuex 吗? 17、使用过 Vue SSR 吗?说说 SSR? 18、vue-router 路由模式有几种? 19、能说下 vue-router 中常用的 hash 和 history 路由模式实现原理吗? 20、什么是 MVVM? 21、Vue 是如何实现数据双向绑定的? 等等
资源推荐
资源详情
资源评论
详解 30 道 Vue 面试题
本文以前端面试官的角度出发,对 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>
� 数组语法:
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
Style 也可以通过对象语法和数组语法进行动态绑定:
� 对象语法:
<div v-bind:style="{ color: activeColor, fontSize: fontSize +
'px' }"></div>
� 数组语法:
<div v-bind:style="[styleColor, styleSize]"></div>
4、怎样理解 Vue 的单向数据流?
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级
prop 的更新会向下流动到子组件中,但是反过来则不行。
这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数
据流向难以理解。
额外的,每次父级组件发生更新时,子组件中所有的 prop 都将会刷新
为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你
这样做了,Vue 会在浏览器的控制台中发出警告。
子组件想修改时,只能通过 $emit 派发一个自定义事件,父组件接收
到后,由父组件修改。
有两种常见的试图改变一个 prop 的情形 :
� 这个 prop 用来传递一个初始值;这个子组件接下来希望将其作
为一个本地的 prop 数据来使用。 在这种情况下,最好定义一个
本地的 data 属性并将这个 prop 用作其初始值:
props: ['initialCounter'],
� 这个 prop 以一种原始的值传入且需要进行转换。 在这种情况下,
最好使用这个 prop 的值来定义一个计算属性
5、computed 和 watch 的区别和运用的场景?
computed: 是计算属性,依赖其它属性值,并且 computed 的值有缓
存,只有它依赖的属性值发生改变,下一次获取 computed 的值时才
会重新计算 computed 的值;
watch: 更多的是「观察」的作用,类似于某些数据的监听回调 ,每
当监听的数据变化时都会执行回调进行后续操作;
运用场景:
� 当我们需要进行数值计算,并且依赖于其它数据时,应该使用
computed,因为可以利用 computed 的缓存特性,避免每次获取
值时,都要重新计算;
� 当我们需要在数据变化时执行异步或开销较大的操作时,应该使
用 watch,使用 watch 选项允许我们执行异步操作 ( 访问一个
API ),限制我们执行该操作的频率,并在我们得到最终结果前,
设置中间状态。这些都是计算属性无法做到的。
6、直接给一个数组项赋值,Vue 能检测到变化吗?
由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:
� 当 你 利 用 索 引 直 接 设 置 一 个 数 组 项 时 , 例 如 :
vm.items[indexOfItem] = newValue
� 当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一个问题,Vue 提供了以下操作方法:
为了解决第二个问题,Vue 提供了以下操作方法:
7、谈谈你对 Vue 生命周期的理解?
(1)生命周期是什么?
剩余29页未读,继续阅读
资源评论
2301_76571514
- 粉丝: 430
- 资源: 8
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 111111111111111111
- Screenshot_2024-04-30-21-47-24-26.jpg
- Cpp1.cpp1111111111
- 利用ERP流程操作的整个订单流程.ppt
- 最新二开版本源码博客论坛源码,UI很漂亮,可切换皮肤界面.rar
- ModStartBlog现代化个人博客系统 v5.2.0源码.rar
- 带posix库的mingw编译器
- SoraAI是一款功能强大的AI助手,由OpenAI开发,以其出色的语音识别技术、广泛的知识库和高度的人工智能特性而备受瞩目
- Thinkphp开发大气响应式个人博客青春博客网站源码.rar
- 最新PHP博客网站程序源码 ThinkPHP.rar
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功