vue前端面试题知识点整理
1. 说一下Vue的双向绑定数据的原理
vue
实现数据双向绑定主要是:采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()
来劫持各个属性的setter
,getter
,在数据变动时发布消息给订阅者,触发相应监听回调
2. 解释单向数据流和双向数据绑定
单向数据流: 顾名思义,数据流是单向的。数据流动方向可以跟踪,流动单一,追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种
action
来维护对应的state
双向数据绑定:数据之间是相通的,将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下,会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化,增加了出错时
debug
的难度
3. Vue 如何去除url中的 #
vue-router
默认使用 hash
模式,所以在路由加载的时候,项目中的 url
会自带 #
。如果不想使用 #
, 可以使用 vue-router
的另一种模式 history
new Router({
mode: 'history',
routes: [ ]
})
需要注意的是,当我们启用
history
模式的时候,由于我们的项目是一个单页面应用,所以在路由跳转的时候,就会出现访问不到静态资源而出现404
的情况,这时候就需要服务端增加一个覆盖所有情况的候选资源:如果URL
匹配不到任何静态资源,则应该返回同一个index.html
页面
4. 对 MVC、MVVM的理解
MVC
特点:
-
View
传送指令到Controller
-
Controller
完成业务逻辑后,要求Model
改变状态 -
Model
将新的数据发送到View
,用户得到反馈
所有通信都是单向的
MVVM
特点:
- 各部分之间的通信,都是双向的
- 采用双向绑定:
View
的变动,自动反映在ViewModel
,反之亦然
具体请移步 这里
5. 介绍虚拟DOM
6. vue生命周期的理解
vue实例有一个完整的生命周期,生命周期也就是指一个实例从开始创建到销毁的这个过程
-
beforeCreated()
在实例创建之间执行,数据未加载状态 -
created()
在实例创建、数据加载后,能初始化数据,dom
渲染之前执行 -
beforeMount()
虚拟dom
已创建完成,在数据渲染前最后一次更改数据 -
mounted()
页面、数据渲染完成,真实dom
挂载完成 -
beforeUpadate()
重新渲染之前触发 -
updated()
数据已经更改完成,dom
也重新render
完成,更改数据会陷入死循环 -
beforeDestory()
和destoryed()
前者是销毁前执行(实例仍然完全可用),后者则是销毁后执行
7. 组件通信
父组件向子组件通信
子组件通过 props
属性,绑定父组件数据,实现双方通信
子组件向父组件通信
将父组件的事件在子组件中通过 $emit
触发
非父子组件、兄弟组件之间的数据传递
/*新建一个Vue实例作为*事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.')
Vuex 数据管理
8. vue-router 路由实现
路由就是用来跟后端服务器进行交互的一种方式,通过不同的路径,来请求不同的资源,请求不同的页面是路由的其中一种功能
参考 这里
9. v-if 和 v-show 区别
使用了
v-if
的时候,如果值为false
,那么页面将不会有这个html
标签生成。
v-show
则是不管值为true
还是false
,html
元素都会存在,只是CSS
中的display
显示或隐藏
10. $route和$router的区别
$router
为VueRouter
实例,想要导航到不同URL
,则使用$router.push
方法
$route
为当前router
跳转对象里面可以获取name
、path
、query
、params
等
11. NextTick 是做什么的
$nextTick
是在下次DOM
更新循环结束之后执行延迟回调,在修改数据之后使用$nextTick
,则可以在回调中获取更新后的DOM
具体可参考官方文档 深入响应式原理
12. Vue 组件 data 为什么必须是函数
因为js本身的特性带来的,如果
data
是一个对象,那么由于对象本身属于引用类型,当我们修改其中的一个属性时,会影响到所有Vue实例的数据。如果将data
作为一个函数返回一个对象,那么每一个实例的data
属性都是独立的,不会相互影响了
13. 计算属性computed 和事件 methods 有什么区别
我们可以将同一函数定义为一个 method
或者一个计算属性。对于最终的结果,两种方式是相同的
不同点:
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值
对于
method
,只要发生重新渲染,method
调用总会执行该函数
14. 对比 jQuery ,Vue 有什么不同
jQuery 专注视图层,通过操作 DOM 去实现页面的一些逻辑渲染; Vue 专注于数据层,通过数据的双向绑定,最终表现在 DOM 层面,减少了 DOM 操作
Vue 使用了组件化思想,使得项目子集职责清晰,提高了开发效率,方便重复利用,便于协同开发
15. Vue 中怎么自定义指令
全局注册
// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})
局部注册
directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}
参考 官方文档-自定义指令
16. Vue 中怎么自定义过滤器
可以用全局方法
Vue.filter()
注册一个自定义过滤器,它接收两个参数:过滤器ID
和过滤器函数。过滤器函数以值为参数,返回转换后的值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<!-- 'abc' => 'cba' -->
<span v-text="message | reverse"></span>
过滤器也同样接受全局注册和局部注册
17. 对 keep-alive 的了解
keep-alive
是Vue
内置的一个组件,可以使被包含的组件保留状态,或避免重新渲染
<keep-alive>
<component>
<!-- 该组件将被缓存! -->
</component>
</keep-alive>
可以使用API提供的props,实现组件的动态缓存
具体参考 官方API
18. Vue 中 key 的作用
key
的特殊属性主要用在Vue
的虚拟DOM
算法,在新旧nodes
对比时辨识VNodes
。如果不使用key
,Vue
会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。使用key
,它会基于key
的变化重新排列元素顺序,并且会移除key
不存在的元素。有相同父元素的子元素必须有独特的
key
。重复的key
会造成渲染错误
具体参考 官方API
19. Vue 的核心是什么
数据驱动 组件系统
20. vue 等单页面应用的优缺点
优点:
- 良好的交互体验
- 良好的前后端工作分离模式
- 减轻服务器压力
缺点:
- SEO难度较高
- 前进、后退管理
- 初次加载耗时多
vue前端面试题知识点整理的更多相关文章
-
Vue 前端面试题[转]
https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNw Vue 前端面试题 游荡de蝌蚪 前端开发 1周前 作者:游荡de蝌蚪 https://segmen ...
-
Vue 前端面试题
Vue 前端面试题 1. 说一下 Vue 的双向绑定数据的原理 vue 实现数据双向绑定主要是:采用数据劫持结合“发布者 - 订阅者”模式的方式,通过 Object.defineProperty() ...
-
2018 vue前端面试题
1.active-class是哪个组件的属性?嵌套路由怎么定义?答:vue-router模块的router-link组件. 2.怎么定义vue-router的动态路由?怎么获取传过来的动态参数? 答: ...
-
VUE前端面试题
什么是 mvvm? MVVM 是 Model-View-ViewModel 的缩写.mvvm 是一种设计思想.Model 层代表数据模型,也可以在 Model 中定义数据修改和操作的业务逻辑:View ...
-
2016最全的web前端面试题及答案整理
面试web前端开发,不管是笔试还是面试,都会涉及到各种专业技术问题,今天小编整理了一些常见的web前端面试题及答案,希望对大家有所帮助. 1.常用那几种浏览器测试?有哪些内核(Layout Engin ...
-
2019前端面试题汇总(主要为Vue)
摘要: 经典面试题. 原文:2019前端面试题汇总(主要为Vue) 作者:前端小酱 Fundebug经授权转载,版权归原作者所有. 毕业之后就在一直合肥小公司工作,没有老司机.没有技术氛围,在技术的道 ...
-
前端面试题汇总(主要为 Vue)
前端面试题汇总 1. 谈谈你对MVVM开发模式的理解 MVVM分为Model.View.ViewModel三者. 1)Model:代表数据模型,数据和业务逻辑都在Model层中定义: 2)View:代 ...
-
前端面试题(VUE)
(前端面试题大全,持续更新) vue:v-model 双向绑定的原理 依赖收集 虚拟DOM的作用 vue@3.0中的preset配置? 父组件A和其子组件B/子组件C,B/C进行通信的方式(怎么通信) ...
-
【web前端面试题整理02】前端面试题第二弹袭来,接招!
前言 今天本来准备先了解下node.js的,但是,看看我们一个小时前与一个小时后的差距: 既然如此,我们继续来搜集我们的前端面试题大业吧!!! 特别感谢玉面小肥鱼提供哟,@玉面小飞鱼 题目一览 Jav ...
随机推荐
-
CentOS配置git和maven自动部署java
#安装Git yum install git #测试是否成功 git -version #正确 #git version 1.7.1 #配置git config --global user.name ...
-
javascript运动系列第六篇——轨迹和投掷
× 目录 [1]运动轨迹 [2]拖拽轨迹 [3]投掷 前面的话 一般地,不同的运动形式会产生不同的轨迹.但仅凭肉眼去识别运动轨迹,其实并不是很直观.因此,在页面中显示运动轨迹,是一个重要的问题.物体初 ...
-
关于mysql 查询内容不区分大小问题
问题描述: select * from users where user_name ='user_01' 跟 select * from users where user_name ='uSer_01 ...
-
6.3 Android Framework
Android的四层架构分别为Linux2.6内核层,核心库层,应用框架层,应用层.Framework层为我们开发应用程序提供了非常多的API,满足我们业务上的需求.(Android是基于Linux内 ...
-
关于https的Error:Error Domain=NSURLErrorDomain Code=-1012
昨天闲着没事就随便搞点demo,随便找了一个https的接口,运行之后,一直发现Error Domain=NSURLErrorDomain Code=-1012.好奇怪,请求https的配置我基本都配 ...
-
js中arguments,caller,callee,apply的用法小结
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <style typ ...
-
Core身份认证
Core中实现一个基础的身份认证 注:本文提到的代码示例下载地址> How to achieve a basic authorization in ASP.NET Core 如何在ASP.NET ...
-
Ext.js form 表单提交问题
var form = new Ext.form.FormPanel({ labelAlign : 'right', border : false, bodyStyle : 'background-co ...
-
The requested page cannot be accessed because the related configuration data for the page is invalid
当在VS2013下开发web site时,调试时都是在IIS Express中进行的,没有问题.当部署到IIS中,出现:The requested page cannot be accessed be ...
-
emacs技巧
Table of Contents "ctrl space"设置mark 同时在选中的各行行首添加相同内容 寄存器 跳转到某行 删除光标所在的空格和TAB或空白行 把TAB全部转换 ...