vue面试题2020（vue常见面试题）

本文目录

• vue常见面试题
• 有关vue的常见面试题（上）
• vue面试题
• 使用angular、react和vue如何实现相同的面试题组件
• 史上最全前端vue面试题！推荐收藏
• 面试题：vue组件之间有哪些通信方式
• Web 前端面试

vue常见面试题

1.什么是vue的生命周期？

Vue实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载DOM-》渲染、更新-》渲染、卸载等一系列过程，我们称这是Vue的生命周期。

2.vue生命周期的作用是什么？

它的生命周期中有多个事件钩子，让我们在控制整个vue实例的过程时更容易形成好的逻辑。

3.Vue生命周期总共有几个阶段？

它可以总共分为8个阶段：创建前/后,载入前/后，更新前/后，销毁前/销毁后

4.第一次页面加载会触发那几个钩子？

第一次页面加载时会触发beforeCreate,created,beforeMount,mounted

5.DOM渲染在哪个周期中就已经完成？

DOM渲染在mounted中就已经完成了

6.生命周期钩子的一些使用方法：

1.beforecreate:可以在加个loading事件，在加载实例是触发

2.created:初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用

3.mounted:挂载元素，获取到dom节点

4.updated:如果对数据统一处理，在这里写上相应函数

5.beforeDestroy:可以一个确认停止事件的确认框

6.nextTick:更新数据后立即操作dom

7.v-show与v-if的区别

v-show是css切换，v-if是完整的销毁和重新创建
使用频繁切换时用v-show,运行时较少改变时用v-if

V-if=’false’v-if是条件渲染，当false的时候不会渲染

使用v-if的时候，如果值为false，那么页面将不会有这个html标签生成

v-show则是不管值是为true还是false，html元素都会存在，只是css中的display显示或隐藏

v-show 仅仅控制元素的显示方式，将 display 属性在 block 和 none 来回切换；而v-if会控制这个 DOM 节点的存在与否。当我们需要经常切换某个元素的显示/隐藏时，使用v-show会更加节省性能上的开销；当只需要一次显示或隐藏时，使用v-if更加合理。

8.开发中常用的指令有哪些?

v-model:一般用在表达输入，很轻松的实现表单控件和数据的双向绑定
v-html：更新元素的innerHTML

v-show与v-if：条件渲染，注意二者区别

v-on:click:可以简写为@click,@绑定一个事件。如果事件触发了，就可以指定事件的处理函数

v-for：基于源数据多次渲染元素或模板

v-bind:当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM语法

v-bind:title=”msg”简写：title="msg"

9.绑定class的数组用法

1.对象方法v-bind:class="{’orange’:isRipe, ’green’:isNotRipe}”

2.数组方法v-bind:class=""

3.行内v-bind:style="{color:color,fontSize:fontSize+’px’}”
10.路由跳转方式
1.router-link标签会渲染为标签，咋填template中的跳转都是这种；
2.另一种是是导航，也就是通过js跳转比如router.push(’/home’)

12. computed和watch有什么区别

computed
computed是计算属性，也就是计算值，它更多用于计算值的场景

computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算

computed适用于计算比较消耗性能的计算场景

watch

watch更多的是的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作

无缓存性，页面重新渲染时值不变化也会执行

小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed

如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

13. vue组件的scoped属性的作用

在style标签上添加scoped属性，以表示它的样式作用于当下的模块，很好的实现了样式私有化的目的；
但是也得慎用：样式不易（可）修改，而很多时候，我们是需要对公共组件的样式做微调的；

解决办法：

①：使用混合型的css样式：（混合使用全局跟本地的样式） /* 全局样式 */ /* 本地样式 */

②：深度作用选择器（》》》）如果你希望 scoped 样式中的一个选择器能够作用得“更深”，例如影响子组件，你可以使用 》》》 操作符： .a 》》》 .b { /* ... */ }

14. vue是渐进式的框架的理解：( 主张最少,没有多做职责之外的事 )

