2021面试题——vue面试题总结

vue面试题总结

1.vue的特点是什么

1.国人开发的轻量级框架

2.双向数据绑定，在数据操作方面更为简单

3.视图，数据，结构分析，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作

4.组件化，方便封装和复用

5.虚拟dom：dom的操作是非常耗费性能的，不再使用原生的dom操作节点，极大释放dom操作

2.vue中父子组件是如何操作的

1、路由配置：使用children属性实现路由嵌套，嵌套的组件关系就是父子组件关系；

2、组件传值-父组件向子组件传值；

第一步：父组件 在引用子组件时，通过属性绑定（v-bind：）的形式，把需要传递给子组件的数据，传递到子组件内部，供子组件使用

第二步：把父组件传递过来的数据， 在 props数组 中定义一下：

1. 组件中的 所有props 中的数据，都是通过父组件传递给子组件的
2. props 中的数据都是只读的，无法重新赋值

第三步：在该子组件中使用props数组 中定义好的数据

3、组件传值-父组件把方法传递给子组件

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

第二步：在子组件中定义一个方法，在方法中，利用 $emit 触发 父组件传递过来的，挂载在当前实例上的事件，还可以传递参数

第三步：在子组件中调用定义的那个方法，就可以触发父组件传递过来的方法了

4、组件传值-子组件通过事件调用向父组件传值

在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件

5、父子组件之间相互传值

3.v-if和v-show指令的区别

共同点：都能控制元素的显示和隐藏

不同点：本质方法不同

v-show本质是通过css中的display设置为none，控制隐藏，只会编译一次；v-if是动态的向dom树内添加或删除dom元素，若初始值是false，就不会编译了，而且v-if不停地销毁和创造比较消耗体能

总结：如果要频繁切换某节点，使用v-show（切换开销比较小，初始开销比较大）

不需要频换切换节点使用v-if（初始渲染开销较小，切换开销较大）

4.说出几种vue当中的指令和作用

v-model 双向数据绑定

v-for 循环

v-if v-show 显示与隐藏

v-on 事件

v-once 只绑定一次

5.vue-loader是什么？用途有哪些

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

用途：js可以写es6，style样式，可以写scss或者less,template可以加jade

6.axios是什么，怎么使用

请求后台资源的模块

安装

 npm install axios --save

js中使用import引入，然后执行.get .post请求,如果成功返回在.then函数中，失败则返回在.catch函数中

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

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

优点：

1，用户体验好，快，内容的改变不需要重新加载整个页面，基于这一点spa对服务器压力较小

2，前后端分离

3，页面效果会比较炫酷（比如切换页面内容时的专场动画）

缺点：

1，不利于seo

2，导航不可用，如果一定要导航需要自行实现前进、后退。（由于是单页面不能用浏览器的前进后退功能，所以需要自己建立堆栈管理）

3，初次加载时耗时多

4，页面复杂度提高很多

多页面（MPA），就是指一个应用中有多个页面，页面跳转时是整页刷新优点：

1.多个页面之间跳转，用户可以清晰的了解整个网站的内容构成；

2.页面结构的分布也不会很拥挤；

3.实现简单，开发成本低；

4.适用于对搜索引擎支持较高，页面跳转较少，数据传递较少的项目中开发。

缺点：

1.页面跳转时，要重新执行css，js等文件，页面片段之间跳转较慢，需要用到页面跨页面传值的几种方法；

2.实现转场动画比较困难。维护成本高。

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

.stop:等同于js中的event.stopPropagation(),防止事件冒泡

.prevent:等同于js中的event.stopDefault()，防止执行预设的行为（如果时间可取消，则取消该事件，而不是停止事件的进一步传播）

.capture:与事件冒泡的方向相反，事件捕获由外到内

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

.once:只会触发一次

10.前端如何优化网站性能

• 减少http请求数量
• 可以通过精灵图，合并css和js文件，懒加载lazyload等方式来减少请求
• 控制资源文件加载优先级
• 利用浏览器缓存
• 减少dom操作
• 图标使用iconfont替换image

