前端WEB前端

Vue面试问题

2019-10-23  本文已影响0人  刘其瑞

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及以下浏览器

上一篇下一篇

猜你喜欢

热点阅读