Vue的核心的功能，是一个视图模板引擎，但这不是说Vue就不能成为一个框架。如下图所示，这里包含了Vue的所有部件，在声明式渲染（视图模板引擎）的基础上，我们可以通过添加组件系统、客户端路由、大规模状态管理来构建一个完整的框架。更重要的是，这些功能相互独立，你可以在核心功能的基础上任意选用其他的部件，不一定要全部整合在一起。可以看到，所说的“渐进式”，其实就是Vue的使用方式，同时也体现了Vue的设计的理念
在我看来，渐进式代表的含义是：主张最少。视图模板引擎

每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。

比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：

必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）

所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。

Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。

渐进式的含义，我的理解是：没有多做职责之外的事。

15.vue.js的两个核心是什么(数据驱动、组件系统。)
数据驱动:Object.defineProperty和存储器属性: getter和setter（所以只兼容IE9及以上版本），可称为基于依赖收集的观测机制,核心是VM，即ViewModel，保证数据和视图的一致性。
16.vue常用修饰符
修饰符分为：一般修饰符，事件修身符，按键、系统
①一般修饰符：

.lazy：v-model 在每次 input 事件触发后将输入框的值与数据进行同步 。你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步

《inputv-model.lazy="msg"》

.number

《inputv-model.number="age"type="number"》
.trim
1.如果要自动过滤用户输入的首尾空白字符《inputv-model.trim=’trim’》
② 事件修饰符
《av-on:click.stop="doThis"》《/a》《!-- 阻止单击事件继续传播 --》

《formv-on:submit.prevent="onSubmit"》《/form》 《!-- 提交事件不再重载页面 --》

《av-on:click.stop.prevent="doThat"》《/a》 《!-- 修饰符可以串联 --》

《formv-on:submit.prevent》《/form》 《!-- 只有修饰符 --》

《divv-on:click.capture="doThis"》...《/div》 《!-- 添加事件监听器时使用事件捕获模式 --》  《!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --》

《divv-on:click.self="doThat"》...《/div》 《!-- 只当在 event.target 是当前元素自身时触发处理函数 --》 《!-- 即事件不是从内部元素触发的 --》

《av-on:click.once="doThis"》《/a》 《!-- 点击事件将只会触发一次 --》

③按键修饰符
全部的按键别名:
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right.ctrl.alt.shift.meta
《inputv-on:keyup.enter="submit"》或者《input@keyup.enter="submit"》
④系统修饰键 （可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。）
.ctrl.alt.shift.meta
《input@keyup.alt.67="clear"》或者《div@click.ctrl="doSomething"》Dosomething《/div》《!-- Ctrl + Click --》
20.Vue 组件中 data 为什么必须是函数
vue组件中data值不能为对象，因为对象是引用类型，组件可能会被多个实例同时引用。
如果data值为对象，将导致多个实例共享一个对象，其中一个组件改变data属性值，其它实例也会受到影响。

有关vue的常见面试题（上）

防抖 ：一个频繁触发的函数，在规定时间内，只让最后一次生效，前面的不生效。
例：防抖经常用在我们搜索框输入搜索，点击提交，防止等；
节流 ：一个频繁触发的函数，在规定时间内，函数执行一次后，只有大于设定的执行周期后才会执行第二次。
例：节流一般在onresize、mousemove、滚动事件等事件中使用，防止过多的请求造成服务器压力

盒模型的组成：元素的内容content、元素的内边距padding、元素的外边距margin、元素的边框border
盒模型分为 ： W3C标准盒子 、IE盒子
W3C标准盒子（content-box） ：又称内容盒子，是指块元素box-sizing属性为content-box的盒模型，盒子总宽度 = margin + border + padding + width
IE盒子（border-box） ：又称怪异盒模型（边框盒子），是指块元素box-sizing属性为border-box的盒模型，盒子总宽 = margin + width

1.toString()与join()一样都是把数组转成以逗号分割的字符串
2.pop() 删除数组的最后一项
3.push() 往数组最后添加新数据
4.shift() 删除数组最前面的一项

var定义的变量可以修改，如果不初始化会输出undefined，不会报错。
const定义的变量不可以修改，而且必须初始化
let是块级作用域，函数内部使用let定义后，对函数外部无影响。

1.都支持服务器端渲染
2.都有虚拟dom,组件化开发,都有‘props’的概念,允许父组件往子组件传送数据,都实现webComponent规范
3.数据驱动视图
4.都有支持native的方案,React的React native,Vue的weex
5.构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。都有管理状态，React有redux,Vue有自己的Vuex

