没有合适的资源?快使用搜索试试~ 我知道了~
30道精选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' }"></d
iv>
data: {
activeColor: 'red',
fontSize: 30
}
数组语法:
<div v-bind:style="[styleColor, styleSize]"></div>
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: 更多的是「观察」的作用,类似于某些数据的监听回
调 ,每当监听的数据变化时都会执行回调进行后续操作;运用场景:
当 我 们 需 要 进 行 数 值 计 算 , 并 且 依 赖 于 其 它 数 据 时 , 应 该 使 用 computed, 因 为 可 以 利 用
computed 的缓存特性,避免每次获取值时,都要重新计算;
当我们需要在数据变化时执行异步或开销较大的操作时,应该使用 watch,使用 watch 选项
允许我们执行异步操作 ( 访问一个 API ),限制我们执行该操作的频率,并在我们得到最终结果
前,设置中间状态。这些都是计算属性无法做到的。
6、直接给一个数组项赋值,Vue 能检测到变化吗?
由于 JavaScript 的限制,Vue 不能检测到以下数组的变动:
当你利用索引直接设置一个数组项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength
为了解决第一个问题,Vue 提供了以下操作方法:
// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set,Vue.set 的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)
为了解决第二个问题,Vue 提供了以下操作方法:
// Array.prototype.splice
vm.items.splice(newLength)
7、谈谈你对 Vue 生命周期的理解?
(1)生命周期是什么?Vue 实例有一个完整的生命周期,也就是从开始创建、初
始化数据、编译模版、挂载 Dom -> 渲染、更新 -> 渲染、卸载等一系列过程,我
们称这是 Vue 的生命周期。(2)各个生命周期的作用生命周期描述
beforeCreate
组件实例被创建之初,组件的属性生效之前
created
组件实例已经完全创建,属性也绑定,但真实 dom 还没有生成,$el 还不可用
beforeMount
在挂载开始之前被调用:相关的 render 函数首次被调用
mounted
el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子
beforeUpdate
组件数据更新之前调用,发生在虚拟 DOM 打补丁之前
update
组件数据更新之后
activited
keep-alive 专属,组件被激活时调用
deadctivated
keep-alive 专属,组件被销毁时调用
beforeDestory
组件销毁前调用
destoryed
组件销毁后调用
剩余26页未读,继续阅读
资源评论
牛牛821
- 粉丝: 1
- 资源: 1
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功