你想知道的vue高频面试题汇总（上）

1. Vue的最大优势是什么?

• 比较轻量，中国人自己写的框架，文档易读

  • 双向数据绑定,

  • 数据驱动视图,

  • 组件化开发

  • 数据和视图分离

  • 单页面应用可以实现页面数据局部刷新

---

2. MVVM和MVC区别是什么?

• MVC ： 传统的设计模式。

  • 设计模式： 一套广泛被使用的开发方式

  • M： model 模型

    • 模型：就是数据的意思

  • V ： view视图

    • 视图：就是页面的意思

  • C：controller控制器

    • 控制器：在这里写js业务逻辑，把数据M 渲染到 视图 V （有点类似于我们之前学习的，把数据渲染到页面）

• MVVC： vue所使用的设计模式

设计模式: 是一套被反复使用的、多数人知晓的、经过分类编目的、代码设计经验的总结。(代码分层, 架构设计)

• MVVM，一种软件架构模式，决定了写代码的思想和层次

  • M： model数据模型 (data里定义)

  • V： view视图 （页面标签）

  • VM： ViewModel视图模型 (vue.js源码)

• MVVM通过数据双向绑定让数据自动地双向同步 不再需要操作DOM

  • V （修改视图） -> M（数据自动同步）

  • M（修改数据） -> V （视图自动同步）

  • 

    1. 在vue中，不推荐直接手动操作DOM！！！

    2. 在vue中，通过数据驱动视图，不要在想着怎么操作DOM，而是想着如何操作数据！！(思想转变)

     

     

    ---

    3. Vue常用修饰符有哪些?

    .prevent: 提交事件不再重载页面；

    .stop: 阻止单击事件冒泡；

    .once: 只执行一次这个事件

    .enter:监听键盘enter键

---

4.对Vue渐进式的理解

• 官方专业答案

  • 主张最少,

  • 自底向上,

  • 增量开发,

  • 组件集合,

  • 便于复用

• 个人见解

  • 使用模块化规范，实现自助餐式开发，用什么导什么。 最大程度上节省资源。

---

5. 说出至少4个Vue指令及作用

• v-on 给标签绑定函数，可以缩写为@，例如绑定一个点击函数 函数必须写在methods里面

• v-bind 动态绑定 作用： 及时对页面的数据进行更改, 可以简写成:分号

• v-slot: 缩写为#, 组件插槽

• v-for 根据数组的个数, 循环数组元素的同时还生成所在的标签

• v-show 显示内容

• v-if 显示与隐藏

• v-else 必须和v-if连用 不能单独使用 否则报错

• v-text 解析文本

• v-html 解析html标签

---

6. 为什么避免v-for和v-if在一起使用

• Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次

---

7. v-show和v-if的区别

• v-show和v-if的区别? 分别说明其使用场景?

• 相同点： v-show 和v-if都是true的时候显示，false的时候隐藏

• 不同点1：原理不同

  • v-show:一定会渲染，只是修改display属性

  • v-if:根据条件渲染

• 不同点2：应用场景不同

  • 频繁切换用v-show,不频繁切换用v-if

---

8. Vue中key值作用

• 1.vue在渲染的时候,会 先把 新DOM 与 旧DOM 进行对比， 如果dom结构一致，则vue会复用旧的dom。 （此时可能造成数据渲染异常）

• 2.使用key可以给dom添加一个 唯一标识符，让vue强制更新dom

---

9. Vue中:key作用, 为什么不能用索引

• :key是给v-for循环生成标签颁发唯一标识的, 用于性能的优化

• 因为v-for数据项的顺序改变，Vue 也不会移动 DOM 元素来匹配数据项的顺序，而是就地更新每个元素

---

10. Vue中有时候数组会更新页面，有时候不更新，这是为什么

• 因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新

• slice()

• filter()

• concat()