设计思想
react
1.函数式思想，all in js ,jsx语法，js操控css
2.单项数据流
3.setState重新渲染
4.每当应用的状态被改变时，全部子组件都会重新渲染。当然，这可以通过shouldComponentUpdate这个生命周期方法来进行控制，如果为true继续渲染、false不渲染，但Vue将此视为默认的优化。
vue
1.响应式思想，也就是基于数据可变的。把html、js、css、组合到一起，也可以通过标签引擎组合到一个页面中
2.双向绑定，每一个属性都需要建立watch监听（页面不用，涉及到组件更新的话需要）
3.Vue宣称可以更快地计算出虚拟 DOM的差异，这是由于它在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树
性能
react ----大型项目、优化需要手动去做，状态可控
vue ------中小型项目、状态改变需要watch监听，数据量太大的话会卡顿
扩展性
react
1 类式写法api少，更容易结合ts
2 可以通过高阶组件来扩展
vue
1 声明式写法，结合ts比较复杂
2 需要通过mixin方式来扩展

vue-router提供了导航钩子:全局前置导航钩子 beforeEach和全局后置导航钩子 afterEach
导航钩子3个参数(to,from,next):

到达这个组件时：

离开这个组件时：beforeRouteLeave:(to,from,next)=》{}
确认离开next();取消离开next(false)；

beforeEnter:(to,from,next)=》{}，用法与全局守卫一致。只是，将其写进其中一个路由对象中，只在这个路由下起作用。

方法一：
子组件绑定一个事件，通过 this.$emit() 来触发
在子组件中绑定一个事件，并给这个事件定义一个函数

在父组件中定义并绑定 handleChange 事件

方法二：
通过 callback 函数
先在父组件中定义一个callback函数，并把 callback 函数传过去

在子组件中接收，并执行 callback 函数

方法三：
通过 $parent /$children 或 $refs 访问组件实例
这两种都是直接得到组件实例，使用后可以直接调用组件的方法或访问数据。
这种方式的组件通信不能跨级

方法四：
$attrs和$listeners

vue面试题

Model 层: 对应数据层的域模型，它主要做域模型的同步 。在层间关系⾥，它主要⽤于抽象出 ViewModel 中视图的 Model。

View 层: 作为视图模板存在 ，在 MVVM ⾥，整个 View 是⼀个动态模板。 除了定义结构、布局外，它展示的是 ViewModel 层的数据和状态 。View 层不负责处理状态，View 层做的是 数据绑定的声明、 指令的声明、 事件绑定的声 明。

ViewModel 层: 把 View 需要的层数据暴露，并对 View 层的 数据绑定声明、 指令声明、 事件绑定声明 负责，也就是处 理 View 层的具体业务逻辑。 ViewModel 底层会做好绑定属性的监听。当 ViewModel 中数据变化，View 层会得到更新；⽽当 View 中声明了数据的双向绑定（通常是表单元素），框架也会监听 View 层（表单）值的变化。⼀旦值变 化，View 层绑定的 ViewModel 中的数据也会得到⾃动更新。

优点:

Model变化和修改，⼀个ViewModel可以绑定不同的"View"上，当View变化的时候Model不可以不变，当Model变化 的时候View也可以不变。你可以把⼀些视图逻辑放在⼀个ViewModel⾥⾯，让很多view重⽤这段视图逻辑

缺点:

Vue 实例有⼀个完整的⽣命周期，也就是从开始创建、初始化数据、编译模版、挂载Dom -》 渲染、更新 -》 渲染、卸载 等⼀系列过程

官⽅实例的异步请求是在mounted⽣命周期中调⽤的，⽽实际上也可以在created⽣命周期中调⽤。

***隐藏网址***

computed用于计算属性，只有它依赖的值改变才会触发，且这个值有缓存

watch用于监听一个属性的变化，属性变化就会触发

computed:

⼩结:

简单版：利⽤ Object.defineProperty 劫持对象的访问器,在属性值发⽣变化时我们可以获取变化,然后根据变化进⾏后续响应,在 vue3.0中通过Proxy代理对象进⾏类似的操作。

