vue前端面试题

模块

1. Vue核心特性

MVVM表示的是 Model-View-ViewModel
    Model：模型层，负责处理业务逻辑以及和服务器端进行交互
    View：视图层：负责将数据模型转化为UI展示出来，可以简单的理解为HTML页面
    ViewModel：视图模型层，用来连接Model和View，是Model和View之间的通信桥梁

2. 什么是ajax, 简述一下 ajax 请求数据的过程

AJAX即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax的使用 (1)创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新.

getData(url, fn) {
    // 实例化XMLHttpRequest对象
    var xhr = new XMLHttpRequest();
    // 监听状态
    xhr.onreadystatechange = () => {
    // 数据请求完毕             判断状态码
    if (xhr.readyState === 4&&xhr.status === 200) {
    // 将数据转化成json在、数组
     fn && fn(JSON.parse(xhr.responseText))
     }
    }
    // 打开数据请求   请求方式，路径，同步false 异步true(默认)
    xhr.open('get/post', "路径", "true/false");
    // 发送数据
    xhr.send(null)
}

3. 简述 this 的 四种指向 问题

this指向的形式4种 （1.如果是一般函数,this指向全局对象window; （2.在严格模式下"use strict",为undefined. （3.对象的方法里调用,this指向调用该方法的对象.

	 (call,apply,bind会改变this的指向)
     call(),  call(thisScope, arg1, arg2, arg3...)
     apply(), apply(thisScope, [arg1, arg2, arg3...]);两个参数
     Bind(this) 返回的是一个函数

（4.构造函数里的this,指向创建出来的实例.

3. 计算属性 computed 和 watch 的区别

 1、功能上：computed是计算属性，
 	 watch是监听一个值的变化，然后执行对应的回调。
 2、是否调用缓存：computed中的函数所依赖的属性没有发生变化，那么调用当前的函数的时候会从缓存中读取，
 	 watch在每次监听的值发生变化的时候都会执行回调。
 3、是否调用return：computed中的函数必须要用return返回，
 	watch中的函数不是必须要用return。
 4、computed默认第一次加载的时候就开始监听；
	 watch默认第一次加载不做监听，如果需要第一次加载做监听，添加immediate属性，设置为true（immediate:true）
 5、使用场景：computed----当一个属性受多个属性影响的时候，使用computed-----购物车商品结算。
	 watch–当一条数据影响多条数据的时候，使用watch-----搜索框.

4. v-for循环为什么需要给每一项绑定不同的Key

key的作用主要是为了高效的更新虚拟DOM,使用key来给每一个节点做一个唯一标识；diff算法可以正确的识别此节点,找到正确的位置对此节点进行操作

5. watch 如何实现深度监听

重点：handler方法，deep属性，immediate属性

watch: {
    obj : {
        handler:function() {   //特别注意，不能用箭头函数，箭头函数，this指向全局，处理函数
        },
        deep: true    //深度监听
    }
}

handler方法，之前我们写的 watch 方法其实默认写的就是这个handler,Vue.js会去处理这个逻辑，最终编译出来其实就是这个handler。
deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。

优化：直接监听到对象中的属性

watch: {
  'obj.a': {
    handler(newName, oldName) {
      console.log('obj.a changed');
    },
    immediate: true,
    // deep: true
  }
}

immediate:true代表如果在 wacth 里声明了需要做监听的数据之后，就会立即先去执行里面的handler方法，如果为 false就跟我们以前的效果一样，不会在绑定的时候就执行。

6. vue-router是什么？有哪些组件？

Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。
<router-link>和<router-view>和<keep-alive>

7. active-class 是哪个组件的属性？

active-class是router-link终端属性，用来做选中样式的切换，当router-link标签被点击时将会应用这个样式

8. 怎么定义vue-router的动态路由？怎么获取传过来的值？

动态路由的创建，主要是使用path属性过程中，使用动态路径参数，以冒号开头，如下：

{
  path: '/details/:id'
  name: 'Details'
  components: Details
}

当匹配到/details下的路由时，参数值会被设置到this.$route.params下，所以通过这个属性可以获取动态参数

console.log(this.$route.params.id)

9. $route和$router的区别是什么？

router为VueRouter的实例，是一个全局路由对象，包含了路由跳转的方法、钩子函数等。
route 是路由信息对象||跳转的路由对象，每一个路由都会有一个route对象，是一个局部对象，包含path,params,hash,query,fullPath,matched,name等路由信息参数。

