Vue常见面试题

1.聊聊你对vue的理解

vue是一个渐进式的JS框架。他易用，灵活，高效； 可以把一个页面分隔成多个组件；当其他页面有类似功能时，直接让封装的组件进行复用； 他是构建用户界面的声明式框架，只关心图层；不关心具体是如何实现的

2.Vue 的生命周期是什么？

3.Vue 的各个生命阶段是什么？

4.Vue 组件间的参数传递方式？

5.computed 和 watch 和methods的差异？

（4）methods在重新渲染的时候每次都会被重新的调用；

6.vue-router 中的导航钩子函数

7.$route 和 $router 的区别？

8.vue 常用的修饰符？

9.vue 中 key 值的作用？

10.谈谈你对 keep-alive 的了解？

12.说说你对 SPA 单页面的理解，它的优缺点分别是什么？

<div v-bind:class="{ active: isActive, 'text-danger': hasError }"></div>

data: {
  isActive: true,
  hasError: false
}

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<div v-bind:style="[styleColor, styleSize]"></div>

data: {
  styleColor: {
     color: 'red'
   },
  styleSize:{
     fontSize:'23px'
  }
}

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

// Vue.set
Vue.set(vm.items, indexOfItem, newValue)
// vm.$set，Vue.set的一个别名
vm.$set(vm.items, indexOfItem, newValue)
// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

// Array.prototype.splice
vm.items.splice(newLength)

20.v-model 的原理？

<input v-model='something'>
    
相当于

<input v-bind:value="something" v-on:input="something = $event.target.value">

父组件：
<ModelChild v-model="message"></ModelChild>

子组件：
<div>{{value}}</div>

props:{
    value: String
},
methods: {
  test1(){
     this.$emit('input', '小红')
  },
},

switch (mode) {
  case 'history':
	this.history = new HTML5History(this, options.base)
	break
  case 'hash':
	this.history = new HashHistory(this, options.base, this.fallback)
	break
  case 'abstract':
	this.history = new AbstractHistory(this, options.base)
	break
  default:
	if (process.env.NODE_ENV !== 'production') {
	  assert(false, `invalid mode: ${mode}`)
	}
}

https://www.word.com#search

window.history.pushState(null, null, path);
window.history.replaceState(null, null, path);

this.$router.push({
    path:`/home/${id}`,
})

路由配置
{
    path:"/home/:id",
    name:"Home",
    component:Home
}
在Home组件中获取参数值
this.$route.params.id
复制代码

通过name来匹配路由，通过param来传递参数
this.$router.push({
    name:'Home',
    params:{
        id:id
    }
})
用params传递参数，不使用：/id
{
    path:'/home',
    name:Home,
    component:Home
}
Home组件中获取参数
this.$route.params.id
复制代码

this.$router.push({
    path:'/home',
    query:{
        id:id
    }
})
路由配置
{
    path:'/home',
    name:Home,
    component:Home
}
获取参数的方法
this.$route.query.id

v-text

• 解释：更新元素的 textContent

<h1 v-text="msg"></h1>

v-html

• 解释：更新元素的 innerHTML

<h1 v-html="msg"></h1>

v-bind

• 作用：当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM
• 语法：v-bind:title="msg"
• 简写：:title="msg"

v-on

• 作用：绑定事件
• 语法：v-on:click="say" or v-on:click="say('参数', $event)"
• 简写：@click="say"
• 说明：绑定的事件从methods中获取

v-model

• 作用：在表单元素上创建双向数据绑定
• 说明：监听用户的输入事件以更新数据

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

v-if 和 v-show

• 条件渲染
• v-if：根据表达式的值的真假条件，销毁或重建元素
• v-show：根据表达式之真假值，切换元素的 display CSS 属性

提升用户体验：v-cloak

• 这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
• 防止刷新页面，网速慢的情况下出现{{ message }}等数据格式

<div v-cloak>
  {{ message }}
</div>

31.什么是RESTful API，然后怎么使用？、

RESTful是一个api的标准，无状态请求。请求的路由地址是固定的。 restful：给用户一个url，根据method不同在后端做不同处理：比如post 创建数据，get 获取数据，put和patch修改数据，delete删除数据

32.vue响应式数据原理

33.vue中是如何实现检测数组的变化

因为如果不采用异步更新，那么每次更新数据都会对当前组件进行重新渲染，所以为了性能考虑，Vue会在本轮数据更新后，再去异步更新数据

35.Vue优点