补充
vue的双向绑定是通过数据劫持和发布者-订阅者模式实现的，数据劫持又是通过
Object.defineProperty()实现的

Proxy的优势如下:
Proxy可以直接监听对象⽽⾮属性
Proxy可以直接监听数组的变化
Proxy有多达13种拦截⽅法,不限于apply、ownKeys、deleteProperty、has等等是 Object.defineProperty 不具备的
Proxy返回的是⼀个新对象,我们可以只操作新的对象达到⽬的,⽽
Object.defineProperty 只能遍历对象属性直接修 改Proxy作为新标准将受到浏览器⼚商重点持续的性能优化，也就是传说中的新标准的性能红利

Object.defineProperty的优势如下: 兼容性好,⽀持IE9

v-if 用于条件渲染
v-show 用于条件渲染，两者的区别请参考下一个问题
v-for 用于列表渲染
v-on 监听事件
v-bind 动态绑定
v-html 渲染html元素
v-model 数据双向绑定

v-if 是惰性的，只有条件为真时才会切换，为假时什么也不做。确保切换过程中的事件监听器和子组件适当的被销毁和重建，适用于运行条件很少改变的场景。v-show 不管条件是否为真，总是会被渲染，适用于频繁切换的场景

v-for优先级高于v-if，放于同级可能会重复渲染两次v-if，建议把v-for放于v-if所在的外层元素

原理:eventloop事件循环
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

key 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。不指定key时，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试
就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

1.beforeCreate
初始化界面前
2.created
初始化界面后，拿到data，props，methods、computed和watch
3.beforeMount
渲染dom前
4.mounted
渲染dom后，拿到$el
5.beforeUpdate
更新前
6.updated
更新后，拿到更新后的dom
7.beforeDestroy
卸载组件前
8.destroyed
卸载组件后
9.activated
被 keep-alive 缓存的组件激活时调用
10.deactivated
被 keep-alive 缓存的组件停用时调用

虚拟dom是对真实dom的一种映射，新旧Vnode比较同层级的节点，然后根据两者的差异只更新有差异的部分，生成新的视图，而不是对树进行逐层搜素遍历，因此时间复杂度是O(n)。虚拟dom可以减少页面的回流和重绘，提升性能

使用angular、react和vue如何实现相同的面试题组件