10. vue-router响应路由参数的变化

• 用watch 检测

  // 监听当前路由发生变化的时候执行
  watch: {
    $route(to, from){
      console.log(to.path)
      // 对路由变化做出响应
    }
  }组件内导航钩子函数
  

  • 组件内导航钩子函数

   beforeRouteUpdate(to, from, next){
    // to do somethings
  

11. vue-router 传参

• Params
  • 只能使用name，不能使用path
  • 参数不会显示在路径上
  • 浏览器强制刷新参数会被清空，

	  // 传递参数
  	 this.$router.push({
    name: Home，
     params: {
    	number: 1 ,
    	code: '999'
   	}
   	})
   	// 接收参数
  	 const p = this.$route.params

• Query
  • 参数会显示在路径上，刷新不会被清空
  • name 可以使用path路径

	// 传递参数
	this.$router.push({
 	 name: Home，
 	 query: {
 	 number: 1 ,
  	code: '999'
	}
                  })
	// 接收参数
	const q = this.$route.query

12. vue-router实现路由懒加载（动态加载路由）

• 把不同路由对应的组件分割成不同的代码块，然后当路由被访问时才加载对应的组件即为路由的懒加载，可以加快项目的加载速度，提高效率

	const router = new VueRouter({
 	 routes: [
    {
      path: '/home',
      name: 'Home'，
      component:() = import('../views/home')
		}
  	 ]
	 })

13. 什么 vuex ,谈谈你对它的理解？

首先 vuex 的出现是为了解决 web 组件化开发的过程中，各组件之间传值的复杂和混乱的问题
将我们在多个组件中需要共享的数据放到 store 中，
要获取或格式化数据需要使用 getters，
改变 store 中的数据，使用 mutation，但是只能包含同步的操作，在具体组件里面调用的方式 this.$store.commit('xxxx')
Action 也是改变 store 中的数据，不过是提交的 mutation，并且可以包含异步操作，
在组件中的调 用方式 this.$store.dispatch('xxx') ； 在 actions 里面使用的 commit('调用 mutation')

14. vue.mixin的使用场景和原理?

Vue的mixin的作用就是抽离公共的业务逻辑，原理类似对象的继承，当组件初始化的时候，会调用mergeOptions方法进行合并，采用策略模式针对不同的属性进行合并。
如果混入的数据和本身组件的数据有冲突，采用本身的数据为准。
缺点：命名冲突、数据来源不清晰

15. Vue的diff算法原理是什么？

Vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式+双指针方式比较
- 先比较两个节点是不是相同节点
- 相同节点比较属性，复用老节点
- 先比较儿子节点，考虑老节点和新节点儿子的情况
- 优化比较：头头、尾尾、头尾、尾头
- 比对查找，进行复用

16. 谈谈对组件的理解

- 组件化开发能大幅提高应用开发效率、测试性、复用性
- 常用的组件化技术：属性、自定义事件、插槽
- 降低更新范围，值重新渲染变化的组件
- 高内聚、低耦合、单向数据流

17. vue-router的两种模式的区别

vue-router中有三种模式，分别是hash、history、abstract
abstract在不支持浏览器的API换景使用
hash模式兼容性好，但是不美观，不利于SEO
history美观，historyAPI+popState，但是刷新会出现404

18. 谈谈Vue的性能优化有哪些？

数据层级不要过深，合理的设置响应式数据
使用数据时，缓存值的结果，不频繁取值
合理设置key
v-show(频繁切换性能高)和v-if的合理使用
控制组件的粒度 -> Vue采用组件级别更新
采用函数式组件 -> 函数式组价开销低
采用异步组件 -> 借助webpack的分包策略
使用keep-alive来缓存组件
虚拟滚动、时间分片等策略
打包优化

19. vue中使用了哪些设计模式？

单例模式：new多次，只有一个实例

• 工场模式：传入参数就可以创建实例（虚拟节点的创建）
• 发布订阅模式：eventBus
• 观察者模式：watch和dep
• 代理模式：_data属性、proxy、防抖、节流
• 中介者模式：vuex
• 策略模式
• 外观模式

20 . token 是什么？（加密）

1. token 也可以称做令牌，一般由 uid+time+sign(签名)+[固定参数] 组成

	uid: 用户唯一身份标识
	time: 当前时间的时间戳
	sign: 签名, 使用 hash/encrypt 压缩成定长的十六进制字符串，以防止第三方恶意拼接
	固定参数(可选): 将一些常用的固定参数加入到 token 中是为了避免重复查库

2. token 在客户端一般存放于 localStorage，cookie，或 sessionStorage 中。在服务器一般存于数据 库中
3.  token 的认证流程

	用户登录，成功后服务器返回Token给客户端。
	客户端收到数据后保存在客户端
	客户端再次访问服务器，将token放入headers中 或者每次的请求 参数中
	服务器端采用filter过滤器校验。校验成功则返回请求数据，校验失败则返回错误码

4.  token 可以抵抗 csrf，cookie+session 不行

21. v-on 可以绑定多个方法吗

	可以 
	如果绑定多个事件，可以用键值对的形式 事件类型：事件名 
	如果绑定是多个相同事件，直接用逗号分隔就行

22. vue 跨域的解决方式

	1.后台更改 header 
	2.使用 jq 提供 jsonp 
	3.用 http-proxy-middleware（配置代理服务器的中间件）

23. Vue 的生命周期请简述

vue 的生命周期就是 vue 实例创建到实例销毁的过程。期间会有 8 个钩 子函数的调用。 
	beforeCreate（创建实例） 
	created（创建完成）、 
	beforeMount（开始创建模板） 
	mounted（创建完成）、 
	beforeUpdate（开始更新） 
	updated（更新完成）、 
	beforeDestroy（开始销毁） 
	destroyed（销毁完成）

24. Vue 生命周期的作用

	给了用户在不同阶段添加自己的代码的机会

25. DOM 渲染在哪个生命周期阶段内完成

	DOM 渲染在 mounted 周期中就已经完成

26. Vue 的路由钩子函数/路由守卫有哪些

全局守卫：beforeEach（to，from，next）和 afterEach（to，from）
路由独享守卫：beforeEnter 组件内的守卫 ： 路由进入 /更新 /离开之前 beforeRouterEnter/update/leave

27. Vue 中指令有哪些

	v-for：循环数组，对象，字符串，数字 v-on：绑定事件监听
	v-bind：动态绑定一个或者多个属性 
	v-model：表单控件或者组件上创建双向绑定 
	v-if v-else v-else-if 条件渲染 		   
	v-show 根据表达式真假，切换元素的 display 
	v-html 更新元素的 innerhtml 		   
	v-text 更新元素的 textcontent v-pre 跳过这个元素和子元素的编译过程 
	v-clock 这个指令保持在元素上知道关联实例结束编译 
	v-once 只渲染一次

28. Vuex 怎么请求异步数据

	1.首先在 state 中创建变量 
	2.然后在 action 中调用封装好的 axios 请求，异步接收数据，commit 提交给 mutations Mutations 中改变 state 中的状态，将从 action 中获取到的值赋值给 state

29. Vuex 中 action 如何提交给 mutation 的

Action 函数接收一个与 store 实例具有相同方法和属性的 context 对象，可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 获取 state 和 getters

30. vuex 的 Getter 特性是？

	Getter 可以对 state 进行计算操作，它就是 store 的计算属性
	Getter 可以在多组件之间复用 如果一个状态只在一个组件内使用，可以不用 getters

31. vuex 的 Mutation 特性是？

	更改 vuex store 中修改状态的唯一办法就是提交 mutation，可以在回 调函数中修改 store 中的状态

32. vuex 的 actions 特性是？

	Action 类似于 mutation，不同的是 action 提交的是 mutation，不是 直接变更状态，可以包含任意异步操作

33. .vuex 的优势

	优点：解决了非父子组件的通信，减少了 ajax 请求次数，有些可以直接 从 state 中获取 
	缺点：刷新浏览器，vuex 中的 state 会重新变为初始状态，解决办法是 vuex-along，得配合计算属性和 sessionstorage 来实现

34. 说说你对 proxy 的理解

	vue 的数据劫持有两个缺点: 
		1、无法监听通过索引修改数组的值的变化 
		2、无法监听 object 也就是对象的值的变化所以 vue2.x 中才会有 $set 属性的存在 
	proxy 是 es6 中推出的新 api，可以弥补以上两个缺点，所以 vue3.x 版本用 proxy 替换 object.defineproperty。

35. 说一下 webpack 的打包原理

	Webpack 是把项目当做一个整体，通过给定一个主文件，webpack 将从这个主文件开始找到项目中所有依赖的文件，使用 loaders 类处 理，最后打包成一个或者多个浏览器可识别的 js 文件