Vue面试问题

1.怎么给vue定义全局的方法？

1、通过prototype，这个非常方便。Vue.prototype[method]=method;
2、通过插件Vue.use(plugin)；
3、通过mixin，Vue.mixin(mixins);
4、

// 创建全局方法
this.$root.$on('test', function(){
    console.log('test');
})

// 销毁全局方法
this.$root.$off('test');

// 调用全局方法
this.$root.$emit('test');

2.怎么解决vue打包后静态资源图片失效的问题？

找到config/index.js 配置文件，找build打包对象里的assetsPublicPath属性
默认值为/，更改为./就好了
最新的vue-cli 需要在根目录下建一个vue.config.js 在里面配置publicPath即可

3.怎么解决vue动态设置img的src不生效的问题？

因为动态添加src被当做静态资源处理了，没有进行编译，所以要加上require。
<img :src="require('@/assets/images/xxx.png')" />

4.跟keep-alive有关的生命周期是哪些？描述下这些生命周期

keep-alive的生命周期
1.activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
2.deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated

5.你知道vue2.0兼容IE哪个版本以上吗？

不兼容ie8及以下，是因为vue的响应式原理是基于es5的Object.defineProperty的,而这个方法不支持ie8及以下。
部分兼容ie9 ，完全兼容10以上

6.你是从vue哪个版本开始用的？你知道1.x和2.x有什么区别吗？

2016年发布的vue2.0版本，区别：
1、 2.0生命生命周期变化感觉变得更加语义化一点（有规律可寻，更好记了），而且增加了beforeUpdate、updated、activated、deactivated，删除了attached、detached。
2、2.0将1.0所有自带的过滤器都删除了，也就是说，在2.0中，要使用过滤器，则需要我们自己编写
3、vue1.0的数据绑定完全依赖于数据侦测，使用Object.defineProperty方法使数据去通知相应watch，改变dom结构。vue2.0引入了虚拟dom，只通知到组件，提升了颗粒度。

7.你知道vue中key的原理吗？说说你对它的理解

需要使用key来给每个节点做一个唯一标识，Diff算法就可以正确的识别此节点，找到正确的位置区插入新的节点。
作用：便于diff算法的更新，key的唯一性，能让算法更快的找到需要更新的dom（高效的更新虚拟DOM）

8.如何在子组件中访问父组件的实例？

父组件想调用子组件的方法，可以在子组件中加上ref，然后通过this.$refs.ref.method调用
https://www.cnblogs.com/jin-zhe/p/9523029.html
Vue中子组件调用父组件的方法，这里有三种方法提供参考：
1：直接在子组件中通过this.$parent.event来调用父组件的方法
2：在子组件里用$emit向父组件触发一个事件，父组件监听这个事件
3：父组件把方法传入子组件中，在子组件里直接调用这个方法
https://www.cnblogs.com/jin-zhe/p/9523782.html

9.vue渲染模板时怎么保留模板中的HTML注释呢？

设置comments属性，官网默认为舍弃注释
<template comments> ... </template>

10.在.vue文件中style是必须的吗？那script是必须的吗？为什么？

在 .vue 文件中，template是必须的，而script与style都不是必须的。都没有的话那就是一个静态网页

11.说说你对vue的错误处理的了解？

分为errorCaptured与errorHandler。
errorCaptured是组件内部钩子，可捕捉本组件与子孙组件抛出的错误，接收error、vm、info三个参数，return false后可以阻止错误继续向上抛出。
errorHandler为全局钩子，使用Vue.config.errorHandler配置，接收参数与errorCaptured一致，2.6后可捕捉v-on与promise链的错误，可用于统一错误处理与错误兜底。
https://blog.fundebug.com/2019/06/17/handling-errors-in-vuejs/

12.vue怎么实现强制刷新组件？

强制重新渲染
1.this.$forceUpdate()
2.v-if
强制重新刷新某组件

//模版上绑定key
<SomeComponent :key="theKey"/>
//选项里绑定data
data(){
  return{
      theKey:0
  }
}
//刷新key达到刷新组件的目的
theKey++;