eact 和angular，vue 这三个框架最近都比较火，下面这篇文章主要给大家介绍了关于利用angular、react和vue实现相同的面试题组件的相关资料，文中通过示例代码介绍的非常详细，需要的朋友可以参考下。
前言
本文主要给大家介绍的是关于angular、react和vue实现相同的面试题组件的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。
面试题要求如下所示
1、angular：
《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》Document《/title》
《script src="angular-1.4.6.js"》《/script》
《style》
.del{
text-decoration: line-through;
color: red;
}
.in1{
margin-left: 40px;
}
《/style》
《/head》
《body ng-app="app" ng-controller="my-ctrl"》
《input type="text" ng-model="val"》
《button ng-click="add()"》添加《/button》
《ul》
《li ng-repeat="(key,item) in items" ng-show="flag||!items》《input type="checkbox" ng-click="labe()" ng-model="lab"》{{item.text}}《input type="button" value="删除" ng-click="delate()" class="in1"》《/li》
《/ul》
《button type="button" ng-click="showall()"》已完成开关显示《/button》
《button type="button" ng-click="delateall()"》清除已完成《/button》
《/body》
《script type="text/javascript"》
var myapp = angular.module("app",);
myapp.controller("my-ctrl",function($scope){
$scope.items = ;
$scope.flag = 1;
$scope.add=function(){
$scope.items.unshift({text:$scope.val,labs:0});
}
$scope.delate=function(){
$scope.items.splice(this.$index,1);
}
$scope.labe=function(){
$scope.items.labs=this.lab;
}
$scope.showall=function(){
if($scope.flag == 0){
$scope.flag = 1;
}
else{
$scope.flag = 0;
}
}
//倒序删除数组元素
//这里必须使用倒叙删除数组因为angular数据双向绑定，正序的话会导致数据随时更新影响for循环
$scope.delateall=function(){
for(var i=$scope.items.length-1;i》=0;i--){
if($scope.items.labs==true){
$scope.items.splice(i,1);
}
}
}
//delateall除了这种方式书写还有另外一种正序删除的方式
//$scope.delateall=function(){
//$scope.delall=;
//for(var i=0;i《$scope.items.length;i++){
//if($scope.items.labs == true){
//console.log(i);
//$scope.delall.push(i);
//}
//}
//console.dir($scope.delall);
//for(var j=0;j《$scope.delall.length;j++){
//if(j==0){
//$scope.items.splice($scope.delall,1);
//}
//else{
//$scope.items.splice(($scope.delall-j),1);
//}
//}
//console.dir($scope.items);
//}
})
《/script》
《/html》2、react:
import React, { Component } from ’react’;
import ’./App.css’;
class App extends Component {
constructor(){
super();
this.state={
alll:,
values:’’,
flag:true
}
}
add(e){
let arr1 = this.state.alll;
arr1.push({msg:this.state.values,check1:false});
this.setState({
alll:arr1
})
console.log(this.state.alll);
}
change(e){
this.setState({
values:e.nativeEvent.target.value
})
}
delate(e){
let index1 = e.target.parentNode.id;
let arr1 = ;
for(var i =0;i《this.state.alll.length;i++){
arr1.push(JSON.parse(JSON.stringify(this.state.alll)));
}
arr1.splice(index1,1);
console.log(arr1);
this.setState(
{alll: arr1},
() =》{
alert(1);
console.log(this.state.alll)
}
)
}
checktoggle(e){
let index1 = e.target.parentNode.id;
let arr1 = this.state.alll;
arr1.check1;
this.setState({
alll:arr1
})
console.log(this.state.alll);
}
hideandshow(e){
this.setState({
flag : !this.state.flag
})
}
removeAll(){
let arr1 = ;
for(var i =0;i《this.state.alll.length;i++){
arr1.push(JSON.parse(JSON.stringify(this.state.alll)));
}
for(let i = arr1.length-1;i》-1;i--){
console.log(i);
if(arr1.check1 === true){
arr1.splice(i,1);
}
}
this.setState({
alll:arr1
})
console.log(this.state.alll);
}
render() {
var result = ;
for(let i = 0;i《this.state.alll.length;i++){
result.push(《p key={i} id={i} className={this.state.flag||!this.state.alll.msg}《/span》《input type="button" value="删除" onClick={this.delate.bind(this)} className="in" /》《/p》)
}
return (
《p className="App"》
{this.state.values}
《input type="text" placeholder="请添加事件" className="in" onChange={this.change.bind(this)} /》
《input type="button" value="添加" onClick={this.add.bind(this)}/》
《ul ref="ul1"》
{result}
《/ul》
《input type="button" value="已完成显示开关" className="in" onClick={this.hideandshow.bind(this)}/》
《input type="button" value="清除已完成" className="in" onClick={this.removeAll.bind(this)}/》
《/p》
);
}
}
export default App;
//使用react写时，数组的复制有使用的不标准，正确的深度复制应该转化为字符串以后再复制，类似于代码中removeAll复制的方式。但是在当前实例中浅复制也可以完成功能。3、vue2.0：
《!DOCTYPE html》
《html lang="en"》
《head》
《meta charset="UTF-8"》
《title》Document《/title》
《script src="vue2.0.js"》《/script》
《style》
.in{
margin:20px;
}
.cl1{
text-decoration: line-through;
color: red;
}
.cl2{
}
《/style》
《/head》
《body》
《p id="app"》
《input type="text" placeholder="请添加事件" class="in" v-model="msg"/》
《input type="button" value="添加" @click="add()"/》
《p v-for="(item,index) in alll" :key="index" :id="index" v-if="flag1||!item.check1"》
《input type="checkbox" class="in" @click="clickChecked" :checked="item.check1"/》
《span》{{item.msg1}}《/span》
《input type="button" value="删除" class="in" @click="delate"/》
《/p》
《p》
《input type="button" value="已完成显示开关" class="in" @click="showAll"/》
《input type="button" value="清除已完成" class="in" @click="removeAll($event)"/》
《/p》
《/p》
《script》
new Vue({
el:’#app’,
data:{
msg:’’,
alll:,
flag1:true,
},
methods:{
add(){
this.alll.unshift({msg1:this.msg,check1:false});
console.log(this.alll)
},
delate(e){
let index1 = e.target.parentNode.id;
this.alll.splice(index1,1);
console.log(this.alll);
},
clickChecked(e){
let index1 = e.target.parentNode.id;
this.alll.check1;
},
showAll(){
this.flag1 = !this.flag1;
},
removeAll(){
console.log(this.alll);
for(var i =this.alll.length-1;i》-1;i--){
if(this.alll.check1==true){
this.alll.splice(i,1);
}
}
// for(let i = 0;i《this.alll.length;i++){
// if(this.alll.check1==true){
// this.alll.splice(i,1);
// }
// }//由于vue的数据双向绑定，从前到后遍历删除存在错误。
}
}
})
《/script》
《/body》
《/html》
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
vue2.0 computed 计算list循环后累加值的实例
Vue中v-for的数据分组实例
使用vue中的v-for遍历二维数组的方法

