脚本宝典收集整理的这篇文章主要介绍了VUE面试题汇总(十),脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
往期点这里:↓ VUE面试题汇总(一) VUE面试题汇总(二) VUE面试题汇总(三) VUE面试题汇总(四) VUE面试题汇总(五) VUE面试题汇总(六) VUE面试题汇总(七) VUE面试题汇总(八) VUE面试题汇总(九) 91. 发布-订阅模式
参考答案:
在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
以上是脚本宝典为你收集整理的VUE面试题汇总(十)全部内容,希望文章能够帮你解决VUE面试题汇总(十)所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。