vue面试总结60道题！！快收藏！！！

Vue 是一套构建用户界面的渐进式的自底向上增量开发的 MVVM 框架，核心是关注视图层vue 的核心是为了解决数据的绑定问题，为了开发大型单页面应用和组件化，所以 vue 的核心想是数据驱动和组件化，这里也说一下 MVVM 思想，MVVM 思想是模型视图 vm 是 v 和 m 连
接的桥梁，当模型层数据修改时，VM 层会检测到，并通知视图层进行相应修改

3.请简述 vue 的单向数据流

父级 prop 的更新会向下流动到子组件中，每次父组件发生更新，子组件所有的 prop 都会刷新为最新的值数据从父组件传递给子组件，只能单向绑定，子组件内部不能直接修改父组件传递过来的数据，（可以使用 data 和 computed 解决）

4. Vue 常用的修饰符有哪些

修饰符：

.lazy 改变后触发，光标离开 input 输入框的时候值才会改变

.number 将输出字符串转为 number 类型

.trim 自动过滤用户输入的首尾空格

事件修饰符：

.stop 阻止点击事件冒泡，相当于原生 js 中的 event.stopPropagation()

.prevent 防止执行预设的行为，相当于原生 js 中event.preventDefault()

.capture 添加事件侦听器时使用事件捕获模式，就是谁有该事件修饰符，就先触发谁

.self 只会触发自己范围内的事件，不包括子元素

.once 只执行一次

键盘修饰符：

.enter 回车键

.tab 制表键

.esc 返回键

.space 空格键

.up 向上键

.down 向下键

.left 向左建

.right 向右键

系统修饰符：

.ctrl .alt .shift .meta

5.v-text 与{ {}}与 v-html 区别

{ {}} 将数据解析为纯文本，不能显示输出 html

v-html 可以渲染输出 html

v-text 将数据解析为纯文本，不能输出真正的 html，与花括号的区别是在页面加载时不显示双花括号

v-text 指令：

作用：操作网页元素中的纯文本内容。{ {}}是他的另外一种写法

v-text 与{ {}}区别：

v-text 与{ {}}等价，{ {}}叫模板插值，v-text 叫指令。

有一点区别就是，在渲染的数据比较多的时候，可能会把大括号显示出来，俗称屏幕闪动

6.v-on 可以绑定多个方法吗

可以如果绑定多个事件，可以用键值对的形式事件类型：事件名

如果绑定是多个相同事件，直接用逗号分隔就行

7.Vue 循环的 key 作用

Key 值的存在保证了唯一性，Vue 在执行时，会对节点进行检查，如果没有 key 值，那么 vue 检查到这里有 dom 节点，就会对内容清空并赋新值，如果有 key 值存在，那么会对新老节点进行对比，比较两者 key 是否相同，进行调换位置或删除操作

8.什么是计算属性

计算属性是用来声明式的描述一个值依赖了其他的值，当它依赖的这个值发生改变时，就更新DOM当在模板中把数据绑定到一个计算属性上时， vue 会在它依赖的任何值导致该计算属性改变时更新 DOM 每个计算属性都包括一个 getter 和 setter，读取时触发 getter，修改时触发 setter

9. Vue 单页面的优缺点

单页面 spa 优点：前后端分离用户体验好一个字快内容改变不需要重新加载整

个页面

缺点：不利于 seo，初次加载时耗长（浏览器一开始就要加载 html css js ，所有的页面内都包含在主页面中），页面复杂度提高了，导航不可用

10.Vuex 是什么？怎么使用？在那种场景下使用

Vuex 是一个专为 vue.js 应用程序开发的状态管理模式，通过创建一个集中的数据存储，方便程序中的所有组件进行访问，简单来说 vuex 就是 vue 的状态管理工具

Vuex 有五个属性 state getters mutations actions modules

State 就是数据源存放地，对应一般 vue 对象的 data，state 里面存放的数据是响应式的，state 数据发生改变，对应这个数据的组件也会发生改变用 this.$store.state.xxx 调用 Getters 相当于 store 的计算属性，主要是对 state 中数据的过滤，用 this.$store.getters.xxx 调用 Mutations 理数据逻辑的方法全部放在 mutations 中，当触发事件想改变 state 数据的时候使用 mutations，用 this.$store.commit 调用，给这个方法添加一个参数，就是 mutation 的载荷（payload） Actions 异步操作数据，但是是通过 mutation 来操作用this.$store.dispatch 来触发，actions 也支持载荷

使用场景：组件之间的状态，登录状态，加入购物车，音乐播放

Vuex 使用流程：

下载 vuex

在 src 下创建 store 以及 index.js

引入 vue 和 vuex，使用 vuex ，导出实例对象

在 main.js 中引入，在.vue 文件中使用