36.Proxy与Object.defineProperty()的对比

37.React和Vue的区别

 · 模板 vs jsx 
   Vue鼓励你去写近似常规HTML的模板，写起来很接近标准HTML元素，只是多了一些属性。
   Vue鼓励你去使用HTML模板进行渲染。 React推荐你所有的模板通用JavaScript的语法扩展---JSX来书写 
 · 状态管理 VS 对象属性 
   1、如果熟悉React就会知道应用中的状态是关键的概念，有一些配套框架被设计为
    管理一个大的state对象，state对象在React应用中是不可变的，它意味着不能被直接改变，
    需要使用setState( )方法去更新状态 
   2、在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理。
    data参数就是应用中数据的保存者 

 ·数据流不同 
  1、Vue可以实现双向数据绑定（父子组件之间props可以双向绑定，组件与DOM之间可以通过v-model实现双向绑定）
  2、React一直不支持双向绑定，提倡的是单向数据流

 · 框架本质不同
  1、Vue本质是MVVM框架，由MVC发展而来 
  2、React是前端组件化框架，由后端组件化发展而来

Vue.mixin用法给组件每个生命周期，函数等都混入一些公共逻辑

39.SPA首屏加载慢如何解决

• 使用路由懒加载
• 使用SSR渲染
• 优化webpack打包体积
• 图片使用CDN加速

40.什么是虚拟DOM

Virtual dom, 即虚拟DOM节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点。虚拟DOM就是一个普通的JavaScript对象，包含了tag、props、children三个属性。

41.简述Vue中diff算法原理

• 先同级比较，在比较子节点
• 先判断一方有儿子一方没儿子的情况
• 比较都有儿子的情况
• 递归比较子节点

(大家要是不懂也可以看下这篇文章)对Dom-Diff的理解

42.第一次页面加载会触发哪几个钩子

beforeCreate， created， beforeMount， mounted

43.为什么v-for和v-if不能连用

• 可能在当前页面中使用了$on方法，那需要在组件销毁前解绑
• 清除自己定义的定时器
• 解绑事件的绑定srcoll mousemove....

45.谈谈你对作用域插槽的理解

47.Vue的渲染过程

• router-link标签会渲染为a标签，咋填template中的跳转都是这种；
• 另一种是编程式导航 也就是通过js跳转 比如 router.push('/home')。

49.Watch中的deep:true是如何实现的

当用户指定了watch中的deep属性为true时，如果当前监控的值是数组类型，会对对象中的每一项进行求值，此时会将当前watcher存入到对应属性的依赖中，这样数组中的对象发生变化时也会通知数据更新

50.action和mutation区别

1. mutation是同步更新数据(内部会进行是否为异步方式更新数据的检测)
2. action异步操作,可以获取数据后调用mutation提交最终数据

51.Vue3.0你知道有哪些改进

1. Vue3采用了TS来编写
2. 支持Composition API
3. Vue3 中响应式数据原理改成proxy
4. vdom的对比算法更新,只更新vdom的绑定了动态数据的部分

52.为什么使用异步组件

在大型应用中，功能不停地累加后，核心页面已经不堪重负，访问速度愈来愈慢。为了解决这个问题我们需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块，从而提高页面加载速度

53.vue实现路由懒加载的方式

{
  path: '/Demo',
  name: 'Demo',
  //打包后，每个组件单独生成一个chunk文件
  component: reslove => require(['../views/Demo'], resolve)
}

//指定了相同的webpackChunkName,会合并打包成一个文件。
const Demo = () => import(/*webpackChunkName:'Home'*/ '../views/Demo')
const Demo1 = () => import(/*webpackChunkName:'Home'*/ '../views/Demo1')

//这种情况下，多个路由指定相同的chunkName，会打包成一个文件
const Demo = r => require.ensure([], () => r(require('../views/Demo')), 'Demo')
const Demo1 = r => require.ensure([], () => r(require('../views/Demo1')), 'Demo')

54.vue封装组件的思路

vue实现响应式并不是数据发生变化后dom立即变化，而是按照一定的策略来进行dom更新。 $nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

56.vue.js的两个核心是什么？

数据驱动、组件系统

57.axios的特点有哪些？

1、axios是一个基于promise的HTTP库，支持promise的所有API；
2、它可以拦截请求和响应；
3、它可以转换请求数据和响应数据，并对响应回来的内容自动转换为json类型的数据；
4、它安全性更高，客户端支持防御XSRF；

58.vue 的双向绑定的原理是什么