11.vue中样式绑定语法

1.对象方法 v-bind:class="{'orange':isRipe,'green':isNotRipe}"
2.数组方法 v-bind:class="[class,class1]"
3.行内 v-bind:style="{color:color,fontSize:fontSize+'px'}"

12.简述vue中每个生命周期具体适合那些场景

• beforeCreate：创建前，此阶段为实例初始化之后，this指向创建的实例，此时的数据观察事件机制都未形成，不能获得DOM节点。
  data，computed，watch，methods 上的方法和数据均不能访问。
  可以在这加个loading事件。
• created：创建后，此阶段为实例已经创建，完成数据（data、props、computed）的初始化导入依赖项。
  可访问 data computed watch methods 上的方法和数据。
  初始化完成时的事件写在这里，异步请求也适宜在这里调用（请求不宜过多，避免白屏时间太长）。
  可以在这里结束loading事件，还做一些初始化，实现函数自执行。
  未挂载DOM，若在此阶段进行DOM操作一定要放在Vue.nextTick()的回调函数中。
• beforeMount：挂载前，虽然得不到具体的DOM元素，但vue挂载的根节点已经创建，下面vue对DOM的操作将围绕这个根元素继续进行。
  beforeMount这个阶段是过渡性的，一般一个项目只能用到一两次。
• mounted：挂载，完成创建vm.$el，和双向绑定
  完成挂载DOM和渲染，可在mounted钩子函数中对挂载的DOM进行操作。
  可在这发起后端请求，拿回数据，配合路由钩子做一些事情。
• beforeUpdate：数据更新前，数据驱动DOM。
  在数据更新后虽然没有立即更新数据，但是DOM中的数据会改变，这是vue双向数据绑定的作用。
  可在更新前访问现有的DOM，如手动移出添加的事件监听器。
• updated：数据更新后，完成虚拟DOM的重新渲染和打补丁。
  组件DOM已完成更新，可执行依赖的DOM操作。
  注意：不要在此函数中操作数据（修改属性），会陷入死循环。
• activated：在使用vue-router时有时需要使用``来缓存组件状态，这个时候created钩子就不会被重复调用了。
  如果我们的子组件需要在每次加载的时候进行某些操作，可以使用activated钩子触发。
• deactivated：< keep-alive> < /keep-alive>组件被移除时使用。
• beforeDestroy：销毁前，
  可做一些删除提示，如：您确定删除xx吗？
• destroyed：销毁后，当前组件已被删除，销毁监听事件，组件、事件、子实例也被销毁。
  这时组件已经没有了，无法操作里面的任何东西了。

13.scss是什么

预处理css，把css当前函数编写，定义变量,嵌套.

14.如何避免回调函数

模块化：将回调函数转换为独立的函数

使用流程控制库，例如 aync

使用promise

使用 aync await

15.使用npm有什么好处

1.安装和管理项目的依赖，并且能够指明依赖的具体版本号

2.对于node应用开发而言，可以通过package.json文件来管理项目信息，配置脚本，以及指明依赖的 具体版本

3.npm install XX -S(–save) dependencies 会发布到生产环境的

npm install XX -D(–save-dev) devDependencies 里面的插件只用于开发环境，不会发布到生产环境（构建工具webpack）

4.项目转换的时候，不会把node_modules包发过去，拿到没有node_modules的项目时，npm install 安装回来

16.一般来说，针对不同的浏览器写不同的css，就是css Hack

17.消除一个数组里面重复的元素

arr1=[]
var arr2=[1,2,3,4,5,6,6,7,7]
for (var i=0,len=arr2.length;i<len;i++){
    if (arr1.indexOf(arr2[i])<0){
        arr1.push(arr2[i])
    }
}

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

indexof() ：在字符串中从前向后定位字符和字符串；所有的返回值都是指在字符串的绝对位置，如为空则为- 1

string test=“asdfjsdfjgkfasdsfsgfhgjgfjgdddd”;

test.indexof(‘d’) =2 //从前向后 定位 d 第一次出现的位置

