VUE中的重点*

1.MVC 和 MVVM的区别？

MVC：M（model数据）、V（view视图），C（controlle控制器）
缺点是前后端无法独立开发，必须等后端接口做好了才可以往下走；
前端没有自己的数据中心，太过依赖后台

MVVM：M（model数据）、V（view视图）、VM（viewModel控制数据的改变和控制视图）
html部分相当于View层，可以看到这里的View通过通过模板语法来声明式的将数据渲染进DOM元素，
当ViewModel对Model进行更新时，通过数据绑定更新到View。 
Vue实例中的data相当于Model层，而ViewModel层的核心是Vue中的双向数据绑定，
即Model变化时VIew可以实时更新，View变化也能让Model发生变化

MVVM与MVC最大的区别就是：它实现了View和Model的自动同步，
也就是当Model的属性改变时，我们不用再自己手动操作Dom元素，来改变View的显示，
而是改变属性后该属性对应View层显示会自动改变

2. v-model 原理？

是采用数据劫持结合发布者-订阅者模式的方式, 通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调从而达到数据和视图同步。

3.vue中的data为什么是一个函数？

实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。

4.打包后 dist 目录过大，解决办法？

dist打包生成的文件中有 .map 文件，可以删除。在 vue.config.js文件中配置：productionSourceMap: false
组价和路由使用懒加载、按需引入等
对于文件和图片进行压缩。 安装压缩组件： compression-webpack-plugin
安装后进行导入配置：
最小化代码 minisize: true
分割代码： splitChunksl
超过限定值的文件进行压缩，threshold: 文件大小（字节为单位）

5.你使用过 Vuex 吗？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。每一个 Vuex 应用的核心就是 store（仓库）。“store” 基本上就是一个容器，它包含着你的应用中大部分的状态 ( state )。

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

---

主要包括以下几个模块：

• State => 基本数据，定义了应用状态的数据结构，可以在这里设置默认的初始状态。
• Getter => 从基本数据派生的数据，允许组件从 Store 中获取数据，mapGetters 辅助函数仅仅是将 store 中的 getter 映射到局部计算属性。
• Mutation => 是唯一更改 store 中状态的方法，且必须是同步函数。
• Action => 像一个装饰器，包裹mutations，使之可以异步。用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。
• Module => 模块化Vuex，允许将单一的 Store 拆分为多个 store 且同时保存在单一的状态树中。