vue面试题大全

vue

1、 你知道vue的模板语法用的是哪个web模板引擎的吗?说说你对这模板引擎的理解

Vue使用了Mustache语法,即双大括号的语法。

2、 你知道v-model的原理吗?说说看

原生input其实只是一个语法糖,:bind="value"与@change="value = $event.target.value"的结合。
自定义组件的时候的v-model默认监听change事件和绑定value 的prop。

3、 你有使用过vue开发多语言项目吗?说说你的做法?

采用i18n来解决国际化问题,关于语言环境的存储方案,看到有同学解答localStorage的方式,个人认为这种还是采用Cookie的存储方法,通过路由实现不同模块加载不同的国际化配置文件

我个人网站的多语言是用vuex实现的,所有语言对于信息都命名,存在后端,由restful接口返回,在切换语言时触发dispatch,调用接口,在所有页面里mapState拿到语言配置,渲染上去

4、 在使用计算属性的时,函数名和data数据源中的数据可以同名吗?

不可以,同名会报错:The computed property "xxxx" is already defined in data

初始化vm的过程,会先把data绑定到vm,再把computed的值绑定到vm,会把data覆盖了

可以同名,但data会覆盖methods。并且本就不该同名,同名说明你命名不规范。

写在计算属性中的数据名称,不能在data中定义,因为不管是计算属性还是data还是props 都会被挂载在vm实例上,因此这三个都不能同名

然后解释为什么会覆盖,因为Props、methods、data、computed、watch都是在initState函数中被初始化的。初始化顺序就是我上面给出的顺序,本质上这些都是要挂载到this上面的,你如果重名的话,后面出现的属性自然而然会覆盖之前挂载的属性了。如果你的eslint配置比较严格的话,同名是编译不通过的。

5、 vue中data的属性可以和methods中的方法同名吗?为什么?

同4

6、 怎么给vue定义全局的方法?

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

7、 vue2.0不再支持v-html中使用过滤器了怎么办?

1:全局方法
2:computed
3:$options.filters

8、 怎么解决vue打包后静态资源图片失效的问题?

设置assetsPublicPath将 assetsPublicPath: '/' 改为 assetsPublicPath: './'

9、怎么解决vue动态设置img的src不生效的问题?

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

10、 使用vue后怎么针对搜索引擎做SEO优化?

ssr,即单页面后台渲染
vue-meta-info 与prerender-spa-plugin 预渲染
nuxt,但是nuxt部署有一定局限性,需要服务器配置node环境
phantomjs针对爬虫做处理

11、跟keep-alive有关的生命周期是哪些?描述下这些生命周期

activated和deactivated
keep-alive的生命周期

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

12、 如果现在让你从vue/react/angularjs三个中选择一个,你会选哪个?说说你的理由

首先会根据团队的技术栈来进行选型,有利于团队管理及技术交流,在此基础上不断演化出适合公司内部的实现方式;
抛开团队来说的话,个人会选择vue,原因是:

一直接触的都是vue,目前没有什么痛感,喜欢使用模板
轻量、语法简单,支持模板和渲染函数的弹性选择
更快的渲染+更小的体积

13、你知道vue2.0兼容IE哪个版本以上吗?

14、 使用vue开发一个todo小应用,谈下你的思路

15、 你有看过vue推荐的风格指南吗?列举出你知道的几条

1、使用v-for时记得加key,可以快速定位到需要更新的DOM节点,提高效率。
2、永远不要把 v-if 和 v-for 同时用在同一个元素上。提高渲染效率
3、优先通过 Vuex 管理全局状态,而不是通过 this.$root 或一个全局事件总线
4、为组件样式设置scoped作用域

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

vue1.0的数据绑定完全依赖于数据侦测,使用Object.defineProperty方法使数据去通知相应watch,改变dom结构。vue2.0引入了虚拟dom,只通知到组件,提升了颗粒度。

17、 你知道vue中key的原理吗?说说你对它的理解

便于diff算法的更新,key的唯一性,能让算法更快的找到需要更新的dom,需要注意的是,key要唯一,不然会出现很隐蔽性的更新问题。

18、 vue中怎么重置data?

Object.assign(this.$data, this.$options.data())

Object.assign()方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象
this.$data获取当前状态下的data
this.$options.data()获取该组件初始状态下的data。
Object.assign(this.$data, this.$options.data())

19、 vue渲染模板时怎么保留模板中的HTML注释呢?

设置comments属性,官网默认为舍弃注释



20、 Vue.observable你有了解过吗?说说看

vue2.6发布一个新的API,可以处理一些简单的跨组件共享数据状态的问题。类轻量级vuex,用作状态管理

让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象。
返回的对象可以直接用于渲染函数和计算属性内,并且会在发生改变时触发相应的更新;也可以作为最小化的跨组件状态存储器。

21、你知道style加scoped属性的用途和原理吗?

用途:防止全局同名CSS污染
原理:在标签加上v-data-something属性,再在选择器时加上对应[v-data-something],即CSS带属性选择器,以此完成类似作用域的选择方式

1、很多时候使用ui框架如果加scope就不能覆盖,这个时候一般写sass 会在最外层包裹该组件名的id 就可以不使用scoped 了
2、用/deep/也可以对组件内的样式进行覆盖

22、你期待vue3.0有什么功能或者改进的地方?

23、 vue边界情况有哪些?

访问根实例、访问父组件、子组件

24、如何在子组件中访问父组件的实例?

vue中如果父组件想调用子组件的方法,可以在子组件中加上ref,然后通过this.$refs.ref.method调用
Vue中子组件调用父组件的方法,这里有三种方法提供参考:
1:直接在子组件中通过this.$parent.event来调用父组件的方法
2:在子组件里用$emit向父组件触发一个事件,父组件监听这个事件
3:父组件把方法传入子组件中,在子组件里直接调用这个方法

