Vue 前端面试题[转]

时间 2019-11-19

标签 vue 端面试题繁體版

原文原文链接

https://mp.weixin.qq.com/s/Uxhx2dJ1Xbm6N3Gl7wNZNwcss

Vue 前端面试题

游荡de蝌蚪前端开发 1周前

做者：游荡de蝌蚪html

https://segmentfault.com/a/1190000018634744前端

前言

前几天整理了一些 html + css + JavaScript 常见的面试题（https://segmentfault.com/u/youdangde_5c8b208a23f95/articles），而后如今也是找了一些在 Vue 方面常常出现的面试题，留给本身查看消化，也分享给有须要的小伙伴。vue

若是文章中有出现纰漏、错误之处，还请看到的小伙伴留言指正，先行谢过。node

如下 ↓react

1. 说一下 Vue 的双向绑定数据的原理

vue 实现数据双向绑定主要是：采用数据劫持结合“发布者 - 订阅者”模式的方式，经过 Object.defineProperty() 来劫持各个属性的 setter、 getter，在数据变更时发布消息给订阅者，触发相应监听回调。git

2. 解释单向数据流和双向数据绑定

单向数据流：顾名思义，数据流是单向的。数据流动方向能够跟踪，流动单一，追查问题的时候能够更快捷。缺点就是写起来不太方便。要使 UI 发生变动就必须建立各类 action 来维护对应的 state。github

双向数据绑定：数据之间是相通的，将数据变动的操做隐藏在框架内部。优势是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是没法追踪局部状态的变化，增长了出错时 debug 的难度。web

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. Vue 生命周期的理解

Vue 实例有一个完整的生命周期，生命周期也就是指一个实例从开始建立到销毁的这个过程。

beforeCreated()：在实例建立之间执行，数据未加载状态。
created()：在实例建立、数据加载后，能初始化数据，DOM 渲染以前执行。
beforeMount()：虚拟 DOM 已建立完成，在数据渲染前最后一次更改数据。
mounted()：页面、数据渲染完成，真实 DOM 挂载完成。
beforeUpadate()：从新渲染以前触发。
updated()：数据已经更改完成，DOM 也从新 render 完成，更改数据会陷入死循环。
beforeDestory() 和 destoryed()：前者是销毁前执行（实例仍然彻底可用），后者则是销毁后执行。

6. 组件通讯

父组件向子组件通讯

子组件经过 props 属性，绑定父组件数据，实现双方通讯。

子组件向父组件通讯

将父组件的事件在子组件中经过 $emit 触发。

非父子组件、兄弟组件之间的数据传递

/*新建一个Vue实例做为中央事件总嫌*/
let event = new Vue();
/*监听事件*/
event.$on('eventName', (val) => {
//......do something
});
/*触发事件*/
event.$emit('eventName', 'this is a message.')

7. vue-router 路由实现

路由就是用来跟后端服务器进行交互的一种方式，经过不一样的路径，来请求不一样的资源，请求不一样的页面是路由的其中一种功能。

8. v-if 和 v-show 区别

使用 v-if 的时候，若是值为 false ，那么页面将不会有这个 html 标签生成。

v-show 则是无论值为 true 仍是 false ， html 元素都会存在，只是 CSS 中的 display显示或隐藏。

9. $route 和 $router 的区别

$router 为 VueRouter 实例，想要导航到不一样 URL，则使用 $router.push 方法。

$route 为当前 router 跳转对象里面能够获取 name 、 path 、 query 、 params 等。

10. NextTick 是作什么的

$nextTick 是在下次 DOM 更新循环结束以后执行延迟回调，在修改数据以后使用 $nextTick，则能够在回调中获取更新后的 DOM。

具体可参考官方文档：深刻响应式原理(https://cn.vuejs.org/v2/guide/reactivity.html)。

11. Vue 组件 data 为何必须是函数

由于 JS 自己的特性带来的，若是 data 是一个对象，那么因为对象自己属于引用类型，当咱们修改其中的一个属性时，会影响到全部 Vue 实例的数据。若是将 data 做为一个函数返回一个对象，那么每个实例的 data 属性都是独立的，不会相互影响了。

12. 计算属性 computed 和事件 methods 有什么区别

咱们能够将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的。

不一样点：

computed：计算属性是基于它们的依赖进行缓存的，只有在它的相关依赖发生改变时才会从新求值。
method：只要发生从新渲染， method 调用总会执行该函数。

13. 对比 jQuery ，Vue 有什么不一样

jQuery 专一视图层，经过操做 DOM 去实现页面的一些逻辑渲染； Vue 专一于数据层，经过数据的双向绑定，最终表如今 DOM 层面，减小了 DOM 操做。

Vue 使用了组件化思想，使得项目子集职责清晰，提升了开发效率，方便重复利用，便于协同开发。

16. Vue 中怎么自定义指令

全局注册

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
// 当被绑定的元素插入到 DOM 中时……
inserted: function (el) {
// 聚焦元素
el.focus()
}
})

局部注册

directives: {
focus: {
// 指令的定义
inserted: function (el) {
el.focus()
}
}
}

参考官方文档：自定义指令(https://cn.vuejs.org/v2/guide/custom-directive.html)。

15. Vue 中怎么自定义过滤器

能够用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值。

Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})


<span v-text="message | reverse"></span>

过滤器也一样接受全局注册和局部注册。

16. 对 keep-alive 的了解

keep-alive 是 Vue 内置的一个组件，可使被包含的组件保留状态，或避免从新渲染。

<keep-alive>
<component>

</component>
</keep-alive>

可使用 API 提供的 props，实现组件的动态缓存。

具体参考官方API(https://cn.vuejs.org/v2/api/#keep-alive)。

17. Vue 中 key 的做用

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。若是不使用 key，Vue 会使用一种最大限度减小动态元素而且尽量的尝试修复/再利用相同类型元素的算法。使用 key，它会基于 key 的变化从新排列元素顺序，而且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会形成渲染错误。

具体参考官方API(https://cn.vuejs.org/v2/api/#key)。

18. Vue 的核心是什么

数据驱动、组件系统。

19. Vue 等单页面应用的优缺点

优势

良好的交互体验
良好的先后端工做分离模式
减轻服务器压力

缺点

SEO 难度较高
前进、后退管理
初次加载耗时多

后记

整理的过程也是从新梳理知识点的过程，途中会发现不少本身理解不是很到位的东西，也算是一种收获吧。

后面会一直不按期更新一些其余方面的面试题或者遇到的有趣的东西，感兴趣的小伙伴能够关注哦。

完整版面试题：https://github.com/ltadpoles/web-document/tree/master/Other

碰见更优秀的本身，从如今开始！

以上。