一、关于对 Vue 项目进行优化，你有哪些方法?
1.代码层面的优化
- v-if 和 v-show 区分使用场景
- computed 和 watch 区分使用场景
- v-for 遍历必须为 item 添加 key，且避免同时使用 v-if
- 长列表性能优化
- 事件的销毁
- 图片资源懒加载
- 路由懒加载
- 第三方插件的按需引入
- 优化无限列表性能
- 服务端渲染 SSR or 预渲染
2.Webpack 层面的优化
- Webpack 对图片进行压缩
- 减少 ES6 转为 ES5 的冗余代码
- 提取公共代码
- 模板预编译
- 提取组件的 CSS
- 优化 SourceMap
- 构建结果输出分析
- Vue 项目的编译优化
3.基础的 Web 技术的优化
- 开启 gzip 压缩
- 浏览器缓存
- CDN 的使用
- 使用 Chrome Performance 查找性能瓶颈
二、Vue 中的 key 有什么作用?
key是为了vue中虚拟dom的唯一表示，通过key的唯一性可以是diff算法更精准更快速，因为这个算法过程会比较新的虚拟dom树与旧的虚拟dom树进行一轮比较，如果对应节点有变化的话，就渲染到真实的dom树中，而key就是虚拟dom的唯一的标记；也因此在项目的开发中最好避免使用index作为key的索引值，这样会引发一些问题，在逆序添加删除会破坏顺序的操作，同时效率也相对较低；
三、说说双向绑定原理？
回答方式1：
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
回答方式2：
双向数据绑定也就是说mvvm模式，数据变化更新视图，视图变化更新数据。数据更新视图：有三个角色监听器Observer，订阅器Watcher，解析器Compile。 首先监听器Observer对数据进行劫持并监听所有的属性，也就是使用Object.definedProperty进行劫持，如果有变化就通知订阅者来判断是执行相当的变化。解析器来解析模版指令，替换模版数据，从而更新视图，
四、vue响应式原理
vue内部通过Object.definedProperty方法把data对象里面的每个数据都进行监听拦截。
当一个 Vue 实例创建时，vue 会遍历 data 选项的属性，用 Object.defineProperty 将它们转为 getter/setter 并且在内部追踪相关依赖，在属性被访问和修改时通知变化。
每个组件实例 / 元素都有相应的 watcher 程序实例，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新
五、用过keep-alive吗，说说对它的理解
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，避免重新渲染 ，有以下特性：
1、一般结合路由和动态组件一起使用，用于缓存组件。
2、提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹 配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存 ，其中 exclude 的优先级比 include 高。
3、对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated， 当组件被移除时，触发钩子函数 deactivated。
六、组件中为什么data是一个函数？
原因：因为组件是需要被复用的，所以必须是一个函数，如果是一个对象，作用域没有分开，子组件 的data属性值会相互影响。一个函数的话那么每个实例可以维护一份被返回对象的独立的拷贝，组件之间的 data 属性值不会互相影响。
七、为什么new Vue里data可以是一个对象？
因为JS里的对象是引用关系，而且new Vue是不会被复用的，所以不存在引用对象的问题。
八、vue3的新特效
更快
虚拟DOM重写
优化slots的生成
静态树的提升
静态属性的提升
基于proxy的响应式系统
更小
更容易维护：ts+模块化
更友好：跨平台
更容易使用
Compensation API
九、Vue 组件间通信有哪几种方式？
父子组件：props/parent/$children
父子、隔代、兄弟：eventBus（on）/ vuex
隔代组件:listeners provide / inject
拓展：路由传值、 h5的seesionstorage localstorage
十、vuex中，有默认的五种基本的对象？
- state：存储状态（变量）
- getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用 $sotre.getters.fun()
- mutations：修改状态，并且是同步的。在组件中使用$store.commit('',params)。这个和我们组件中的自定义事件类似。
- actions：异步操作。在组件中使用是$store.dispath('')
- modules：store的子模块，为了开发大型项目，方便状态管理而使用的。这里我们就不解释了，用起来和上面的一样。