vue.js 是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

　具体步骤：

　　第一步：需要 observe 的数据对象v进行递归遍历，包括子属性对象的属性，都加上 setter 和 getter

　　第二步：compile解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，更新视图

　　第三步：Watcher订阅者是Observer和Compile之间通信的桥梁，

　　第四步：MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果。

59.如果要在组件内部中进行强制刷新

调用this.$forceUpdate()强制重新渲染组件

60.说说vue-router完整的导航解析流程是什么？

1.导航被触发
2.在即将离开的组件里调用beforeRouteLeave守卫
3.调用全局前置守卫beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate守卫 / 调用路由配置的beforeEnter守卫
5.解析异步路由组件
6.在被激活的组件里调用beforeRouteEnter
7.调用全局的beforeResolve守卫
8.导航被确认
9.调用全局的 afterEach 钩子
10.触发DOM更新
11.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

61.vue中深度监听对象的几种方式

1.直接监听对象

watch:{
  obj:{ //监听的对象
    deep:true, //深度监听设置为 true
    handler:function(newV,oldV){
      console.log('watch中：',newV)
    }
  }
}

2.监听对象下的其中一个属性

data () {
      return {
        obj:{
          name:'老蒋坏得很',
          age:18
        }
      }
    },
    watch:{
      'obj.name':{
        deep:true,
        handler:function(newV,oldV){
          console.log('watch中：',newV)
        }
      }
    }

3.computed配合watch实现单个属性的深度监听

data () {
      return {
        obj:{
          name:'老蒋坏得很',
          age:18
        }
      }
    },
    computed:{
      name(){
        return this.obj.name;
      }
    },
    watch:{
      name(newval，oldval){
        console.log('新：',newval);
        console.log('旧：',oldval)
      }
    

62.$nextTick有什么作用？

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM

new Vue({
  methods: {
    example: function () {
      modify data this.message = 'changed' 
      // DOM is not updated yet 
      his.$nextTick(function () {
      // DOM is now updated
      // `this` is bound to the current instance
         this.doSomethingElse() 
      })
    } 
  }
})

 参考：www.jianshu.com/p/a7550c0e1…

63.微任务与宏任务

浏览器中的事件循环 eventLoop，分为同步执行栈和异步队列，首先会执行同步的任务，当同步任务执行完之后会从异步队列中取异步任务拿到同步执行栈中进行执行。

在取异步队列时，还会有一个区分，就是区分微任务和宏任务。

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  reslove();
}).then(function(data) {
  console.log(3);
});
console.log(2);

 我们这次来看一下上面的题，promise 中是同步任务，promise 的 .then 中是异步任务，并且是微任务。使用 setTimeout 是宏任务，即使是延时为 0，也是宏任务。

setTimeout(function() {
  console.log(4);
}, 0);

new Promise(function(reslove) {
  console.log(1);
  setTimeout(function() {
    reslove('done');
  }, 0);
  reslove('first');
}).then(function(data) {
  console.log(data);
});

console.log(2);

64.vue中是否可以监控到数组下标的变化

Object.defineProperty 有一个缺陷是无法监听数组

无法监控到数组下标的变化，导致直接通过数组的下标给数组设置值，不能实时响应。所以vue才设置了7个变异数组（push、pop、shift、unshift、splice、sort、reverse）的 hack 方法来解决问题。

65.Vue项目中实现用户登录及token验证

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

一、调登录接口成功，在回调函数中将token存储到localStorage和vuex中

<template>
  <div>
    <input type="text" v-model="loginForm.username" placeholder="用户名"/>
    <input type="text" v-model="loginForm.password" placeholder="密码"/>
    <button @click="login">登录</button>
  </div>
</template>
 
<script>
import { mapMutations } from 'vuex';
export default {
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      }
    };
  },
 
  methods: {
    ...mapMutations(['changeLogin']),
    login () {
      let _this = this;
      if (this.loginForm.username === '' || this.loginForm.password === '') {
        alert('账号或密码不能为空');
      } else {
        this.axios({
          method: 'post',
          url: '/user/login',
          data: _this.loginForm
        }).then(res => {
          console.log(res.data);
          _this.userToken = 'Bearer ' + res.data.data.body.token;
          // 将用户token保存到vuex中
          _this.changeLogin({ Authorization: _this.userToken });
          _this.$router.push('/home');
          alert('登陆成功');
        }).catch(error => {
          alert('账号或密码错误');
          console.log(error);
        });
      }
    }
  }
};
</script>

