vue面试题，高效web开发，web前端开发基础入门

5、vue-loader是什么？使用他的用途

===================================================================================

vue文件的一个加载器，将template/js/style转换成js模块，

用途：js可以写es6、style样式可以写成less

作用：解析和转换 .vue 文件，提取出其中的逻辑代码 script、样式代码 style、以及 HTML 模版 template，再分别把它们交给对应的 Loader 去处理。

6、axios是什么？怎么使用

============================================================================

da:请求后台资源的模块

npm install axios -D 装好，js中使用imort引进来，然后.get

.post返回.then函数中，如果成功是什么，失败是什么在catch函数

qvb

7.单页面和多页面应用的区别以及优缺点

================================================================================

答：

1. 单页面应用（spa），通俗一点说只有一个主页面应用，浏览器一开始要加载所有html，js，css，所有的页面内容包含在这个所谓的主页面中。但在写的时候，还是会分开写，然后再交互的时候有路由程序动态载入。

2. 多页面（mpa），就是指一个应用中有多个页面，页面跳转的时候会整页刷新

3. 单页面优点：用户体验好，快，内容改变不需要重新加载整个页面，基于这一点spa对服务器压力较小，前后端分离；页面效果比较酷炫

4. 单页面缺点：不利于seo；导航不可以，如果一定要导航需要自行前进，后退

8.简述一下vue常用的修饰符和作用？

================================================================================

普通修饰符：

v-mode:修饰符

.lazy: lazy光标离开才会更新数据

.trim: 输入框过滤首位空格

.number: 用户输入值转为number类型

事件修饰符：

答：

1. stop： 等同于javascript 中的event。stopPropagation ，防止事件冒泡；

2. prevent:等同于JavaScript中的even.preventDefault(),防止执行预设的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播);

3. capture:与事件冒泡的方向取反,事件捕获由外到内;

4. self:只会触发自己的范围内的事件,不包含子元素;

5. once:只会触发一次

6. keyCode

9.谈谈你对mvvm的开发模式的理解

===============================================================================

mvvm分为Model,view.ViewMode三种.

• model:代表数据模型,数据和业务逻辑都在Model层中定义;

• View:代表ui视图,负责数据的展示;

• VIewModel:负责监听Model中数据的改变并且控制视图的更新,处理用户交互操作;

Model和view并无直接关联,而是通过ViewModel来进行联系的,Model和viewModel之间有着双向数据绑定的联系.因此当Model中的数据改变时会触发view层的刷新,VIew中由用户交互操作而改变的数据也会再Model中同步,

这种模式实现了Model和View的数据自动同步,因此开发者只需要专注数据的维护操作即可,而不需要之间操作

10前端如何优化性能?

========================================================================

1. 减少HTTP请求数量

.

在浏览器与服务器进行通信的时候,主要通过http请求通信.浏览器与服务器需要经过三次握手,每次握手需要花费大量时间,而且不同浏览器对资源文件并发请求数量有限(不同浏览器允许并发数),一旦http请求数量达到一定数量,资源请求就存在等待状态,这是致命的,因此减少http的请求数量可以很大程度上对网站进行优化.

可以通过精灵图,合并css和js文件.懒加载等方式减少htttp请求.

cssScript

国内俗称css精灵,这是将多张图片合并成一张图片达到减少httphttp的一种解决方案,可以通过css的background:url;属性来访问图片内容,这种方案还可以减少图片总字节数

.

合并css和js文件

现在前端有很多工程化打包工具,如:grunt,webpack等,为了价内税http请求数量看,可以通过这些工具再发布前将多个css或者js合并成一个文件

采用lazyload

俗称懒加载,可以控制网页上的内内容在一开始无需加载,不需要发请求,等到操作正真需要的时候立即加载出内容.这样就控制了网页资源一次性

2. 控制资源文件加载优先级

浏览器在加载http内容时,时将html内容从上至下解析,解析到link或者script标签就会加载href或者src对应连接内容,为了第一时间展示页面给用户,就需要提前加载,不要受js加载影响.

一般情况下都是css在头部,js在底部.

3. 利用浏览器缓存

浏览器缓存是将网络资源存储在本地,等待下次请求资源时,如果资源已经存在就不需要服务器重新请求资源,直接在本地读取该资源

4.减少DOM操作(vue这种减少操作dom)

5.图标使用iconfont替换image标签

11.vue中样式绑定

========================================================================

1, 对象:v-bind:class=“{‘orange’:isMage,‘green’:isnotMage}”

2. 数组方法:v-bind：class=“[class1,class2]”

3. 行内v-bind:style=“{color:colro,fontsize:fontsize+‘px’}”

13.简述vue中每个生命周期具体适合哪些场景?

=====================================================================================

beforeCreate在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法

created: data和methods都已经被初始化好了，如果要调用methods 中的方法，或者操作 data中的数据，最早可以在这个阶段中操作

beforeMount: 执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面

人主1旧勺

mountedt执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行

beforeUpdate: 当执行这个钩子时，页面中的显示的数据还是旧的

data中的数据是更新后的，页面还没有和

最新的数据保持同步

updated: 页面显示的数据和data中的数据已经保持同步了，都是最新的

beforeDestory Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的data和methods，指令，过滤器…都是处于可用状态。还没有真正被销毁

destroyed这个时候上所有的data和methods ，指令，过滤器…都是处于不可用状态。组件已经被销毁

加载渲染过程

父beforeCreate —> 父created —> 父beforeMount —> 子beforeCreate —> 子created —> 子beforeMount —> 子mounted —> 父mounted

子组件更新过程

父beforeUpdate —> 子beforeUpdate —> 子updated —> 父updated

父组件更新过程

父beforeUpdate —> 父updated

销毁过程

父beforeDestroy —> 子beforeDestroy —> 子destroyed —> 父destroyed

var vm = new Vue({

el: “#app”,

data:{},

beforeCreate(){//实例被完全创建出来前执行

//在该周期，data和method都还未被初始化

},

created(){ //

//此时，data和method都已初始化

},

beforeMount(){

//模板已编译于内存中，但未被页面渲染

//即{{}} 还未有效

},

mounted(){

//当执行该函数时，实例已被完全创建好了。若没有后续操作，则一直放置于内存中

},

beforeUpdate(){

//数据发生改变时，this.data已发生变化，但html的value未改变

},

updated(){

//数据的变化，页面也已渲染完成

},

beforeDestroy(){

//此时，实例的相关内容仍然有效

},

destroyed(){

//实例已被销毁，相关内容已无效

}

})

14.如何避免回调地狱

========================================================================

答:

模块化:将回调函数转换为独立的函数·使用流程控制库，例如[async]

·使用Promise

使用async,await

15.使用NPM有哪些好处?

小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记