史上最全前端vue面试题！推荐收藏

1.为什么会形成跨域？

不是一个源的文件操作另一个源的文件就会形成跨域。当请求端的协议、域名、端口号和服务器的协议、域名、端口号有一个不一致就会发生跨域。

解决方法：安装插件

Pip install django-cors-headers

2.vuex的工作流程？

① 在vue组件里面，通过dispatch来出发actions提交修改数据的操作。

② 然后再通过actions的commit来出发mutations来修改数据。

③ mutations接收到commit的请求，就会自动通过Mutate来修改state（数据中心里面的数据状态）里面的数据。

④ 最后由store触发每一个调用它的组件更新。

3.vuex是什么？怎么使用？

***隐藏网址***

4.vuex中的数据在页面刷新后数据消失怎么解决？

使用sessionStorage或localStorage存储数据;也可以引入vuex-persist插件

5.在vue中，如何阻止事件冒泡和默认行为？

在绑定事件时，在指令后边加上修饰符.stop来阻止冒泡，.prevent来阻止默认行为
6.深拷贝与浅拷贝？

假设B复制A，修改A的时候，看B是否变化：B变了是浅拷贝（修改堆内存中的同一个值），没变是深拷贝（修改堆内存中不同的值）。浅拷贝只是增加了一个指针指向已存在的内存地址，深拷贝是增加了一个指针并申请了一个新的内存，使这个增加的指针指向这个新的内存。深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。
7.vue的生命周期？

beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyedactived deactived （keep-alive）组件是否激活调用

8. keep-alive: 组件缓存
***隐藏网址***

router.js中:
meta: {keepAlive:true} // 需要被缓存
钩子执行顺序：created -》 mounted -》 actived
include表示需要缓存的页面；exclude表示不需要缓存的页面。如果两个同时设置，exclude优先级更 改，则组件不会被缓存。
应用场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列表页面进入数据详情页面，再返回 该列表页，我们希望列表页可以保留用户的筛选状态。

9.vue传值方式？
props $emit() $on() $parent $children $listener $attr

10. $on 兄弟组件传值

$emit 分发
$on 监听
$off 取消监听
$once 一次性监听一个事件
在js文件中定义一个中央事件总线Bus，并暴露出来
具体的实现方式：

使用Bus的时候在接收Bus的组件的beforeDestroy函数中销毁Bus，否则会一直叠加调用这个方法。
应用场景：“退出登录” -》 ①点击退出登录；②修改密码后自动退出登录

11.组件跨级传值
$attrs a-》b-》c
$listeners 监听

12.vue事件修饰符有哪些？
.stop .prevent .self .once .passive .sync

13.箭头函数中的this？
不具有this绑定，但函数体可以使用this，这个this指向的是箭头函数当前所处的词法环境中的this对象。

15.为什么vue组件中data必须是一个函数？
如果不是函数的话，每个组件的data都是内存的同一个地址，一个数据改变了其他也改变了，当他是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，就不会互相影响。

16.v-if 和 v-show区别？
v-if 是对标签的创建与销毁， v-show 则仅在初始化时加载一次，v-if 开销相对来说比v-show 大；
v-if 是惰性的；v-show 做的仅是简单的css切换。

