vue必问面试题

🧡1.请讲述一下你对VUE的MVVM的理解

MVVM 是 Model-View-ViewModel的缩写，即将数据模型与数据表现层通过数据驱动进行分离，从而只需要关系数据模型的开发，而不需要考虑页面的表现，具体说来如下：

• Model代表数据模型：主要用于定义数据和操作的业务逻辑。
• View代表页面展示组件（即dom展现形式）：负责将数据模型转化成UI 展现出来。
• ViewModel为model和view之间的桥梁：监听模型数据的改变和控制视图行为、处理用户交互。通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉
• 在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

🧡2.v-if和v-show的区别？

共同点：都可以控制元素的显示与隐藏
不同点：实现本质的方法不同，v-show的本质就是通过控制css中的display设置为none,控制隐藏，只会编译一次，
v-if是动态的向DOM树内添加或者删除DOM元素，若初识值为false，就不会编译了。而且v-if不停的销毁和创建比较消耗性能。
如果要频繁的切换某节点，使用v-show(切换开销比较小，初始开销较大)。如果不需要评分切换某节点使用v-if（初识渲染开销小，切换开销比较大）。

3. v-for中的key的理解？

需要使用key来给每个节点做一个唯一的标识。在Diff算法中就可以正确的识别这个节点，主要为了高效的更新虚拟DOM。

4.你是如何理解vue中的diff算法的？

• diff算法的作用：用来修改dom的一小段的内容，并且不会引起dom树的重绘
• diff算法的实现原理：diff算法将**虚拟DOM（virtual dom）**的某个节点数九改变后生成新的Vnode与旧节点进行比较，并且替换Wie新的节点，具体过程就是调用patch方法，比较新旧节点，一边比较一边给真实的dom打补丁进行替换。
• 具体的过程详解
  a. 在采用diff算法进行新旧节点进行比较的时候，比较是按照在同级进行比较的，不会进行跨级比较：
  
  b. 当数据发生改变的时候，set方法会调用dep.notify通知所有的订阅者watcher，订阅者会调用patch函数给响应的dom进行打补丁，从而更新真实的视图

c. patch函数接受两个参数，第一个是旧节点，第二个是新节点，首先判断两个节点是否值得比较，值得比较则执行patchVnode函数，不值得比较则直接将旧节点替换为新节点。如果两个节点一样就直接检查对应的子节点，如果子节点不一样就说明整个子节点全部改变不再往下对比直接进行新旧节点的整体替换

d. patchVnode函数：找到真实的dom元素；判断新旧节点是否指向同一个对象，如果是就直接返回；如果新旧节点都有文本节点，那么直接将新的文本节点赋值给dom元素并且更新旧的节点为新的节点；如果旧节点有子节点而新节点没有，则直接删除dom元素中的子节点；如果旧节点没有子节点，新节点有子节点，那么直接将新节点中的子节点更新到dom中；如果两者都有子节点，那么继续调用函数updateChildren

e. updateChildren函数：抽离出新旧节点的所有子节点，并且设置新旧节点的开始指针和结束指针，然后进行两辆比较，从而更新dom（调整顺序或者插入新的内容 结束后删掉多余的内容）

5.vue-router的钩子函数分为哪三大类，分别有哪些

1. 全局钩子
   主要包括beforeEach和aftrEach,beforeEach函数有三个参数：
   to:router即将进入的路由对象
   from:当前导航即将离开的路由
   next:Function,进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
   afterEach函数不用传next()函数这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作,例如:

//使用钩子函数对路由进行权限跳转
router.beforeEach((to, from, next) => {
   
    const role = localStorage.getItem('ms_username');
    if(!role && to.path !== '/login'){
   
        next('/login');
    }else if(to.meta.permission){
   
        // 如果是管理员权限则可进入，这里只是简单的模拟管理员权限而已
        role === 'admin' ? next() : next('/403');
    }else{
   
        // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容
        if(navigator.userAgent