test.indexof(‘d’,1) =2 //从前向后 定位 d 从第二个字符串开始 即s开始 第一次出现的位置

18.写一个function，清除字符串前后的空格（兼容所有浏览器）

function trim(str){
    if (str & typeof str ==="string"){
        return str.replace(/(^s*)|(s*)$/g,"")//去除前后空白符
    }
}

19.一次完整的http事物是怎样的一个过程

基本流程：

1.域名解析

2.发起tcp的三次握手

3.建立tcp连接后发起http请求

4.服务端响应http请求，浏览器得到html代码

5.浏览器解析html代码，并请求html代码中的资源

6.浏览器对页面进行渲染呈现给用户

20.常用的es6的功能

原生 Promise

用 promise 替代回调地狱

ES5

function printAfterTimeout(string, timeout, done){

setTimeout(function(){

done(string);

}, timeout);

}

printAfterTimeout('Hello ', 2e3, function(result){

console.log(result);

// nested callback

printAfterTimeout(result + ‘Reader’, 2e3, function(result){

console.log(result);

});

});

这个函数接收一个回调，在 done 后执行。我们想要先后执行两次，所以在回调中又一次调用了 printAfterTimeout。

如果需要 3 或 4 次回调，代码很快就一团糟了。那么用 promise 如何实现呢：

ES6

function printAfterTimeout(string, timeout){

return new Promise((resolve, reject) => {

setTimeout(function(){

​ resolve(string);

}, timeout);

});

}

printAfterTimeout('Hello ', 2e3).then((result) => {

console.log(result);

return printAfterTimeout(result + ‘Reader’, 2e3);

}).then((result) => {

console.log(result);

});

promise 中可以用 then 在某个函数完成后执行新的代码，而不必再嵌套函数。

箭头函数

ES6 没有移除函数表达式，但是新增了箭头函数。

ES5 中，this 的指向有问题：

ES5

var _this = this; // need to hold a reference

$(’.btn’).click(function(event){

_this.sendData(); // reference outer this

});

$(’.input’).on(‘change’,function(event){

this.sendData(); // reference outer this

}.bind(this)); // bind to outer this

在函数内，需要用临时变量指向 this 或者使用 bind 绑定。ES6 中可以使用箭头函数。

21.link和@import的区别

两者都是外部引用css的方式，但是存在一定的区别

1.link是xhtml标签，除了能够加载css，还可以定义rss等其他事务，而@import属于css范畴，只可以加载css；

2.link引用css时，在页面加载时同时加载；@import需要页面完全载入以后在加载

3.link是XHTML标签，无兼容问题；@import则是在css2.1提出的，低版本的浏览器不支持

4.link支持使用js控制dom改变样式；而@import不支持

22.描述一下 cookie，sessionStorage和localStorage的区别

1.cookie是网站为了标示用户身份而储存在用户本地终端上的数据（通常经过加密），cookie数据始终在同源的http请求中携带（即使不需要），在浏览器和服务器间来回传递。

sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

存储大小：

cookie数据大小不能超过4k

sessionStorage和localStorage虽然也有存储大小的限制，但是比cookie大得多，可以达到5M或者更大

有效时间：

localStorage 存储持久数据，浏览器关闭后数据不会丢失除非主动删除数据

sessionStorage 数据在当前浏览器窗口关闭后自动删除

cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

23.mvvm模式和mvc的区别是什么?

MVC（Model-View-Controller）

MVVM（Model-View-ViewModel）

他们之间的区别主要是MVC中Controller演变成了MVVM中的viewModel。MVVM主要解决了MVC中大量的DOM操作带来的问题。MVVM中当和Model频繁发生变化，开发者需要主动更新到View。

24.谈谈你对MVVM开发模式的理解

MVVM分为model，view，viewmodel三者

• model：代表数据模型，数据和业务逻辑都在model中定义
• view：代表ui视图，负责数据的展示
• viewmodel：负责监听model中数据的改变并且控制视图的更新，处理用户交互操作

这种模式实现了model和view的数据自动同步，因此开发者只需要专户对数据的维护操作即可，而不需要自己操作dom