Vue面试题

1. Vue中的data为什么是一个函数呢？

答：它的设计就是一个闭包，Vue是一个单页应用会有很多对应组件，data给每个组件建立了一个私有环境，互不影响。

2. 数据驱动的原理

答：vue采用数据劫持结合发布者和订阅者模式，
vue2通过"Object.defineProperty()"来劫持各个属性的getter和setter，
vue3通过ES6的Proxy配合reflect来劫持整个对象，
在数据变动的时候通知订阅者，触发相应的监听函数。

3. 如何使数据变得“可观测”？

答：通过观察者模式来实现数据监测功能，在观察者模式中，被观察者的状态发生改变时，观察者会接收到通知并执行相应的回调函数。

4. 虚拟DOM

4.1 虚拟DOM是什么？

• a. vue2.x才有的虚拟dom
• b. 本质就是js对象，具有跨平台的特质

4.2 虚拟DOM在VUE中做了什么？

• a. vue的渲染过程（html, css, js）
• b. 1.将真实dom转化成了虚拟dom（js对象）2. 更新的时候做对比

4.3 虚拟DOM是如何提升VUE的渲染效率的？

vue 的两大特性是: 组件化、 数据驱动， 而虚拟 dom 就是做 数据驱动的

• 局部更新（节点数据）
• 将直接操作dom（影响性能）的地方变成两个js对象的比较（执行效率）

5. diff算法中的patch方法

• 将虚拟dom转化成真实dom
• 在更新时通过新旧节点递归比对更新虚拟节点

// 1. 初始化 patch(container, vnode)
// 2. 更新 update(vnode, newVode)

function patch(container, vnode) {
    // 虚拟dom三要素：目标元素，属性，子元素
    let tag = vnode.tag  // 目标元素
    let attrs = vnode.attrs || {}  // 相关属性
    let children = vnode.children || []  // 子节点
    // 判断目标元素是否存在，不存在则返回
    if(!tag) {
        return null
    }
    // 1. 创建真实 dom
    let elem = document.createElement(tag)

    // 2. 给 dom 添加对应的属性
    for(let attrName in attrs) {
        // 判断属性是否存在, 存在则增加属性  class
        if(attrs.hasOwnProperty(attrName)) {
            elem.setAttribute(attrName, attrs[attrName])
        }
    }
    
    // 3. 给dom添加子元素
    children.forEach(function(childVnode) {
        // 子元素是否还有子元素，有继续递归
        elem.appendChild(patch(childVnode))
    });
    // 将最后生成的 elem 节点添加到 container 上
    container.appendChild(elem)
    // 最后返回 container
    return container
}

function update(vnode, newVnode) {
    let children = vnode.children || []
    let newChildren = newVnode.children || []
    children.forEach(function(childrenVnode, index) {
        let newChildrenVnode = newChildren[index]
        // 如果新旧子节点不一样
        if(newChildrenVnode.tag !== childrenVnode.tag) {
            // 直接替换
            replaceNode(childrenVnode, newChildrenVnode)
        } else {
            // 证明第一层没有变化，继续递归查找
            update(childrenVnode, newChildrenVnode)
        }
    })
}

6.vue 应用层

6.1 $nextTick()

dom更新后的延迟回调，需要让修改后的data值渲染更新到dom之后再去获取

6.2. 单页与多页的区别及优缺点

单页应用(SPA):只有一个主页面的应用
组件 => 页面片段
跳转 => 只能刷新局部值
场景 => pc端

优点：

• a. 体验好，快
• b. 不用加载整个页面，对服务器压力小
• c. 前后端分离
• d. 效果可以很炫酷

缺点：

• a. 不利于SEO
• b. 初次加载比较慢
• c. 页面复杂度高

多页应用：多个页面的应用，整页刷新
优缺点和单页是相反的

6.3 v-if 与 v-for

vue2 中，v-for 的优先级 大于 v-if
就算只渲染一小部分，也要遍历整个列表，比较浪费性能，改进方案就是用计算属性生成要遍历的数组
vue3 中, v-if 的优先级 大于 v-for
由于v-if优先级高，导致页面不显示或者报错，改进方案是增加template（页面渲染不生成dom节点）

永远不要将两者混用，造成性能上的浪费

6.4 v-show 与 v-if

首先它们在视觉上的效果是一样的，区别在于 v-if 是惰性的，只有条件为真的时候才会渲染 dom，而 v-show 的效果是 display: block 和 none ,一直存在于页面中。
适用场景：

• v-if 适合不需要频繁切换的场景，单次判断
• v-show适合需要频繁切换的场景，不能用于权限判断

7. vue-router 与 location.href有什么区别？

location.href：简单方便，刷新页面（跳外链）
vue-router：实现了按需加载，减少了dom消耗（内部页面）

• js 原生的history

8. MVC 与 MVVM

MVC是一个经典模型框架，主要分为视图View、模型Model、控制器Controller，之后改进成了MVVM，由之前的C 变成了VM
C控制器会通过接口将数据存在后台，让后台再给出反馈
缺点：

• 前后端没法独立开发，必须等到后台接口做好，前端才能继续往下走
• 前端不够独立，没有自己的数据中心，太过依赖后台
  而VM连接了视图，前端有自己的数据中心，真正的实现了前后端分离

9. v-model的原理

双向数据绑定 Object.defineProperty()
v-model底层原理实际上是分别利用了v-bind用来绑定value的值，用v-on去绑定input标准事件，这是事件用来监听当输入域内容发生变化的时候来执行一些事情。