VUE常见面试题整理-2021-04-12

如何理解MVVM原理

MVVM是一种软件架构模式，而Vue只是一种在前端层面上的实现，其实不单在Vue里，在很多Web 框架应用里都有相关的实现。模型层、视图层、view-model层利用ES5的Object.defineProperty的getter/setter方法绑定、backbone的发布订阅模式，从主动和被动的方式去实现了ViewModel的关系绑定。

vue2.0中mvvm实现

Vue2.0的MVVM实现中，对View-Model的实现本质利用的ES5的Object.defineProperty方法，当Object.defineProperty方法在给数据Model对象定义属性的时候先挂载一些方法，在这些方法里实现与界面的值绑定响应关系，当应用的属性被读取或者写入的时候便会触发这些方法，从而达到数据模型里的值发生变化时同步响应到页面上。

vue响应式数据的原理是什么

采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。

vue组件是如何通信的

props与$emit 父子组件直接的通信

$attrs与$ listenners 父组件绑定的所有属性在 $attrs中，事件放在$ listenners 中,适用于隔代组件通信

ref与 $parent /$ children 适用父子组件通信

provice 与 inject的使用，隔代组件通信

事件总线eventBus

Vuex适用于父子、隔代、兄弟组件通信

为何组件 data 必须是一个函数？

防止组件重用的时候导致数据相互影响。

keep-alive的作用及使用范围

缓存组件，防止重复渲染问题。用途：多个静态tab页的切换，性能优化

vuex 中 action 和 mutation有何区别？

action 中处理异步，mutation 不可以

mutation 做原子操作

action 可以整合多个 mutation

vue 常见性能优化方式

合理使用v-show 和 v-if

合理使用computed

v-for 时要加key，以及避免和 v-if 同时使用

自定义事件、DOM 事件及时销毁

合理使用异步组件

合理使用keep-alive

data层级不要太深（因为深度监听一次性监听到底）

使用 vue-loader 在开发环境做模板编译（预编译）

webpack层面的优化

前端通用的性能优化，如果图片懒加载

get与post 通讯的区别

Get 请求能缓存,Post 不能

Post 相对 Get 安全一点点,因为Get 请求都包含在 URL 里,且会被浏览器保存历史纪录,Post 不会,但是在抓包的情况下都是一样的.

Post 可以通过 request body来传输比 Get 更多的数据,Get 没有这个技术

URL有长度限制,会影响 Get 请求,但是这个长度限制是浏览器规定的,不是 RFC 规定的

Post 支持更多的编码类型且不对数据类型限制

为什么v-for和v-if不建议一起使用？

v-for 的优先级比 v-if 更高，意味着 v-if 将分别重复运行于每个 v-for 循环中。遍历数据量过大，会造成性能浪费。

nextTick的实现原理是什么？

-原理：主要是使用了宏任务和微任务

作用：在下次DOM更新循环结束之后执行延迟回调，在修改数据之后立即使用nextTick来获取更新后的DOM

做过那些VUE的性能优化？

编码阶段

尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watch

v-for和v-if 不能进行连用

SPA页面采用keep-alive缓存组件

在组件不常用的情况下，使用v-if替换v-show

使用路由懒加载，图片懒加载，异步组件，

防抖、节流

第三方模块按需导入

长列表滚动到可视区域动态加载

SEO优化

预渲染

服务端渲染SSR

打包优化

压缩代码

使用cdn加载第三方模块

用户体验

骨架屏

可以使用缓存(客户端缓存/服务端缓存)优化

谈谈对SPA单页面理解，优缺点分别是什么？

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

优点

用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；

SPA 相对对服务器压力小；

前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

缺点

初次加载耗时多：初始化加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；

前进后退路由管理：单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；

SEO 难度较大：所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

父组件可以监听到子组件的生命周期吗?

比如有父组件 Parent 和子组件 Child，如果父组件监听到子组件挂载 mounted 就做一些逻辑处理，可以通过以下写法实现：

// Parent.vue
<Child @mounted="doSomething"/>

// Child.vue
mounted() {
  this.$emit("mounted");
}

以上需要手动通过 $emit 触发父组件的事件，更简单的方式可以在父组件引用子组件时通过 @hook 来监听即可，如下所示：

//  Parent.vue
<Child @hook:mounted="doSomething" ></Child>

doSomething() {
   console.log('父组件监听到 mounted 钩子函数 ...');
},

//  Child.vue
mounted(){
   console.log('子组件触发 mounted 钩子函数 ...');
},    

// 以上输出顺序为：
// 子组件触发 mounted 钩子函数 ...
// 父组件监听到 mounted 钩子函数 ...

简单介绍一下Vuex

（1）Vuex是一个专为Vue.js应用程序开发的状态管理模式。Vuex的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。（2）改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化。

State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。

Getter：允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。

Mutation：是唯一更改 store 中状态的方法，且必须是同步函数。

Action：用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。

Module：允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。

commit 和dispatch的区别

在于commit是提交mutatious的同步操作，dispatch是分发actions的异步操作

dispatch：含有异步操作，例如向后台提交数据，写法this.$store.dispatch(‘action方法名’,值)

commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)