还在玩游戏？高频发Vue十问，你能坚持到第几问？

简要介绍vuex各模块在流程中的功能

Vue Components：Vue组件。HTML页面上，负责接收用户操作等交互行为，执行dispatch方法触发对应action进行回应。
· dispatch：操作行为触发方法，是唯一能执行action的方法。
· actions：操作行为处理模块,由组件中的 $store.dispatch(‘action 名称’,data1)来触发。然后由commit()来触发mutation的调用 , 间接更新 state。负责处理Vue Components接收到的所有交互行为。包含同步/异步操作，支持多个同名方法，按照注册的顺序依次触发。向后台API请求的操作就在这个模块中进行，包括触发其他action以及提交mutation的操作。该模块提供了Promise的封装，以支持action的链式触发。
· commit：状态改变提交操作方法。对mutation进行提交，是唯一能执行mutation的方法。
· mutations：状态改变操作方法，由actions中的 commit(‘mutation 名称’)来触发。是Vuex修改state的唯一推荐方法。该方法只能进行同步操作，且方法名只能全局唯一。操作之中会有一些hook暴露出来，以进行state的监控等。
· state：页面状态管理容器对象。集中存储Vue components中data对象的零散数据，全局唯一，以进行统一的状态管理。页面显示所需的数据从该对象中进行读取，利用Vue的细粒度数据响应机制来进行高效的状态更新。
· getters：state对象读取方法。图中没有单独列出该模块，应该被包含在了render中，Vue Components通过该方法读取全局state对象。

你都做过哪些Vue的性能优化

编码阶段
尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
v-if和v-for不能连用
如果需要使用v-for给每项元素绑定事件时使用事件代理
SPA 页面采用keep-alive缓存组件
在更多的情况下，使用v-if替代v-show
key保证唯一
使用路由懒加载、异步组件
防抖、节流第三方模块按需导入
长列表滚动到可视区域动态加载
图片懒加载
SEO优化
预渲染
服务端渲染SSR
打包优化
压缩代码
Tree Shaking/Scope Hoisting
使用cdn加载第三方模块
多线程打包happypack
splitChunks抽离公共文件
sourceMap优化
用户体验
骨架屏
PWA

v-model的理解

抓住几个点
● vue 框架是数据驱动的，数据的变化会影响视图
● v-model 是个指令、是一个语法糖（什么是语法糖？自行搜索）
● v-model 指令用于表单组件上，如 input、textarea、select 等，因为这些组件，我们可以改变视图中的内容，如果 v-model 应用于 span 之类，就没有意义了
● 比如 v-model 应用于 input 组件其实做了下面几件事情
○ 绑定data中的某个数据到 input 的 value 属性
○ 用户在文本框输入内容时，触发 input 事件
○ v-model 绑定的属性更新时，会重新渲染

用vue 实现每隔一秒控制子元素（子元素可以是任意内容）显示和隐藏的组件 Blink

图片说明

树的每一个节点都有value值，叶子节点是没有子节点的节点，实现获取所有叶子结点中最大值

图片说明

场景如下，页面里面有一个按钮，点击之]需要向服务端发起一个请求，在这个请求没有返回之前，无论点击多少次都不会发送第二遍请求

图片说明

实现一个获取对象任意属性值的方法

图片说明

用Promise对fetchData进行包装，将回调的设计封装成then的形式

图片说明

keep-alive的作用是什么?

keep-alive包裹动态组件时，会缓存不活动的组件实例, 主要用于保留组件状态或避免重新渲染。

Vue.set 方法的作用

具体问题的表述可能会不一样，如“vue中为什么要使用 set 方法”，“动态的向 data 中的某个对象添加属性后，如何保证这个属性也是响应式的”等等
这个问题，回答的即可可以简单，也可深入阐述
简单回答：因为 vue 基于 Object.defineProperty 实现了响应式，在 vue 实例创建的时候，vue 会遍历 data 中对象的所有属性(property)，把这些属性全部转为 getter/setter。然后Vue 通过 getter/setter 追踪数据的变化。但是Object.defineProperty本身也存在问题，就是对于后期为对象添加的新的属性，因为没有添加 getter 和 setter，所以Vue就无法追踪，导致我们明明在代码中为data 中的某个对象新增了一个属性，视图中却没有变化
对于数组，也存在类似问题，就是 Vue无法检测到通过索引为数组设置的新元素，以及当属于长度发生变化时，Vue 也无法检测到
Vue.set 方法向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新

加分回答：在做出上述回答的前提下，再加入如下两方面的观点
Vue3 中通过 Proxy 替换了 Object.defineProperty ，解决了上面的问题，也就是说，后期为对象添加的属性也自动就成为响应式的了，所以 vue3 中废弃了 set 方法
最后，如果和面试官聊的不错，还可以抛出一些问题，和面试官讨论。
比如