Vue 高频面试题总结05 内附答案

1、你对 Vue.js 的 template 编译的理解？

就是先转化成 AST 树，再得到的 render 函数返回 VNode（Vue 的虚拟 DOM 节点）

首先，通过 compile 编译器把 template 编译成 AST 语法树（abstract syntax tree 即 源代码的抽象语法结构的树状表现形式），compile 是 createCompiler的返回值，createCompiler 是用以创建编译器的。另外 compile 还负责合并option。

然后，AST 会经过 generate（将 AST 语法树转化成 render funtion 字符串的过程）得到 render 函数，render 的返回值是 VNode，VNode 是 Vue 的虚拟 DOM节点，里面有（标签名、子节点、文本等等）

2、Vue 中动画如何实现

哪个元素需要动画就给那个元素加 transition 标签

进入时 class 的类型分为以下几种 <name>-enter <name>-enteractive <name>-enter-to

离开时 class 的类型分为以下几种

<name>-leave <name>-leave-active <name>-leave-to

如果需要一组元素发生动画需要用标签<transition-group><transitiongroup>

3、说一下你在 Vue 中踩过的坑

1. 第一个是给对象添加属性的时候，直接通过给 data 里面的对象添加属性然后赋值，新添加的属性不是响应式的

【解决办法】通过 Vue.set(对象，属性，值)这种方式就可以达到，对象新添加的属性是响应式的

1. 在 created 操作 dom 的时候，是报错的，获取不到 dom，这个时候实例 Vue实例没有挂载

【解决办法】通过：Vue.nextTick(回调函数进行获取)

4、Vue 项目优化的解决方案都有哪些？

1. 使用 mini-css-extract-plugin 插件抽离 css

2. 配置 optimization 把公共的 js 代码抽离出来

3. 通过 webpack 处理文件压缩

4. 不打包框架、库文件，通过 cdn 的方式引入

5. 小图片使用 base64

6. 配置项目文件懒加载

7. UI 库配置按需加载

8. 开启 Gzip 压缩

5、使用 Vue 的时候加载造成页面卡顿，该如何解决？

Vue-Router 解决首次加载缓慢的问题。懒加载简单来说就是按需加载。

像 Vue 这种单页面应用，如果没有应用懒加载，运用 webpack 打包后的文件将会异常的大，造成进入首页时， 需要加载的内容过多，时间过长，会出现长时间的白屏，即使做了 loading 也是不利于用户体验，而运用懒加载 则可以将页面进行划分，需要的时候加载页面，可以有效的分担首页所承担的加载压力，减少首页加载用时。

6、你知道 style 上加 scoped 属性的原理吗？

Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现，如下是转译前的

Vue 代码： <template><div>Vue.js scoped</div></template>

<style scoped>.scoped {font-size:14px;}</style>

浏览器渲染后的代码 ： <div data-v-fed36922>Vue.js

scoped</div>.scoped[data-v-fed36922]{font-size:14px;}

即：PostCSS 给所有 dom 添加了一个唯一不重复的动态属性，然后，给 CSS 选择器额外添加一个对应的属性选择器来选择该组件中 dom，这种做法使得样式私有化

7、说说你对 SPA 单页面的理解，它的优缺点分别是什么？

优点：

1、 无刷新界面，给用户体验原生的应用感觉

2、 节省原生（android 和 ios）app 开发成本

3、 提高发布效率，无需每次安装更新包。这个对于 ios 开发人员来说印象尤其深吧。

4、 容易借助其他知名平台更有利于营销和推广

5、 符合 web2.0 的趋势

2）缺点：

1、效果和性能确实和原生的有较大差距

2、各个浏览器的版本兼容性不一样

3、业务随着代码量增加而增加，不利于首屏优化

4、某些平台对 hash 有偏见，有些甚至不支持 pushstate

5、不利于搜索引擎抓取

8、VNode 是什么？什么是虚拟 DOM？

VNode 是什么

VNode 是 JavaScript 对象，VNode 表示 Virtual DOM，用 JavaScript 对象来描述真实的 DOM 把 DOM 标签，属性，内容都变成对象的属性。就像使用JavaScript 对象对一种动物进行说明一样。

什么是虚拟 DOM?

文档对象模型或 DOM 定义了一个接口，该接口允许 JavaScript 之类的语言访问和操作 HTML 文档。元素由树中的节点表示，并且接口允许我们操纵它们。但是此接口需要付出代价，大量非常频繁的 DOM 操作会使页面速度变。

9、Vue 中如何实现一个虚拟 DOM？

首先要构建一个 VNode 的类，DOM 元素上的所有属性在 VNode 类实例化出来的对象上都存在对应的属性。例如 tag 表示一个元素节点的名称，text 表示一个文本节点的文本，chlidren 表示子节点等。将 VNode 类实例化出来的对象进行分类，例如注释节点、文本节点、元素节点、组件节点、函数式节点、克隆节点。

然后通过编译将模板转成渲染函数 render，执行渲染函数 render，在其中创建不同类型的 VNode 类，最后整合就可以得到一个虚拟 DOM（vnode）。最后通过 patch 将 vnode 和 oldVnode 进行比较后，生成真实 DOM。

10、Vue 中操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的话有什么解决办法？

push()、pop()、shift()、unshift()、splice()、sort()、reverse()这些方法会改变被操作的数组； filter()、concat()、 slice()这些方法不会改变被操作的数 组，返回一个新的数组； 以上方法都可以触发视图更新。

解决方法

1: 可以用 this.$set(this.array,index,newValue) 或this.array.splice(index,1,newValue)

解决方法 2: 可以用 this.array.splice(newLength)