web前端常见面试题(持续更新中...)

本篇文章总结了在面试vue中经常会遇到的一些题，并给出了相应的简答。

1.vue实现数据双向绑定的原理？
数据的双向绑定，指的是view和data两者之间的数据双向通信的问题。
view->data：是通过监听事件知道数据的改变，从而改变data内容
data->view：vue定义对象使用了Object.defineProperty()来定义一个对象，这个方法包含了get()，set()方法，当获取或者赋值的时候都会触发相应的get或set方法，从而就能知道data的改变，也就是我们常说的数据劫持
最后，这些改变要进行统一管理，则需要使用观察-订阅模式即：Observer->Wacher。Observer用来监听所有对象属性的改变，如果发生了变动，就通知Wacher订阅者，订阅者得到消息后则执行对应的函数来更新视图
更详细的说明

2.为什么vue能实现DOM的高效渲染？
vue使用了虚拟DOM技术。虚拟DOM本质上就是一个JS对象，具有DOM的树形结构和对应的属性，相比较于传统的操纵DOM方式，vue会使用算法比较新旧虚拟DOM的变动，只会对变动的DOM最终渲染到真实DOM中，这样就大大节省了资源，提高了运行速度
更详细的说明

3.vue组件间传值的方式有哪些？
a. props和$emit：
父->子 父组件中引用子组件时在子组件上绑定自定义属性，子组件则在props中接收
子->父 子组件中通过$emit一个自定义事件，传递一些信息给父组件，父组件则绑定该事件来接收
b.事件总线即eventBus：这种方式能跨级传递值。
通过总线的emit方法来广播，然后通过on方法来接收
c.$attrs和$listeners：
$attrs: 包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)
$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器
d.依赖注入(provide，inject)：这种方式允许一个祖先向子孙后代传递值
即：祖先组件中通过provide来提供变量，然后在子孙组件中通过inject来注入变量
e.$parent、$children和$refs
通过$parent来获取父组件的实例，通过$children来获取子组件的实例
给定子组件ref值，父组件则能通过$refs获取子组件的实例
显而易见，这些方式不能跨越父子组件，在兄弟组件之间也无法传递值
f.vuex
更详细的说明

4.vue的生命周期及相应的解释

更详细的说明

5.vue中v-for循环为什么要绑定key值
由于vue使用了虚拟DOM技术，并结合了diff算法，当绑定了唯一的key值后，能更快定位到新旧dom的不同处，从而提高渲染效率

6.vuex中mutations和actions不同点是什么？
这两者最大的不同在于：mutations只支持同步函数，actions通常是异步的

7.怎样优化长列表问题？
跳转查看

8.函数的节流与防抖是什么？
跳转查看

9.vue组件中的data为什么一定要是一个函数？
因为组件是要被复用的，每调用一次组件，则会重新创建一个对象，这样不会共享数据，造成更改某个属性，其他的也跟着变的问题

10.vue中如何解决监听不到数组变动的问题
有两种情况vue是无法监听到的：
a.使用数组下标赋值的方式 例如arr[index] = x；
b.直接改变数组长度 例如arr.length = 10
怎样解决？
a.this.$set(arr, index, val)
b.arr.splice(index, howmany, item1, itemx,…)
c.使用临时变量做中转，重新赋值