vue面试题目|单页面应用，data,mixin,exten

21. Vue 单页应用与多页应用的区别

概念：●SPA单页面应用（SinglePage Web Application），指只有一个主页面的应用，一开始只需要加载一次js、css等相关资源。所有内容都包含在主页面，对每一个功能模块组件化。单页应用跳转，就是切换相关组件，仅仅刷新局部资源。●MPA多页面应用（MultiPage Application），指有多个独立页面的应用，每个页面必须重复加载js、css等相关资源。多页应用跳转，需要整页资源刷新。区别

22. Vue template 到 render 的过程

vue的模版编译过程主要如下：template -> ast -> render函数

vue 在模版编译版本的码中会执行 compileToFunctions 将template转化为render函数：

2
// 将模板编译为render函数
const { render, staticRenderFns } = compileToFunctions(template,options//省略}, this)

CompileToFunctions中的主要逻辑如下∶（1）调用parse方法将template转化为ast（抽象语法树）

constast = parse(template.trim(), options)

parse的目标：把tamplate转换为AST树，它是一种用 JavaScript对象的形式来描述整个模板。●解析过程：利用正则表达式顺序解析模板，当解析到开始标签、闭合标签、文本的时候都会分别执行对应的回调函数，来达到构造AST树的目的。AST元素节点总共三种类型：type为1表示普通元素、2为表达式、3为纯文本（2）对静态节点做优化

optimize(ast,options)

这个过程主要分析出哪些是静态节点，给其打一个标记，为后续更新渲染可以直接跳过静态节点做优化
深度遍历AST，查看每个子树的节点元素是否为静态节点或者静态节点根。如果为静态节点，他们生成的DOM永远不会改变，这对运行时模板更新起到了极大的优化作用。

（3）生成代码

const code = generate(ast, options)

generate将ast抽象语法树编译成 render字符串并将静态部分放到 staticRenderFns 中，最后通过 new Function( render) 生成render函数。

23. Vue data 中某一个属性的值发生改变后，视图会立即同步执行重新渲染吗

不会立即同步执行重新渲染。Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化， Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。
如果同一个watcher被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环tick中，Vue 刷新队列并执行实际（已去重的）工作。

去重重复数据对于避免不必要的计算和dom操作

24. 简述 mixin、extends 的覆盖逻辑

（1）mixin 和 extendsmixin 和 extends均是用于合并、拓展组件的，两者均通过 mergeOptions 方法实现合并。●mixins 接收一个混入对象的数组，其中混入对象可以像正常的实例对象一样包含实例选项，这些选项会被合并到最终的选项中。Mixin 钩子按照传入顺序依次调用，并在调用组件自身的钩子之前被调用。●extends 主要是为了便于扩展单文件组件，接收一个对象或构造函数（2）mergeOptions 的执行过程●规范化选项（normalizeProps、normalizelnject、normalizeDirectives)●对未合并的选项，进行判断

if(!child._base) {
    if(child.extends) {
        parent = mergeOptions(parent, child.extends, vm)
    }
    if(child.mixins) {
        for(let i = 0, l = child.mixins.length; i < l; i++){
            parent = mergeOptions(parent, child.mixins[i], vm)
        }
    }
}

合并处理。根据一个通用 Vue 实例所包含的选项进行分类逐一判断合并，如 props、data、 methods、watch、computed、生命周期等，将合并结果存储在新定义的 options 对象里。返回合并结果 options。

25. 描述下Vue自定义指令

在 Vue2.0 中，代码复用和抽象的主要形式是组件。然而，有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。
一般需要对DOM元素进行底层操作时使用，尽量只用来操作 DOM展示，不修改内部的值。当使用自定义指令直接修改 value 值时绑定v-model的值也不会同步更新；如必须修改可以在自定义指令中使用keydown事件，在vue组件中使用 change事件，回调中修改vue数据;

（1）自定义指令基本内容●全局定义：Vue.directive("focus",{})●局部定义：directives:{focus:{}}●钩子函数：指令定义对象提供钩子函数o bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。o inSerted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。o update：所在组件的VNode更新时调用，但是可能发生在其子VNode更新之前调用。指令的值可能发生了改变，也可能没有。但是可以通过比较更新前后的值来忽略不必要的模板更新。o ComponentUpdate：指令所在组件的 VNode及其子VNode全部更新后调用。o unbind：只调用一次，指令与元素解绑时调用。●钩子函数参数o el：绑定元素o bing：指令核心对象，描述指令全部信息属性o nameo valueo oldValueo expressiono argo modiferso vnode 虚拟节点o oldVnode：上一个虚拟节点（更新钩子函数中才有用）（2）使用场景●普通DOM元素进行底层操作的时候，可以使用自定义指令●自定义指令是用来操作DOM的。尽管Vue推崇数据驱动视图的理念，但并非所有情况都适合数据驱动。自定义指令就是一种有效的补充和扩展，不仅可用于定义任何的DOM操作，并且是可复用的（3）使用案例初级应用：●鼠标聚焦●下拉菜单●相对时间转换●滚动动画高级应用：●自定义指令实现图片懒加载●自定义指令集成第三方插件