Vue相关

来自掘金的高频前端面试题汇总(opens new window)

1. Vue基本原理

图片(opens new window)

关键字：Vue实例、遍历data对象、Object.defineProperty、getter/setter、Watcher实例、关联组件

在创建Vue实例对象时，Vue内部会遍历data对象，对象内的每个属性通过Object.defineProperty转成相应的getter/setter，同时创建一个Watcher实例来收集getter/setter，当对象内的数据发生变化后即setter被触发，那么它会通知watcher实例，从而使关联的组件从新渲染。

2. 双向绑定的原理

关键字：数据劫持、发布-订阅模式、递归遍历、compile解析绑定、watcher、update

1. 数据劫持过程：通过对对象的递归遍历，设置getter/setter属性，监听数据变化

2. compile解析模板，添加数据更新的绑定函数到Watcher中

3. Watcher是observe和compile之间的桥梁，调用自身的update，并触发compile中的绑定函数

4. 当数据变化时，通知Watcher，更新视图，当视图交互(input)变更时，触发数据更新函数，然后更新属性，更新视图，这就是双向绑定的原理

5. Object.defineProperty缺点

关键字：新增属性、数组下标更改

Vue中对push、pop、shift、unshift、splice、sort、reverse进行了重写

1. 新增的对象属性如果不重新设置，那么新增的属性将不会被监听到

2. 重写了数组的方法，对于数组下标更新数据或者通过length的方式更新数据并不能受到监听

3. MVVM、MVC、MVP的区别

4. MVC
   关键字：Model、View、Controller
   View->Controller->Model->View

5. MVVM
   关键字：Model、View、ViewModel

Model<->ViewModel->Model

实现Model和View数据的自动同步