store文件夹下的index.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
 
const store = new Vuex.Store({
 
  state: {
    // 存储token
    Authorization: localStorage.getItem('Authorization') ? localStorage.getItem('Authorization') : ''
  },
 
  mutations: {
    // 修改token，并将token存入localStorage
    changeLogin (state, user) {
      state.Authorization = user.Authorization;
      localStorage.setItem('Authorization', user.Authorization);
    }
  }
});
 
export default store;

二、路由导航守卫

router文件夹下的index.js

import Vue from 'vue';
import Router from 'vue-router';
import login from '@/components/login';
import home from '@/components/home';
 
Vue.use(Router);
 
const router = new Router({
  routes: [
    {
      path: '/',
      redirect: '/login'
    },
    {
      path: '/login',
      name: 'login',
      component: login
    },
    {
      path: '/home',
      name: 'home',
      component: home
    }
  ]
});
 
// 导航守卫
// 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
router.beforeEach((to, from, next) => {
  if (to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('Authorization');
 
    if (token === 'null' || token === '') {
      next('/login');
    } else {
      next();
    }
  }
});
 
export default router;

三、请求头加token

// 添加请求拦截器，在请求头中加token
axios.interceptors.request.use(
  config => {
    if (localStorage.getItem('Authorization')) {
      config.headers.Authorization = localStorage.getItem('Authorization');
    }
 
    return config;
  },
  error => {
    return Promise.reject(error);
  });

四、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

      localStorage.removeItem('Authorization');
      this.$router.push('/login');

66.setTimeout、Promise、Async/Await 的区别

setTimeout

console.log('script start')	//1. 打印 script start

setTimeout(function(){
    console.log('settimeout')	// 4. 打印 settimeout
})	// 2. 调用 setTimeout 函数，并定义其完成后执行的回调函数

console.log('script end')	//3. 打印 script start

// 输出顺序： script start -> script end -> settimeout

Promise

console.log('script start')  // 1111111
let promise1 = new Promise(function (resolve) {
    console.log('promise1')   // 222222
    resolve()
    console.log('promise1 end')  // 333333
}).then(function () {
    console.log('promise2')
})
setTimeout(function(){
    console.log('settimeout')
})
console.log('script end')
// 输出顺序: script start -> promise1 -> promise1 end -> script end-> promise2 -> settimeout

async/await

async function async1(){
   console.log('async1 start');
    await async2();
    console.log('async1 end')
}
async function async2(){
    console.log('async2')
}

console.log('script start');
async1();
console.log('script end')

// 输出顺序：script start -> async1 start -> async2 -> script end -> async1 end

67.请说出vue.cli项目中src目录每个文件夹和文件的用法

• assets文件夹是放静态资源；
• components是放组件；
• router是定义路由相关的配置;
• view视图；
• app.vue是一个应用主组件；
• main.js是入口文件

68.Vue怎么重置data

使用Object.assign()，vm.$data可以获取当前状态下的data，vm.$options.data可以获取到组件初始化状态下的data。

Object.assign(this.$data, this.$options.data())复制代码

69.组件中写name选项有什么作用

1. 项目使用keep-alive时，可搭配组件的name进行缓存过滤。
2. DOM做递归组件时需要调用自身name
3. vue-devtools调试工具里显示的组件名称是由vue中组件name决定的

70.axios的拦截

//响应拦截
axios.interceptors.response.use(function(response){
    //对响应数据做点什么
    return response.data
},function(error){
    //对错误响应做点什么
    return Promise.reject(error)
})

//请求拦截
axios.interceptors.request.use(function(config){
    //在发送请求之前做些什么
    return config
},function(error){
    //对请求错误做些什么
    return Promise.reject(error)
})

71.vue怎么兼容IE

使用babel-polyfill插件

72.route-link和a标签的区别

<router-link> 组件支持用户在具有路由功能的应用中 (点击) 导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 <a> 标签，可以通过配置 tag 属性生成别的标签.。 

通过router-link进行跳转不会跳转到新的页面，也不会重新渲染，它会选择路由所指的组件进行渲染，避免了重复渲染的“无用功”。 

总结：对比<a>，router-link组件避免了不必要的重渲染,它只更新变化的部分从而减少DOM性能消耗

73.vue3.0中compostionAPI更新了那些内容

1. reactive API
2. ref API
3. watch API变化
4. computed API变化
5. 生命周期钩子变化
6. TypeScript和JSX支持