VUE面试题汇编，参考多方面资源

VUE 面试题汇编总结 本资源摘要信息涵盖了 VUE 面试题汇编，涵盖了多方面的知识点，包括 Vue 组件通信、Vuex 的 Store、Getter、Mutation、Action、Module 等。 Vue 组件通信 在 Vue 中，父组件可以通过自定义属性名 + 数据（要传递）=> :value=“数据”来传递数据给子组件，而子组件可以通过 props ["父组件上的自定义属性名"] 来接收数据。子组件也可以通过 this.$emit('自定义事件名称', 数据) 来传递数据给父组件，而父组件可以在子组件标签上绑定 @自定义事件名称=’回调函数’ 来接收数据。在兄弟组件之间，可以使用中央通信 Bus，让 bus = new Vue()，A 组件可以通过 bus.$emit('自定义事件名称', 数据) 来发送数据，而 B 组件可以通过 created 中的 bus.$on('A 发送过来的自定义事件名称', 函数) 来接收数据。 Vuex 的 Store Vuex 的 Store 就是一个仓库，仓库里放了很多对象，其中 state 就是数据源存放地，对应于一般 Vue 对象里面的 data。state 里面存放的数据是响应式的，vue 组件从 store 读取数据，若是 store 中的数据发生改变，依赖这相数据的组件也会发生更新。通过 mapState，把全局的 state 和 getters 映射到当前组件的 computed 计算属性。 Vuex 的 Getter Getter 可以对 state 进行计算操作，它就是 store 的计算属性。Getter 可以在多个组件之间复用。如果一个状态只在一个组件内使用，是可以不用 getters。 Vuex 的 Mutation Mutation 是更改 Vuex 的 store 中的状态的唯一方法。它是同步操作，不可以包含异步操作。 Vuex 的 Action Action 类似于 Mutation，不同在于，Action 提交的是 Mutation，而不是直接变更状态。Action 可以包含任意异步操作。Vue 中的 Ajax 请求代码应该写在组件的 methods 中还是 Vuex 的 Action 中。 Vuex 的 Module Vuex 的 Module 是为了解决复杂的应用程序中状态管理的问题。当管理的状态比较多时，我们需要将 Vuex 的 store 对象分割成模块（modules）。如果请求来的数据不是要被其他组件公用，仅仅在请求的组件内使用，就不需要放入 Vuex 的 state 里，如果被其他地方复用，请将请求放入 action 里，方便复用，并包装成 promise 返回。 MVVM 模式 MVVM 模式由 Model、View、ViewModel 三部分构成，Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑；View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，ViewModel 是一个同步 View 和 Model 的对象。在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而 View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作 DOM， 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。 Vue 实现双向数据绑定 Vue 实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过 Object.defineProperty（） 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 会将其转换成响应式的对象。