17.v-text 与 v-html区别？
v-text 用于普通文本，不能解析html；
v-html 反之。

18.v-for key的作用？
使用v-for更新渲染过的数据，它默认用“就地复用”策略。如果数据项的顺序改变，vue将不是移动DOM元素来匹配数据项的改变，而是简单地复用此处每个元素，并确保在特定索引下显示已被渲染过的每个元素。key属性类型只能是string或number。
key的特殊属性主要用在虚拟DOM算法，在新旧node对比时辨识VNods。如不使用key，vue会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法，它会基于key的变化重新排列元素顺序。

19.Scss是什么？在vue-cli中安装步骤？有哪几大特性？
npm 下载loader （sass-loader,css-loader,node-sass）,在webpack中配置extends属性（加.scss拓展） Vscode中可在扩展中下载;
特性：可以用变量，可以用混合器，可以嵌套等。

20.vue获取dom？
ref

21.vue初始化页面闪动问题？
webpack、vue-router
v-cloak css::display:none

22.什么是vue-router？
vue router 是官方路由管理器。
主要功能：路由嵌套，模块化 基于组件路由配置，路由参数、查询、通配符，细粒度导航控制，自定义的滚动条行为等。

23.vue路由传参，接收？
传： this.$router.push({path:’’, query(params):{}})
接：this.$router.query.xxx

24.防抖和节流？
节流是一定时间内执行一次函数，多用在scroll事件上；
防抖是在一定时间内执行最后一次的函数，多用在input输入操作，表单提交等。

25.如何让scss只在当前组件中起作用？

面试题：vue组件之间有哪些通信方式

父子组件通信

绝大部分vue本身提供的通信方式，都是父子组件通信

prop

最常见的组件通信方式之一，由父组件传递到子组件

event

最常见的组件通信方式之一，当子组件发生了某些事，可以通过event通知父组件

style和class

父组件可以向子组件传递style和class，它们会合并到子组件的根元素中

示例

父组件

        importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{    HelloWorld,  },};

子组件

     
渲染结果：

attribute

如果父组件传递了一些属性到子组件，但子组件并没有声明这些属性，则它们称之为attribute，这些属性会直接附着在子组件的根元素上

不包括style和class，它们会被特殊处理

示例

父组件

  《!--除 msg 外，其他均为 attribute--》  importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{    HelloWorld,  },};

子组件

 
渲染结果：
子组件可以通过inheritAttrs: false配置，禁止将attribute附着在子组件的根元素上，但不影响通过$attrs获取

natvie修饰符

在注册事件时，父组件可以使用native修饰符，将事件注册到子组件的根元素上

示例

父组件

        importHelloWorldfrom"./components/HelloWorld.vue";exportdefault{components:{    HelloWorld,  },methods:{handleClick() {console.log(1);    },  },};

子组件

 
渲染结果

$listeners

子组件可以通过$listeners获取父组件传递过来的所有事件处理函数

v-model

后续章节讲解

sync修饰符

和v-model的作用类似，用于双向绑定，不同点在于v-model只能针对一个数据进行双向绑定，而sync修饰符没有限制

示例

子组件

 
父组件

      《!--等同于--》  importNumbersfrom"./components/Numbers.vue";exportdefault{components:{    Numbers,  },data() {return{n1:0,n2:0,    };  },};

$parent和$children

在组件内部，可以通过$parent和$children属性，分别得到当前组件的父组件和子组件实例

$slots和$scopedSlots

后续章节讲解

ref

父组件可以通过ref获取到子组件的实例

跨组件通信

Provide和Inject

示例

***隐藏网址***

router

如果一个组件改变了地址栏，所有监听地址栏的组件都会做出相应反应

最常见的场景就是通过点击router-link组件改变了地址，router-view组件就渲染其他内容

vuex

适用于大型项目的数据仓库

store模式

适用于中小型项目的数据仓库

eventbus

组件通知事件总线发生了某件事，事件总线通知其他监听该事件的所有组件运行某个函数

Web 前端面试