13.你了解vue的diff算法吗？

如一个list中某一个数据发生变更时,
vue中会对整个list进行遍历, 判断使用到的某些属性是否发生变更, 从而更新发生变更的item
所以key属性才会显得很重要, 它会告诉你, 我那个item发生变更, 而不是去检测整个list

14.ajax、fetch、axios这三都有什么区别？

ajax是最早出现发送后端请求的技术，属于原生js范畴,核心是使用XMLHttpRequest对象,使用较多并有先后顺序的话，容易产生回调地狱。

fetch号称可以代替ajax的技术，是基于es6中的Promise对象设计的，参数和jQuery中的ajax类似，它并不是对ajax进一步封装，它属于原生js范畴。没有使用XMLHttpRequest对象。

axios不是原生js,使用时需要对其进行安装，客户端和服务器端都可以使用，可以在请求和相应阶段进行拦截，基于promise对象。

15.对于即将到来的vue3.0特性你有什么了解的吗？

支持TypeScript
兼容IE11
双向数据绑定原理：
Vue2.x：其双向数据绑定原理是通过es5的Object.defineProperty，中的set方法来实现数据劫持的，但是有一个弊端就是无法兼听到数组内部的数据变化(当然我们可以通过arr = arr.concat([]))，来实现内部数据变化的检测。相比Vue3有一定的性能问题。
Vue3.x：是用ES6的语法 Proxy（Proxy 怎么用大家可自行百度，网上教程大把，我就不在这赘述了）对象来实现的，这个玩意儿也可以实现数据的劫持，相比Object.defineProperty的优势是：可以检测到数组内部数据的变化
（IE系列都不兼容Proxy，所以可能还是用Object.defineProperty）

16.为什么我们写组件的时候可以写在.vue里呢？可以是别的文件名后缀吗？

以什么后缀跟VUE没有任何关系，vue只是个特殊的text文件而已，就算你用 .abc 都行。
这一切都该归功于webpack，在webpack 的loaders配置中，能让你给指定文件一个，或多个加载器。你也可以把这些加载器理解为预编译工具。

  module: {
    rules: [{
        test: /\.vue$/, // 这里指定 .vue 文件通过 vue-loader 解析，你可以指定任何类型的文件。
        loader: 'vue-loader',
        options: vueLoaderConfig
      }]
   }

17.v-if和v-for的优先级是什么？如果这两个同时出现时，那应该怎么优化才能得到更好的性能？

v-for 的优先级更高
避免出现这种情况，如果实在需要，则在外嵌套template，在这一层进行v-if判断，然后在内部进行v-for循环，避免每次只有v-if只渲染很少一部分元素，也需要遍历同级的所有元素

18.watch和computed有什么区别？

watch不支持缓存，只要从新渲染就会执行，支持异步。
computed支持缓存，只有当缓存改变时才执行，不支持异步。

19.watch如何创建时就立即执行

要使用 handler 和 immediate

//immediate设为true    监听方法会在创建的时候  执行handler里的方法
watch: {
    value:{
      handler:function(o,n){},
      immediate: true
    } 
  }

20.vue组件之间的通信都有哪些？

父子Coms: 1/2/3 ..
兄弟Coms: 4/5
跨级Coms: 4/5/6/7
props
$emit/$on
( $parents/$children ) / $refs
Vuex
Bus
( provide/inject )
( $attrs/$listeners )

21.说说vue的优缺点

优点：
1.数据驱动
2.模块化
3.轻量级
4.SPA
5.版本3.0的界面化管理工具比较好使
6.vue易入门
7.中文社区强大，入门简单，提升也有很多的参考资料。
缺点：
1.吃内存（每个组件都会实例化一个Vue实例，实例的属性和方法很多）
2.定义在data里面的对象，实例化时，都会递归的遍历转成响应式数据，然而有的响应式数据我们并不会用到，造成性能上的浪费
3.像keep-alive transition transition-group 这些内置组件，不管用不用其实都已经挂到Vue.options.components上，如果不用，造成对象变大，从而占用内存
4.父子组件更新，没有明确的来源
5.不支持IE8及以下浏览器