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传送指令到ControllerController完成业务逻辑后，要求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难度较高
- 前进、后退管理
- 初次加载耗时多