Vue基础面试题

Posted 2021-02-20 linhongjie

马上要面试，这里记录一下Vue的基础面试题，手写一遍加深理解，大神不用浪费时间往下看了

一、对于MVVM的理解

　　MVVM是MOdel-View-ViewModel的缩写

　　Model代表数据模型，可以在Model中定义数据修改和操作的业务逻辑

　　View代表UI组件，负责将数据模型转化为UI展现出来

　　ViewModel负责监听数据模型的改变和控制视图行为，处理用户交互；是一个同步Model和View的对象，连接Model和View。

　　在MVVM架构下，view和Model之间并没有直接的联系，而是通过ViewModel进行交互,

　　Model与ViewModel之间的交互式双向的，因此View数据的变化会同步到Model中，而Model中的数据变化也会立即反应到View上

　　ViewModel通过双向数据绑定将View层和Model层连接了起来，而View层与Model的同步是完全自动的无需认为干涉，因此开发者只需要关注业务逻辑，不需要手动操作DOM；

　　不需要关注数据状态的同步问题，复杂的数据状态维护完全有MVVM来统一管理。

二、Vue的生命周期

　　beforeCreate: 实例创建之前，在数据观测，初始化事件还未开始

　　created： 实例创建完成，完成数据观测，属性和方法的运算，初始化事件，此时$el还没有显示出来，可以访问到data，computed，methods，watch

　　beforeMount：在挂载之前被调用，相关的render函数首次被调用。编译模板，把data里面的数据和模板生成html，还没有挂载到Dom上

　　Mounted：在el被新创建的vm.$el替换，并挂载到实例上后调用。实例挂载在Dom上，此时可以通过Dom的api获取dom节点，$el可以被访问了

　　beforeUpdate： 响应数据更新时调用，发生在虚拟dom打补丁之前

　　Updated：虚拟dom重新渲染或打补丁之后调用，dom已经更新，可以进行依赖于dom的操作

　　beforeDestroy：实例销毁之前调用，此时组件完全可用，可以通过this获取实例

　　destroyed：实例销毁后调用

　　1.什么是Vue生命周期

　　　　Vue实例从创建到销毁的过程，就是生命周期；从开始创建、初始化数据、编译模板、挂载dom-->渲染、更新、更新渲染、销毁等一系列过程，称之为Vue的生命周期

　　2.vue生命周期的作用？

　　　　生命周期中有多个事件钩子，有利于我们控制整个vue实例的过程，形成更好的逻辑

　　3.vue生命周期分为几个阶段

　　　　8个阶段分别是：创建前、创建后，挂载前，挂载后、更新前、更新后、销毁前、销毁后

　　4.Dom渲染在哪个钩子中就已经完成了？

　　　　mounted

三、Vue实现数据双向绑定的原理（Object.defineProperty）

　　vue主要采用数据劫持结合发布订阅者模式实现数据双向绑定，通过Object.defineproperty()来劫持各个属性的setter和getter，在

　　数据变动时发布消息给订阅者，触发相应监听回调。

　　当把一个普通javascript对象传给vue实例作为它的data选项时，vue将遍历它的属性，用Object.defineProperty将它们转为getter/setter,

　　用户看不到getter/setter，但是在内部它们让vue追踪依赖，在属性被访问和修改时通知变化

 

　　vue的数据双向绑定，将MVVM作为数据绑定的入口，整合observe，compile，和watcher三者，通过Observer来监听自己的model的数据变化

　　通过compile来解析编译模板指令，最终利用watcher搭起Observer和compile之间的通信桥梁，达到数据变化-->视图更新,视图交互变化-->数据model变更的双向绑定效果