博客园整理了一下，有好的面试题欢迎大家发在评论区哟
1. 闭包
2. 数组去重
3. 原型和原型链
4. call,apply,bind三者的区别？
5. 请介绍常见的 HTTP 状态码(至少五个)
6. 深浅拷贝
7. 实现(5).add(3).minus(2)输出6
8. null和undefined区别
9. MVC和MVVC?
10. Vue生命周期
11. Vue数据双向绑定原理
12. Vue组件传参
13. 说说各浏览器存在的兼容问题
14. router和route
15. active-class属于Vue哪一个modules,有什么作用
16. v-if和v-show
17. computed和watch有什么区别
18.Vue 组件中 data 为什么必须是函数
19. vue中子组件调用父组件的方法
20. vue中 keep-alive 组件的作用
21. vue中如何编写可复用的组件？
22. Vue 如何去除url中的 #
23. Vue 中 key 的作用
24. Vue 中怎么自定义指令
25. Vue 中怎么自定义过滤器
26. NextTick 是做什么的
27. Vue 组件 data 为什么必须是函数
28. 计算属性computed 和事件 methods 有什么区别
29. scoped（死够扑的）
30. vue如何获取dom?
31. promise
32. vue常用指令有哪些
33.vue-loader是什么?使用和用途？
34.css样式局部化，如何让css只在当前组件起作用?scss和stytus样式穿透

闭包指有权访问另一个函数中变量的函数，
***隐藏网址***
***隐藏网址***

***隐藏网址***

***隐藏网址***

都是用来改变this指向的

call和apply都是function原型上的方法，每一个函数作为function的实例都可以调用这两个方法，而这两个方法都是用来改变this指向的

一般情况下this指向其调用者（）

fun.call(thisArg,arg1,ary2,...)
主要作用可以实现继承
调用函数，改变this指向

继承

fun.apply(thisArg,)

作用：调用函数，改变函数内部this指向
参数必须是数组
apply主要应用于借助数学对象等

bind()方法不会调用函数，但可以改变函数内部this指向
fun.bind(thisArg,arg1,arg2,...)
thisArg:在fun函数运行时指定的this值
arg1，arg2:传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝

call的性能要比apply好一些，尤其当传递参数超过3个，后期开发可多用call

时间测试

状态码是由 3 位数组成，第一个数字定义了响应的类别，且有五种可能取值:

1xx：指示信息–表示请求已接收，继续处理。

2xx：成功–表示请求已被成功接收、理解、接受。

3xx：重定向–要完成请求必须进行更进一步的操作。

4xx：客户端错误–请求有语法错误或请求无法实现。

5xx：服务器端错误–服务器未能实现合法的请求。

***隐藏网址***

MVC 是后端中的概念

MVVC中 是前端概念

最终实现V和M数据的同步，因此开发者只需关注业务逻辑，不需要手动操作Dom，mvvm是vue的核心

这两个不同的结构可以看出两者的区别，他们的一些属性是不同的。

active-class 属于vue-router的样式方法
当routerlink标签被点击时将会应用这个样式

使用有两种方法
routerLink标签内使用

在使用时会有一个Bug
首页的active会一直被应用
解决办法
为了解决上面的问题，还需加入一个属性exact,类似也有两种方式：
在router-link中写入exact

在路由js文件,配置active-class

还可以不用exact这种方法去解决，例如

首页
路由中加入重定向

computed

computed是计算属性，也就是计算值，它更多用于计算值的场景
computed具有缓存性，computed的值在getter执行后是会缓存的，只有在它依赖的属性值改变之后，下一次获取computed的值时重新调用对应的getter来计算
computed适用于计算比较消耗性能的计算场景
watch

watch更多的是的作用，类似于某些数据的监听回调，用于观察props $emit或者本组件的值，当数据变化时来执行回调进行后续操作
无缓存性，页面重新渲染时值不变化也会执行
小结

当我们要进行数值计算，而且依赖于其他数据，那么把这个数据设计为computed
如果你需要在某个数据变化时做一些事情，使用watch来观察这个数据变化。

去这里看一下​blog.csdn.net

vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带 #。如果不想使用 #， 可以使用 vue-router 的另一种模式 history

new Router({
mode: ’history’,
routes:
})

需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面

具体参考 官方API

参考 官方文档-自定义指令

过滤器也同样接受全局注册和局部注册

具体可参考官方文档 深入响应式原理

我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的

不同点：

让css只在当前组件中起作用