往期点这里：↓
VUE面试题汇总（一）
VUE面试题汇总（二）
VUE面试题汇总（三）
VUE面试题汇总（四）
VUE面试题汇总（五）
VUE面试题汇总（六）
VUE面试题汇总（七）
VUE面试题汇总（八）
VUE面试题汇总（九）
91. 发布-订阅模式
参考答案：
Vue中发布订阅模式
在Vue中采用了发布订阅模式，典型的兄弟组件间的通信
$on和$emit
发布订阅模式：（订阅者、发布者、信号中心）
一个发布者$emit发布一个事件到信号中心eventBus，订阅者们$on通过信号中心收到该事件，进行处理
在这里模拟一个自定义事件 $on和$emit事件:
class EventBus{
constructor(){
// 1.处理事件对应的处理函数
this.sub = {
}
}
$on(event,fn){
if(!this.sub[event]){
// 2.判断sub是否已经存在该事件了，没有的话就赋值一个数组，用来存储触发函数
this.sub[event] = []
}
// 3.将函数push到对应的事件中
this.sub[event].push(fn)
}
$emit(event){
if(this.sub[event]){
this.sub[event].forEach(fn=>{
fn() //4.执行对应事件中的处理函数
})
}
}
}
// 信号中心
const vm = new EventBus()
// 订阅事件
vm.$on('click',()=>{
console.log('触发了click事件')})
vm.$on('change',()=>{
console.log('触发了change事件')})
// 发布订阅
vm.$emit('click')
vm.$emit('change')
解析：
参考
92. 实现 MVVM 的思路分析
参考答案：
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。
一个简单的MVVM构造器是这样子：
function MVVM(options) {
this.$options = options;
var data = this._data = this.$options.data;
observe(data, this);
this.$compile = new Compile(options.el || document.body, this)
}
但是这里有个问题，从代码中可看出监听的数据对象是options.data，每次需要更新视图，则必须通过var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq'; 这样的方式来改变数据。
显然不符合我们一开始的期望，我们所期望的调用方式应该是这样的：
var vm = new MVVM({
data: {
name: 'kindeng'}}); vm.name = 'dmq';
所以这里需要给MVVM实例添加一个属性代理的方法，使访问vm的属性代理为访问vm._data的属性，改造后的代码如下：
function MVVM(options) {
this.$options = options;
var data = this._data = this.$options.data, me = this;
// 属性代理，实现 vm.xxx -> vm._data.xxx
Object.keys(data).forEach(function(key) {
me._proxy(key);
});
observe(data, this);
this.$compile = new Compile(options.el || document.body, this)
}
MVVM.prototype = {
_proxy: function(key) {
var me = this;
Object.defineProperty(me, key, {
configurable: false,
enumerable: true,
get: function proxyGetter() {
return me._data[key];
},
set: function proxySetter(newVal) {
me._data[key] = newVal;
}
});
}
};
这里主要还是利用了Object.defineProperty()这个方法来劫持了vm实例对象的属性的读写权，使读写vm实例的属性转成读写了vm._data的属性值，达到鱼目混珠的效果，哈哈
解析：
DMQ、廖雪峰官网的MVVM解释
93. mvvm 和 mvc 区别？它和其它框架（jquery）的区别是什么？哪些场景适合？
参考答案：
mvc 和 mvvm 其实区别并不大。都是一种设计思想。主要就是 mvc 中 Controller 演变成 mvvm 中的 viewModel。mvvm 主要解决了 mvc 中大量的 DOM 操作使页面渲染性能降低，加载速度变慢，影响用户体验。
区别：vue 数据驱动，通过数据来显示视图层而不是节点操作。
场景：数据操作比较多的场景，更加便捷
94. 构建的 vue-cli 工程都到了哪些技术，它们的作用分别是什么？
参考答案：
1、vue. js：vue-cli 工程的核心，主要特点是 双向数据绑定 和 组件系统。
2、vue-router：vue 官方推荐使用的路由框架。
3、vuex：专为 Vue. js 应用项目开发的状态管理器，主要用于维护 vue 组件间共用的一些 变量 和 方法。
4、axios（ 或者 fetch 、ajax ）：用于发起 GET 、或 POST 等 http 请求，基于 Promise 设计。
5、vux 等：一个专为 vue 设计的移动端 UI 组件库。
6、创建一个 emit. js 文件，用于 vue 事件机制的管理。
7、webpack：模块加载和 vue-cli 工程打包器。
95. vue-cli 工程常用的 npm 命令有哪些？
参考答案：
npm install、npm run dev、npm run build --report 等
解析：
下载 node_modules 资源包的命令：npm install
启动 vue-cli 开发环境的 npm 命令：npm run dev
vue-cli 生成 生产环境部署资源 的 npm 命令：npm run build
用于查看 vue-cli 生产环境部署资源文件大小的 npm 命令：npm run build --report，此命令必答
命令效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-G9K94FwJ-1639298266046)(…/…/images/vue_001.jpg)]
在浏览器上自动弹出一个 展示 vue-cli 工程打包后 app. js、manifest. js、vendor. js 文件里面所包含代码的页面。可以具此优化 vue-cli 生产环境部署的静态资源，提升 页面 的加载速度。
96. 请说出 vue-cli 工程中每个文件夹和文件的用处
参考答案：
vue-cli目录解析：
build 文件夹：用于存放 webpack 相关配置和脚本。开发中仅 偶尔使用 到此文件夹下 webpack.base.conf.js 用于配置 less、sass等css预编译库，或者配置一下 UI 库。
config 文件夹：主要存放配置文件，用于区分开发环境、线上环境的不同。 常用到此文件夹下 config.js 配置开发环境的 端口号、是否开启热加载 或者 设置生产环境的静态资源相对路径、是否开启gzip压缩、npm run build 命令打包生成静态资源的名称和路径等。
dist 文件夹：默认 npm run build 命令打包生成的静态资源文件，用于生产部署。
node_modules：存放npm命令下载的开发环境和生产环境的依赖包。
src: 存放项目源码及需要引用的资源文件。
src下assets：存放项目中需要用到的资源文件，css、js、images等。
src下componets：存放vue开发中一些公共组件：header.vue、footer.vue等。
src下emit：自己配置的vue集中式事件管理机制。
src下router：vue-router vue路由的配置文件。
src下service：自己配置的vue请求后台接口方法。
src下page：存在vue页面组件的文件夹。
src下util：存放vue开发过程中一些公共的.js方法。
src下vuex：存放 vuex 为vue专门开发的状态管理器。
src下app.vue：使用标签<route-view></router-view>渲染整个工程的.vue组件。
src下main.js：vue-cli工程的入口文件。
index.html：设置项目的一些meta头信息和提供<div id="app"></div>用于挂载 vue 节点。
package.json：用于 node_modules资源部 和 启动、打包项目的 npm 命令管理。
97. config 文件夹 下 index. js 的对于工程 开发环境 和 生产环境 的配置
参考答案：
build 对象下 对于 生产环境 的配置：
index：配置打包后入口.html文件的名称以及文件夹名称
assetsRoot：配置打包后生成的文件名称和路径
assetsPublicPath：配置 打包后 .html 引用静态资源的路径，一般要设置成 “./”
productionGzip：是否开发 gzip 压缩，以提升加载速度
dev 对象下 对于 开发环境 的配置：
port：设置端口号
autoOpenBrowser：启动工程时，自动打开浏览器
proxyTable：vue设置的代理，用以解决 跨域 问题
98. 请你详细介绍一些 package. json 里面的配置
参考答案：
scripts：npm run xxx 命令调用node执行的 .js 文件
dependencies：生产环境依赖包的名称和版本号，即这些 依赖包 都会打包进 生产环境的JS文件里面
devDependencies：开发环境依赖包的名称和版本号，即这些 依赖包 只用于 代码开发 的时候，不会打包进 生产环境js文件 里面。
99. vue-cli 中常用到的加载器
参考答案：
-
安装 sass:
-
安装 axios:
-
安装 mock:
-
安装 lib-flexible: --实现移动端自适应
-
安装 sass-resourses-loader
100. vue. cli 中怎样使用自定义的组件？有遇到过哪些问题吗？
参考答案：
第一步：在 components 目录新建你的组件文件（如：indexPage. vue），script 一定要 export default {}
第二步：在需要用的页面（组件）中导入：import indexPage from ‘@/components/indexPage. vue’
第三步：注入到 vue 的子组件的 components 属性上面, components:{indexPage}
第四步：在 template 视图 view 中使用
遇到的问题：
例如有 indexPage 命名，使用的时候则 index-page