详细:(https://www.cnblogs.com/jin-zhe/p/9523782.html)

25、watch的属性用箭头函数定义结果会怎么样?

因为箭头函数默绑定父级作用域的上下文,所以不会绑定vue实例,所以 this 是undefind

26、 在vue项目中如果methods的方法用箭头函数定义结果会怎么样?

因为箭头函数默绑定父级作用域的上下文,所以不会绑定vue实例,所以 this 是undefind

27、 在vue项目中如何配置favicon?

1、将 favicon 图片放到 static 文件夹下

2、用 vue-cli 搭建的Vue项目。

3、然后在 index.html 中添加:


4、刷新浏览器页面。

推荐在index.html中引入,不建议在配置文件中配置,成本太高,在vue.config.js中的pwa字段配置favicon路径等相关设置

28、你有使用过babel-polyfill模块吗?主要是用来做什么的?

babel默认只转换语法,而不转换新的API,如需使用新的API,还需要使用对应的转换插件或者polyfill去模拟这些新特性。

29、说说你对vue的错误处理的了解?

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

30、在vue事件中传入$event,使用e.target和e.currentTarget有什么区别?

currentTarget:事件绑定的元素
target:鼠标触发的元素

currentTarget 始终是监听事件者,而 target 是事件的真正发出者

31、 在.vue文件中style是必须的吗?那script是必须的吗?为什么?

试验了下,在 .vue 文件中,template是必须的,而script与style都不是必须的。
如果没有 template,则 [Vue warn]: Failed to mount component: template or render function not defined.

32、 vue怎么实现强制刷新组件?

强制重新渲染

this.$forceUpdate()
强制重新刷新某组件

//模版上绑定key


//选项里绑定data
data(){
  return{
      theKey:0
  }
}
//刷新key达到刷新组件的目的
theKey++;

33、 vue自定义事件中父组件怎么接收子组件的多个参数?

this.$emit("eventName",data)
data为一个对象

34、实际工作中,你总结的vue最佳实践有哪些?

35、 vue给组件绑定自定义事件无效怎么解决?

两种方式
1、组件外部加修饰符.navtive
2、组件内部声明$emit('自定义事件')

36、 vue的属性名称与method的方法名称一样时会发生什么问题?

报warn,项目可以运行(vue2.5.17)
但data属性会覆盖methods定义的值,报属性已定义警告
props不会覆盖值,但会报属性已定义警告和Prop异常警告

37、 vue变量名如果以_、$开头的属性会发生什么问题?怎么访问到它们的值?

报错 变量未定义
以 _ 或 $ 开头的属性 不会 被 Vue 实例代理,
因为它们可能和 Vue 内置的属性、API 方法冲突。
你可以使用例如 $data.xxx或者_data.xxx 的方式访问这些属性。

38、 vue使用v-for遍历对象时,是按什么顺序遍历的?如何保证顺序?

在遍历对象时,会按 Object.keys() 的结果遍历,
但是不能保证它的结果在不同的 JavaScript 引擎下都一致。

39、 vue如果想扩展某个现有的组件时,怎么做呢?

使用Vue.extend直接扩展
使用Vue.mixin全局混入
HOC封装
加slot扩展

40、 说下 attr和listeners的使用场景

组件传值,祖孙组件有跨度的传值。

41、 分析下vue项目本地开发完成后部署到服务器后报404是什么原因呢?

1.检查nginx配置,是否正确设置了资源映射条件;
2.检查vue.config.js中是否配置了publicPath,若有则检查是否和项目资源文件在服务器摆放位置一致。

42、 v-once的使用场景有哪些?

表单提交。可防止用户在请求未及时响应时,多次提交~

43、 说说你对vue的表单修饰符.lazy的理解

input标签v-model用lazy修饰之后,vue并不会立即监听input 
Value的改变,会在input失去焦点之后,才会触发input Value的改变

44、 vue为什么要求组件模板只能有一个根元素?

因为"树"状数据结构,肯定要有个"根",一个遍历起始点
通过这个‘根节点’,来递归遍历整个vue‘树’下的所有节点,并处理为vdom,最后再渲染成真正的HTML,插入在正确的位置

45、EventBus注册在全局上时,路由切换时会重复触发事件,如何解决呢?

在组件销毁前 $off

46、 怎么修改vue打包后生成文件路径?

47、 你有使用做过vue与原生app交互吗?说说vue与app交互的方法

jsBridge,建立连接,然后相互调用

48、 使用vue写一个tab切换

v-for循环,利用下标和v-show显示
作用域插槽+子组件

49、 vue中什么是递归组件?举个例子说明下?

用过组件的name属性,调用自身。例如生成树型菜单

50、 怎么访问到子组件的实例或者子元素?

1、this.$refs:在子组件标签上加 ref属性如ref="baseAlert",在父组件通过this.$refs.baseAlert.子组件方法名。
2、this.$children

51、 在子组件中怎么访问到父组件的实例?

this.$parent

52、在组件中怎么访问到根实例?

1、this.$root
2、无限循环调用$parent直到没有这个属性为止

53、 说说你对Object.defineProperty的理解

Object.defineProperty定义新属性或修改原有的属性;
vue的数据双向绑定的原理就是用的Object.defineProperty这个
方法,里面定义了setter和getter方法,通过观察者模式(发布订阅模式)
来监听数据的变化,从而做相应的逻辑处理。

54、 vue组件里写的原生addEventListeners监听事件,要手动去销毁吗?为什么?

肯定要,一方面是绑定多次,另一方面是函数没释放会内存溢出

55、 vue组件里的定时器要怎么销毁?

当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行
const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

56、 vue组件会在什么时候下被销毁?

v-if=‘false‘
没有使用keep-alive时的路由切换
路由跳转的时候

57、 使用vue渲染大量数据时应该怎么优化?说下你的思路!

1.如果需要响应式,考虑使用虚表(只渲染要显示的数据);
2.如果不考虑响应式,变量在beforeCreated或created中声明(Object.freeze会导致列表无法增加数据)

58、 在vue中使用this应该注意哪些问题?

vue中methods中函数尽量不要使用箭头函数,会改变this指向,在vue-cli构建的项目中this会为undefined

59、 你有使用过JSX吗?说说你对JSX的理解

jsx不是一门新的语言,是一种新的语法糖。让我们在js中可以
编写像html一样的代码。允许XML语法直接加入到JavaScript
代码中,让你能够高效的通过代码而不是模板来定义界面

60、 说说组件的命名规范

定义组件名有两种方式:
1.kebab-case(短横线分隔命名),引用时必须也采用kebab-case;
2.PascalCase(首字母大写命名),引用时既可以采用PascalCase也可以使用kebab-case;
但在DOM中使用只有kebab-case是有效的

61、 怎么配置使vue2.0+支持TypeScript写法?

62、 有什么用?

当做一个不可见的包裹元素,减少不必要的DOM元素,整个结构会更加清晰。
分组的条件判断和列表渲染

63、 vue的is这个特性你有用过吗?主要用在哪些方面?

vue中is的属性引入是为了解决dom结构中对放入html的元素有限制的问题

64、 vue的:class和:style有几种表示方式?

:class 绑定变量 绑定对象 绑定一个数组 绑定三元表达式
:style 绑定变量 绑定对象 绑定函数返回值 绑定三元表达式

65、 你了解什么是函数式组件吗?

函数式组件:
需要提供一个render方法, 接受一个参数(createElement函数), 方法内根据业务逻辑,通过createElement创建vnodes,最后return vnodes
createElement函数, 三个参数, 第一个参数是html标签或自定义组件,第二个参数一个obj(包含props, on...等等), 第三个参数children(通过createElement构建, 或者字符串)

66、 vue怎么改变插入模板的分隔符?

delimiters

67、 组件中写name选项有什么作用?

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

68、 说说你对provide和inject的理解

通过在父组件中inject一些数据然后再所有子组件中都可以通过provide获取使用该参数,
主要是为了解决一些循环组件比如tree, menu, list等, 传参困难, 并且难以管理的问题, 主要用于组件封装, 常见于一些ui组件库

69、 开发过程中有使用过devtools吗?

大力协助vue项目开发,看组件,参数,传值等,尤其是用的vuex的时候,用于调试vue应用,这可以极大地提高我们的调试效率

70、 说说你对slot的理解有多少?slot使用场景有哪些?

slot, 插槽, 在使用组件的时候, 在组建内部插入东西.
组件封装的时候最常使用到

71、 你有使用过动态组件吗?说说你对它的理解

72、 prop验证的type类型有哪几种?

props:{
    title:String,
    likes: Number,
    isPublished: Boolean,
    commentIds: Array,
    author: Object,
    callback: Function,
    contactsPromise: Promise
}

73、 prop是怎么做验证的?可以设置默认值吗?

单个类型就用Number等基础类型,多个类型用数组,必填的话
设置require为true,默认值的话设置default,对象和数组设置默认用工厂函数,
自定义验证函数validator。

74、 怎么缓存当前打开的路由组件,缓存后想更新当前组件怎么办呢?

可以在路由meta中加入参数, 对打开的路由进行keep-alive的判
断, 通过钩子active等

75、 说说你对vue组件的设计原则的理解

第一: 容错处理, 这个要做好, 极端场景要考虑到, 不能我传错了一个参数你就原地爆炸
第二: 缺省值(默认值)要有, 一般把应用较多的设为缺省值
第三: 颗粒化, 把组件拆分出来.
第四: 一切皆可配置, 如有必要, 组件里面使用中文标点符号, 还是英文的标点符号, 都要考虑到
第五: 场景化, 如一个dialog弹出, 还需要根据不同的状态封装成success, waring, 等
第六: 有详细的文档/注释和变更历史, 能查到来龙去脉, 新版本加了什么功能是因为什么
第七: 组件名称, 参数prop, emit, 名称设计要通俗易懂, 最好能做到代码即注释这种程度
第八: 可拓展性, 前期可能不需要这个功能, 但是后期可能会用上, 要预留什么, 要注意什么, 心里要有逼数
第九: 规范化,我这个input组件, 叫on-change, 我另外一个select组件叫change, 信不信老子捶死你
第十: 分阶段: 不是什么都要一期开发完成看具体业务, 如果一个select, 我只是个简单的select功能, 什么multi老子这个版本压根不需要, 别TM瞎折腾! 给自己加戏

76、 你了解vue的diff算法吗?

vue面试题大全_第1张图片
image.png

77、 vue如何优化首页的加载速度?

异步路由和异步加载
还有分屏加载, 按需加载, 延时加载图片等, cdn, 域名才分
不要什么东西动不动就打包到vendor中, 恶心

78、 vue打包成最终的文件有哪些?

vendor.js, app.js, app.css,
1.xxx.js
2.xxx.js

如果有设置到单独提取css的话
还有
1.xxx.css

默认的一个html文件,然后是js。css

79、 ajax、fetch、axios这三都有什么区别?

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

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

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

80、 vue能监听到数组变化的方法有哪些?为什么这些方法能监听到呢?

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

数组更新检测

81、 vue中是如何使用event对象的?

[@click](https://github.com/click)=“func” 默认第一个参数传入event对象
[@click](https://github.com/click)="func(0, $event)" 如果自己需要传入参数和event对象,则需要使用$event来获取event对象并传入func

82、 vue首页白屏是什么问题引起的?如何解决呢?

1.打包后文件引用路径不对,导致找不到文件报错白屏
2.路由模式mode设置影响
3.加载缓慢,出现短暂白屏

83、 说说你对单向数据流和双向数据流的理解

单向数据流:所有状态的改变可记录、可跟踪,源头易追溯;所有数据只有一份,组件数据只有唯一的入口和出口,使得程序更直观更容易理解,有利于应用的可维护性;一旦数据变化,就去更新页面(data-页面),但是没有(页面-data);如果用户在页面上做了变动,那么就手动收集起来(双向是自动),合并到原有的数据中。
双向数据流:无论数据改变,或是用户操作,都能带来互相的变动,自动更新。

84、 移动端ui你用的是哪个ui库?有遇到过什么问题吗?

vant,mint等等吧,各有各的坑,不过大部分都是可以查到解决方案的

85、你知道nextTick的原理吗?

86、 说说你对v-clock和v-pre指令的理解

v-cloak指令只是在标签中加入一个v-cloak自定义属性,在HTML还编译完成之后该属性会被删除。
v-pre可以用来阻止预编译,有v-pre指令的标签内部的内容不会被编译,会原样输出。

87、 写出你知道的表单修饰符和事件修饰符

事件修饰符.stop .prevent .capture .self .once .passive
表单修饰符.number .lazy .trim

88、 说说你对proxy的理解

目前只知道用来修改 属性的get set方法 vue3 来替换Object.defineProperty。一方面提高性能 另一方面可以免去给数组重写方法。

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

89、 你有自己用vue写过UI组件库吗?

90、 用vue怎么实现一个换肤的功能?

这个……全局的theme属性然后做class判断或者加载不同的样式文件。一种是编译时换肤 一种是用户操作换肤。编译时换肤可以通过css in js相关技术修改css预处理器的变量 。用户操作换肤 只能内置一些styleb变量供用户选择了

91、 有在vue中使用过echarts吗?踩过哪些坑?如何解决的?

多注意dom的渲染时机 和chart的实例化时机 在相应的生命周期方法中做操作。结合强制刷新 应该就能解决大部分问题

92、 如果让你教一个2-3年经验前端经验的同事使用vue,你该怎么教?

93、 vue性能的优化的方法有哪些?

94、 SSR解决了什么问题?有做过SSR吗?你是怎么做的?

SSR服务端渲染,解决SEO问题,用next吧,最佳实践
优化首屏加载速度

95、 说说你觉得认为的vue开发规范有哪些?
https://juejin.im/post/5b67e49551882508603d1431

96、 vue部署上线前需要做哪些准备工作?

router 是不是hash 是否需要配置nginx , publicPath , 是不是要配置cdn

97、 vue过渡动画实现的方式有哪些?

1.使用vue的transition标签结合css样式完成动画
2.利用animate.css结合transition实现动画
3.利用vue中的钩子函数实现动画

98、 vue在created和mounted这两个生命周期中请求数据有什么区别呢?

看实际情况,一般在 created(或beforeRouter) 里面就可以,如果涉及到需要页面加载完成之后的话就用 mounted。
在created的时候,视图中的html并没有渲染出来,所以此时如果直接去操作html的dom节点,一定找不到相关的元素
而在mounted中,由于此时html已经渲染出来了,所以可以直接操作dom节点,(此时document.getelementById 即可生效了)

99、 vue父子组件双向绑定的方法有哪些?

1.利用对象的引用关系来实现
2.父子组件之间的数据传递
3.使用.sync修饰符

100、 vue怎么获取DOM节点?

view:v-ref:xxx
data:this.$ref.xxx 这样就ok啦

101、 vue项目有做过单元测试吗?

102、 vue项目有使用过npm run build --report吗?

给 process.env 对象添加了一个属性 npm_config_report: "true",
表示开启编译完成后的报告

103、 如何解决vue打包vendor过大的问题?

1、在webpack.base.conf.js新增externals配置,表示不需要打
包的文件,然后在index.html中通过CDN引入

externals: {
    "vue": "Vue",
    "vue-router": "VueRouter",
    "vuex": "Vuex",
    "element-ui": "ELEMENT",
    "BMap": "BMap"
  }
2、使用路由懒加载 [官网]
(https://router.vuejs.org/zh/guide/advanced/lazy-loading.html)

104、webpack打包vue速度太慢怎么办?

105、 vue在开发过程中要同时跟N个不同的后端人员联调接口(请求的url不一样)时你该怎么办?

devServer中把所有的服务人员的地址代理都写进去,
然后动态更改接口的baseUrl,这样切换不同后端人员的时候不用重启

106、 vue要做权限管理该怎么做?如果控制到按钮级别的权限怎么做?

可以通过指令去做
Vue.directive('hasPermission', {
    bind(el, binding, vnode) {
        const permissions = vnode.context.$store.state.account.permissions
        if (binding.value === '') return
        const value = binding.value.split(',')
        let flag = true
        for (const v of value) {
            if (!permissions.includes(v)) {
                flag = false
            }
        }
        if (!flag) {
            if (!el.parentNode) {
                el.style.display = 'none'
            } else {
                el.parentNode.removeChild(el)
            }
        }
    }
}

107、 说下你的vue项目的目录结构,如果是大型项目你该怎么划分结构和划分组件呢?

views目录存放一级路由的组件,即视图组件
Components目录存放组件
Store存放vuex相关文件
Router目录存放路由相关文件
Untils目录存放工具js文件
API目录存放封装好的与后端交互的逻辑
Assets存放静态文件

108、在移动端使用vue,你觉得最佳实践有哪些?
vant 有赞的 感觉不错

109、你们项目为什么会选vue而不选择其它的框架呢?

Vue.js是一个轻巧、高性能、可组件化的MVVM库,同时拥有非
常容易上手的API;vue是单页面应用,使页面局部刷新,不用
每次跳转页面都要请求所有数据和dom,这样大大加快了访问
速度和提升用户体验。而且他的第三方ui库很多节省开发时间。

110、 对于即将到来的vue3.0特性你有什么了解的吗?

111、 vue开发过程中你有使用什么辅助工具吗?
vue-devtools

112、 vue和微信小程序写法上有什么区别?

113、 怎么缓存当前的组件?缓存后怎么更新?

keep-alive
通过actived钩子

114、 你了解什么是高阶组件吗?可否举个例子说明下?

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

配合相应的loader 想咋写就咋写

116、 vue-loader是什么?它有什么作用?

解析和转换 .vue 文件,提取出其中的逻辑代码 script、样式代
码 style、以及 HTML 模版 template,再分别把它们交给对应的 
Loader 去处理。

117、说说你对vue的extend(构造器)的理解,它主要是用来做什么的?

构建一个组件和vue.components注册组件一起使用

119、如何将axios异步请求同步化处理?
async ,await
Generator函数
回调里面写回调

    async getHistoryData (data) {
      try {
        let res = await axios.get('/api/survey/list/', {
          params: data
        })
        this.tableData = res.data.result
        this.totalData = res.data.count
      } catch (err) {
        console.log(err)
        alert('请求出错!')
      }
    }
  }

120、 怎么捕获组件vue的错误信息?

errorCaptured

121、 为什么vue使用异步更新组件?

批量更新 收集当前的改动一次性更新 节省diff开销

122、如何实现一个虚拟DOM?说说你的思路

createElement,render

虚拟Dom在vue底层实现中是一个类,每次_render的时候都会
实例化Vnode为一个虚拟dom对象。也就是说本质上是用一个js
对象来描述dom节点。

123、 写出多种定义组件模板的方法

1、字符串
2、模板字面量
3、
4、文件组件模板
5、inline-template

124、 SPA单页面的实现方式有哪些?

1.监听地址栏中hash变化驱动界面变化

2.用pushsate记录浏览器的历史,驱动界面发送变化

3.直接在界面用普通事件驱动界面变化

它们都是遵循同一种原则:div 的显示与隐藏

125、 说说你对SPA单页面的理解,它的优缺点分别是什么?

 

介绍:SPA应用就是一个web应用,可理解为:是一种只需要将单个页面加载到服务器之中的web应用程序。当浏览器向服务器发出第一个请求时,服务器会返回一个index.html文件,它所需的js,css等会在显示时统一加载,部分页面需要时加载。
优点:
1.良好的交互式体验。意思是:用户无需刷新页面,获取数据通过异步ajax获取,页面显示流畅
2.良好的前后端分离模式(MVVM),减轻服务端压力。服务器只需要输出数据就可以,不用管逻辑和页面展示,吞吐能力会提高几倍
3.共用同一套后端程序代码,不用修改就可用于web界面,手机和平板等客户端设备
缺点:
1.不利于SEO优化
2.由于单页应用在一个页面中显示,所以不可以使用浏览器自带的前进后退功能,想要实现页面切换需要自己进行管理
3.首屏加载过慢(初次加载耗时多),原因是:为了实现单页web应用功能及展示效果,在页面初始化的时候就会将js,css等统一加载,部分页面在需要时加载。当然也有解决方法。
解决方法:①使用路由懒加载 ②开启Gzip压缩 ③使用webpack的externals属性把不需要的库文件分离出去,减少打包后文件的大小 ④使用vue的服务端渲染(SSR)
举例spa应用:网易云音乐、QQ音乐等

126、 说说你都用vue做过哪些类型的项目?

127、 在vue项目中如何引入第三方库(比如jQuery)?有哪些方法可以做到?

1、绝对路径直接引入
在index.html中用script引入

然后在webpack中配置external
externals: { 'jquery': 'jQuery' }
在组件中使用时import
import $ from 'jquery'

2 、在webpack中配置alias
resolve: { extensions: ['.js', '.vue', '.json'], alias: { '@': resolve('src'), 'jquery': resolve('static/jquery-1.12.4.js') } }
然后在组件中import

3、在webpack中配置plugins
plugins: [ new webpack.ProvidePlugin({ $: 'jquery' }) ]
全局使用,但在使用eslint情况下会报错,需要在使用了 $ 的代码前添加 /* eslint-disable*/ 来去掉 ESLint 的检查。

128、 使用vue手写一个过滤器
价格格式 日期格式

全局过滤器
Vue.filter('addHobby',(val,hobby)=>{
return val + hobby
})
局部过滤器
filters:{
addHobby(val,hobby){
return val + hobby
}
}

129、 你有使用过render函数吗?有什么好处?

template也会翻译成render,只有一点,template中元素的
tag_name是静态的,不可变化,使用createEelment可以生
成不同tag_name, 比如h1 ... h6, 可以通过一个number变量
控制

130、 写出你常用的指令有哪些?

@ : v-once v-pre v-clock v-for v-html v-text v-model

131、 手写一个自定义指令及写出如何调用

全局自定义指令
Vue,directive('test',(el,binding,vnode)=>{
业务逻辑
})

局部指令
directives:{
test(el,binding,vnode){
业务逻辑
}
}
调用,都是v-test

132、 组件进来请求接口时你是放在哪个生命周期?为什么?

一般在created 因为在这个生命周期我们常用到的都已经初始化好了
如果涉及dom 那就mounted

133、 你有用过事件总线(EventBus)吗?说说你的理解

也是组件传值的一种方式(例如兄弟组件)

134、 说说vue的优缺点分别是什么?

135、 DOM渲染在哪个周期中就已经完成了?

mounted生命周期

136、 第一次加载页面时会触发哪几个钩子?

beforeCreate, created, beforeMount, mounted

137、 vue生命周期总共有几个阶段?

beforeCreate:在 new 一个 vue 实例后,只有一些默认的生命周期钩子和默认事件,其他的东西都还没创建。

created:data 和 methods 都已经被初始化好了。(如果要调用 methods 中的方法,或者操作 data 中的数据,最早可以在这个阶段中操作)

beforeMount:在内存中已经编译好了模板了,但是还没有挂载到页面中,此时,页面还是旧的。

mounted:Vue 实例已经初始化完成了。此时组件脱离了创建阶段,进入到了运行阶段。 (如果我们想要通过插件操作页面上的 DOM 节点,最早可以在和这个阶段中进行)

beforeUpdate:页面中的显示的数据还是旧的,data 中的数据是更新后的, 页面还没有和最新的数据保持同步。

updated:页面显示的数据和 data 中的数据已经保持同步了,都是最新的。

beforeDestroy:Vue 实例从运行阶段进入到了销毁阶段,这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于可用状态。还没有真正被销毁。

destroyed:这个时候上所有的 data 和 methods , 指令, 过滤器 ……都是处于不可用状态。组件已经被销毁了。

138、 vue生命周期的作用是什么?

准确地控制数据流和其对DOM的影响

139、 vue和angular有什么区别呢?

140、 如何引入scss?引入后如何使用?

一般放在 style 中 引入设置 lang = ‘scss’,并配置好 对应的 loader

安装scss依赖包:
npm install sass-loader --save-dev npm install node-sass --save-dev
在build文件夹下修改 webpack.base.conf.js 文件:
在 module 下的 rules 里添加配置,如下:
{ test: /\.scss$/, loaders: ['style', 'css', 'sass'] }
应用:
在vue文件中应用scss时,需要在style样式标签上添加lang="scss",即

175、 你有看过vue的源码吗?如果有那就说说看

176、 你有写过自定义指令吗?自定义指令的生命周期(钩子函数)有哪些?

bind inserted update componentUpdated unbind

177、 v-show和v-if有什么区别?使用场景分别是什么?

v-show 是css的display显示和隐藏
v-if 是DOM 销毁和重建

v-show 使用场景:
1.频繁的切换显示状态
2.预渲染需求

178、 说说你对MVC、MVP、MVVM模式的理解
179、 说下你对指令的理解?

要提供了一种机制,将数据的变化映射为DOM行为

180、 请描述下vue的生命周期是什么?

181、 vue组件之间的通信都有哪些?

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

182、 什么是虚拟DOM?

个人浅显理解:VNode是真实DOM的映射,其数据结构是普通JS对象,包含type(类型,是组件还是元素),style,class,children(子组件或子元素),data(数据模型)等属性,以树的形式嵌套。
参考--渲染器

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。
这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改,这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

183、 什么是双向绑定?原理是什么?

双向数据绑定个人理解就是存在data→view,view→data两条数据流的模式。其实可以简单的理解为change和bind的结合。目前双向数据绑定都是基于Object.defineProperty()重新定义get和set方法实现的。修改触发set方法赋值,获取触发get方法取值,并通过数据劫持发布信息.

虚拟 dom 是相对于浏览器所渲染出来的真实 dom 的,在react,vue等技术出现之前,我们要改变页面展示的内容只能通过遍历查询 dom 树的方式找到需要修改的 dom 然后修改样式行为或者结构,来达到更新 ui 的目的。
这种方式相当消耗计算资源,因为每次查询 dom 几乎都需要遍历整颗 dom 树,如果建立一个与 dom 树对应的虚拟 dom 对象( js 对象),以对象嵌套的方式来表示 dom 树,那么每次 dom 的更改就变成了 js 对象的属性的更改,这样一来就能查找 js 对象的属性变化要比查询 dom 树的性能开销小。

184、 vue和react有什么不同?使用场景是什么?

vue上手易,响应式数据,不需要手动render和优化,维护整套解决方案(vuex,vue-router,nuxt.js)
react的jsx有一定上手成本(有限), all in js很灵活,可以很方便实践ES新特性(::和?.学不动了),需手动更新(setState)和优化(shouldComponentUpdate),社区活跃(贡献了很多解决方案),移动端解决方案(RN)

1、vue是完整一套由官方维护的框架,核心库主要有由尤雨溪大神独自维护,而react是不要脸的书维护(很多库由社区维护),曾经一段时间很多人质疑vue的后续维护性,似乎这并不是问题。
2、vue上手简单,进阶式框架,白话说你可以学一点,就可以在你项目中去用一点,你不一定需要一次性学习整个vue才能去使用它,而react,恐怕如果你这样会面对项目束手无策。
3、语法上vue并不限制你必须es6+完全js形式编写页面,可以视图和js逻辑尽可能分离,减少很多人看不惯react-jsx的恶心嵌套,毕竟都是作为前端开发者,还是更习惯于html干净。
4、很多人说react适合大型项目,适合什么什么,vue轻量级,适合移动端中小型项目,其实我想说,说这话的人是心里根本没点逼数,vue完全可以应对复杂的大型应用,甚至于说如果你react学的不是很好,写出来的东西或根本不如vue写的,毕竟vue跟着官方文档撸就行,自有人帮你规范,而react比较懒散自由,可以自由发挥
5、vue在国内人气明显胜过react,这很大程度上得益于它的很多语法包括编程思维更符合国人思想
6、学习前端,关注唯品秀前端技术博客,同时分享你的前端经验!

185、 说说vue的优缺点

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

186、 有使用过vue吗?说说你对vue的理解

1.mvvm框架
2.数据驱动
3.SPA
4.渐进式

vue-cli

1、 vue-cli提供了的哪几种脚手架模板?

vue-cli2.x 好像有个simple和完整版的
vue-cli3.x 提供了自定义装箱配置 可以选装
TypeScript
PWA
lint
e2e
css 预处理
router
vuex

2、 vue-cli工程中常用的npm命令有哪些?

npm run dev,npm install 模块名,npm run build,npm uninstall,npm help

3、 在使用vue-cli开发vue项目时,自动刷新页面的原理你了解吗?

自动刷新页面并不是vue-cli的功能,而是webpack的
hot-module-replacement-plugin插件在做这件事,这个插件是
webpack自带的插件,用来做hmr的。如果需要配置hmr只
需要在webpack.config.js的devServer字段写 下面的配置即
可。
{
contentBase: 服务器可以访问的根目录,
hot:true, //开启热模块替换也就是hmr
hotOnly:true //不刷新页面,只做hmr
}
而由于vue-cli3集成了webpack的配置,
所以vue.config.js里面也有这个属性,配置写法是一样的。

4、 vue-cli3插件有写过吗?怎么写一个代码生成插件?

MyPlugin.install = function (Vue, options) {
// 1. 添加全局方法或属性
Vue.myGlobalMethod = function () {
// 逻辑...
}

// 2. 添加全局资源
Vue.directive('my-directive', {
bind (el, binding, vnode, oldVnode) {
// 逻辑...
}
...
})

// 3. 注入组件选项
Vue.mixin({
created: function () {
// 逻辑...
}
...
})

// 4. 添加实例方法
Vue.prototype.$myMethod = function (methodOptions) {
// 逻辑...
}
}

5、 vue-cli生成的项目可以使用es6、es7的语法吗?为什么?

首先说结论, 有些可以直接使用, 有些不行

根据vue-cli 3.0的配置, 如果webpack能检测到, 它会自动把
垫片自动打包到vendor中, 但是有些特性它检测不出来, 如es6.promise, 等
vue-cli 配置了babel,可以将es6,es7....etc在webpack打包的
时候转换成es5的代码,所以上线的时候没有问题。但是脚
手架只是配置了一些默认常见的用法, 可以根据babel官网
配置一些尚在草案中的语法

6、 vue-cli怎么解决跨域的问题?

vue-cli无法解决跨域问题。真正解决跨域问的是webpack。只不过vue-cli3.0将webpack的配置继承到了vue.config.js中,才给初学者造成了vue-cli可以解决跨域的错觉。
与在webpack.config.js中配置跨域一样,在vue.config.js中的devServer:{proxy:{}}字段可以编写跨域配置。
具体的配置写法webpack文档写的很清楚。

7、 vue-cli中你经常的加载器有哪些?

vue-loader/style-loader/sass-loader/url-loader...

8、 你知道什么是脚手架吗?

在前端中, 就是帮助我们更好的管理代码, 打包代码和其它资源, 保证项目规范和一些规则的工具

vue项目一般是使用webpack进行打包构建的,然而如果每一个项目都需要我们去配置loader和plugin的话,是很重复的劳动,并且vue项目需要使用到的最基本的webpack loader和webpack plugin是相同的。因此官方推出了vue-cli这个脚手架,使用它就可以快速的生成一份通用的webpack配置,并且帮我们安装好很多必定会用到的npm包。

9、 说下你了解的vue-cli原理?你可以自己实现个类vue-cli吗?

原理就是通过node环境发起git请求,把预先设置好的模板下载下来

10、 怎么使用vue-cli3创建一个项目?

直接 vue create 项目名

11、 vue-cli3你有使用过吗?它和2.x版本有什么区别?

Vue CLI 的包名称由 vue-cli 改成了 @vue/cli
vue cli 3 npm install -g @vue/cli
vue create hello-world
vue cli 2.x npm install -g vue-cli
vue init webpack my-project

vue-cli3.0 将webpack的配置集成了进来,使用vue-cli3.0创建的项目在配置webpack的时候可以直接在vue.config.js里面配置。既可以用chainwebpack的链式语法也可以直接在configureWebpack字段内直接写webpack原生的配置。

12、 vue-cli默认是单页面的,那要弄成多页面该怎么办呢?
13、 不用vue-cli,你自己有搭建过vue的开发环境吗?流程是什么?

vue-router

1、 vue-router怎么重定向页面?

redirect alias

方法一:在routes:[{
{ path: '/a', redirect: '/b' }
}]
方法二:别名
routes: [
{ path: '/a', component: A, alias: '/b' }
]

2、 vue-router怎么配置404页面?

将path:'*' , *放在最后,因为如果你放在前面会导致后面的的不能匹配

3、 切换路由时,需要保存草稿的功能,怎么实现呢?

用keep-alive缓存那个路由

在beforeDestroy中加入check功能,
当检测到有草稿时, 自动保存到vuex或者storage中或者window中等等
但是我要说的是, 这种方法是不靠谱的, 如果我是刷新页面呢!
建议采用, 实施保存操作, 保存在storage中较为靠谱, 当然这种操作牺牲是比较多的,可以用beforeDestroy结合window.onbeforeunload解决性能问题

4、 vue-router路由有几种模式?说说它们的区别?

hash: 使用变更hash不会刷新页面的特性, 来变更路由, 做到单页面无刷新,hash表示的是url中#的变化,当#变化是引起路由跳转
history: 使用html5的history方法, 不支持老旧浏览器, 但是如果要部署到服务器的化, 需要在ng上进行相应的正向代理跳转, 否则拷贝的链接会打不开

5、 vue-router有哪几种导航钩子( 导航守卫 )?

共有三种守卫:
1:全局守卫:beforeEach,afterEach
2:路由独享守卫:beforeEnter
3:组件级别的守卫beforeRouteEnter,beforeRouteUpdate,beforeRouteLeave他们执行顺序:全局》路由》组件
除了afterEach全局后置外,其他的守卫中务必要调用next(),否则无法完成导航
还有注意全局前置守卫可以用来进行拦截,(登录拦截)

6、 说说你对router-link的了解

vue-router插件的其中一个组件, 用于跳转路由, 类似于a标签, 它一般也会渲染成a标签, 但是可以通过tag来变更默认渲染元素, 通过to来跳转

7、 vue-router如何响应路由参数的变化?

1.watch
2.在父组件的router-view上加个key

8、 你有看过vue-router的源码吗?说说看

9、 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置怎么做呢?

通过router 的meta来记录需要保存滚动条的位置,在new VueRouter()时调用scrollBehavior(to, from, savedPosition) {return { x: 0, y: 0 }}的方法

10、 在什么场景下会用到嵌套路由?

举个例子,例如做个管理系统,顶部栏和左侧菜单栏是全局通用的,那就应该放在父路由,而右下的页面内容部分放在子路由

11、 如何获取路由传过来的参数?

如果使用query方式传入的参数使用this.$route.query 接收
如果使用params方式传入的参数使用this.$router.params接收

12、 说说active-class是哪个组件的属性?

active-class是vue-router模块的router-link组件中的属性,用来做选中样式的切换

13、 在vue组件中怎么获取到当前的路由信息?

this.$router.path

14、 vur-router怎么重定向?

15、 怎样动态加载路由?

router.addRoutes

16、 怎么实现路由懒加载呢?

用箭头函数的方法 component:()=>import('组件路径')

17、 如果让你从零开始写一个vue路由,说说你的思路

为了方便后期维护,建议独立出一个 router.js 文件
npm install vue-router
引入注册
import Router from 'vue-router';
Vue.user(Router);
向外暴露出一个router实例
export default new Router({
    mode: '',
    path: '',
    name: '',
    ...
});

18、 说说vue-router完整的导航解析流程是什么?

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

19、 路由之间是怎么跳转的?有哪些方式?

this.$router.go/replace/push
router-link to

20、 如果vue-router使用history模式,部署时要注意什么?

服务器的404页面需要重定向到index.html

21、 route和router有什么区别?

route代表当前路由对象,router代表整个vue实例下的路由对象,即router是new vueRouter的实例

22、 vue-router钩子函数有哪些?都有哪些参数?

全局的:beforeEach、beforeResolve、afterEach
路由的:beforeEnter
组件的:beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
参数:to、from、next;正对不同的钩子函数参数有所差异。

23、 vue-router是用来做什么的?它有哪些组件?

vue-router路由,通俗来讲主要是来实现页面的跳转,通过设置不同的path,向服务器发送的不同的请求,获取不同的资源。
主要组件:router-view、router-link

vuex

1、 你有写过vuex中store的插件吗?
2、 你有使用过vuex的module吗?主要是在什么场景下使用?

把状态全部集中在状态树上,非常难以维护。
按模块分成多个module,状态树延伸多个分支,模块的状态内聚,主枝干放全局共享状态

3、 vuex中actions和mutations有什么区别?

mutations可以直接修改state,但只能包含同步操作,同时,只能通过提交commit调用(尽量通过Action或mapMutation调用而非直接在组件中通过this.$store.commit()提交)
actions是用来触发mutations的,它无法直接改变state,它可以包含异步操作,它只能通过store.dispatch触发

4、 vuex使用actions时不支持多参数传递怎么办?

一个Object解决所有问题

5、 你觉得vuex有什么缺点?

6、 你觉得要是不用vuex的话会带来哪些问题?

多组件公用状态的时候想死, 特别是大型项目,数据共享不方便

7、 vuex怎么知道state是通过mutation修改还是外部直接修改的?

通过$watch监听mutation的commit函数中_committing是否为true
这道题感觉有点问题,在vuex严格模式下,是不让外部直接修改state的

8、 请求数据是写在组件的methods中还是在vuex的action中?

个人认为如果请求回来的数据如果是多次在多个组件中共用的话,就写在vuex这个统一数据管理仓库中,并放在vuex的actions属性中定义请求函数(请求是异步的,不能放在mutations中),然后在用到请求数据的地方通过$this.dispatch(‘actions名称’)去触发执行请求。
但是如果请求只在该组件用到的话就没必要放在vuex中了,直接在该组件的methods中请求即可。

9、 怎么监听vuex数据的变化?

在mutations中监视

10、 vuex的action和mutation的特性是什么?有什么区别?

11、 页面刷新后vuex的state数据丢失怎么解决?

就是放在localStorage 或者就是sessionStorage ,或者借用辅助插vuex-persistedstate
通常情况state里的初始数据是空,通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件(组件A)的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用(例如此时页面中没有组件A,或组件A的对应事件没有被触发),那么就没有获取实际数据,state的数据就是初始的空。
对症下药,就是要确保刷新页面以后调用对应的获取数据方法。
最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面,总会执行。

12、 vuex的state、getter、mutation、action、module特性分别是什么?

state, 状态初始化, 并实施观察
getter, 获取数据用于view或data中使用
mutation: 内部处理state变化
action: 处理外部交互
module: 模块化以上四个

13、 vuex的store有几个属性值?分别讲讲它们的作用是什么?

state:存贮公共数据的地方
Getters:获取公共数据的地方
mutations:放的是同步的操作和reducer有点像 通过store的commit方法来让mutations执行
action:放的是异步的操作 通过dispatch的方法让action里面的方法执行
context是store的一个副本
Vuex就是提供一个仓库,store仓库里面放了很多对象其中state即使数据源存放地,

14、 你理解的vuex是什么呢?哪些场景会用到?不用会有问题吗?有哪些特性?

状态管理, 当项目中有大量组件共用到一些状态的时候, 我就会考虑用.
其实不是每个项目都需要
不用就是参数控制比较麻烦, 比如多个兄弟组件公用参数.

15、 使用vuex的优势是什么?

便于进行全局或者局部的状态管理. 便于组件/插件/混合之间的联系
其实vuex中的所有功能都能够通过其他的方式进行实现,只不过vuex对这些方法进行了整合处理,使用起来更加便捷,同时也便于维护。全局状态变量的统一管理

16、 有用过vuex吗?它主要解决的是什么问题?推荐在哪些场景用?

我主要还是当全局变量来用的,比如登录人信息、token、浏览记录、跨组件的较大临时数据传递。
以往需要调个方法取全局变量或缓存,其实反而增加了初始化流程,而会自动更新的 vuex 就很好用了

ElementUI

1、 ElementUI是怎么做表单验证的?在循环里对每个input验证怎么做呢?
model 绑定表单数据 通过prop 取表单数值,根据rule取form-item rules 或则rules[prop]校验
2、 你有二次封装过ElementUI组件吗?

popover + button 的组件,点击该按钮后还有个二次确认或选择的交互

3、 ElementUI怎么修改组件的默认样式?

el-table /deep/{} 把要改的写在里面
第一直接按照element默认修改主题的方式, 直接修改配置
第二直接覆盖样式

4、 ElementUI的穿梭组件如果数据量大会变卡怎么解决不卡的问题呢?

在 left-footer 的 slot 里面加个翻页组件,
并修改 filter-method 方法重绘穿梭机组件,
大概保持每页 50 条这样子。

5、 ElementUI表格组件如何实现动态表头?

使用自定义表头,即 中传入自定义 slot。
表头整体结构变化则得自己 v-for 表头配置拼 重绘

6、 ElementUI使用表格组件时有遇到过问题吗?
7、 有阅读过ElementUI的源码吗?
8、 项目中有使用过ElementUI吗?有遇到过哪些问题?它的使用场景主要是哪些?

当然是用过了 很多后台系统,都会是用vue结合上ElementUI来实现,很大程度上提高了开发效率;
遇到的问题:对于修改其默认样式需谨慎

9、 有用过哪些vue的ui?说说它们的优缺点?

个人认为iview比elementUI好看,elementUI在多级联动菜单有一个bug(父子value一样的时候不显示)

mint-ui

1、 mint-ui使用过程中有没有遇到什么坑?怎么解决的?

1,样式不容易被修改,可以用/deep/或者》》》进行复写;
2,Field组件在ios上,输入框的提示信息太靠后,由label引起的,所以不要用它自带的label做提示名;自己写;
3,无限滚动很坑很坑

2、 说出几个mint-ui常用的组件

3、 mint-ui是什么?你有使用过吗?

基于 Vue.js 的移动端组件库,minit-ui是移动端是饿了么团队开发的,后者element-ui是PC端也是饿了么团队开发的


作者:浪子神剑
链接:https://www.jianshu.com/p/5f9cef0bfa51

你可能感兴趣的:(vue面试题大全)