记录相关的vue面试题目（2020）

1、简单说下你对v-model的理解

v-model其实是一个语法糖，实现主要靠的是原生input的v-bind：绑定响应式数据，并且触发input事件传递和改变数据

2、使用计算属性时，函数名可以和数据源中的命名重复吗？

不可以，无论是计算属性、data还是props都会被挂载在vm实例上，重复就会报错

3、methods中方法可以和data中命名重复吗？

不可以，命名相同会报错不是一个方法，并且优先执行了data中的属性

4、怎么解决动态设置img的src无效？

使用 require 引入

5、跟keep-alive相关的生命周期有哪些？

activated：页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated：页面离开时触发，再次进入只触发activated

6、怎么对data数据快速重置？

Object.assign(this.$data,this.$options.data()) //目标数据，源数据

7、style中加入scoped的作用和原理

作用：防止样式的全局污染
原理：给标签增加v-data-someting属性，再在选择器上添加对应的[v-data-something]，也就是css带属性选择器，以此完成类似作用域的渲染

8、举例说明vue中的边界情况

在updated钩子中修改data属性值，又会触发更新，导致无限循环

9、怎么在子组件中访问父组件? 父组件中怎么访问子组件？

this.$parent 获取父组件实例
this.$parent.event 调用父组件方法

this.$children 获取子组件（数组）
this.$refs.refName.event 给子组件添加refName，调用子组件方法

10、可以在watch中使用箭头函数吗？methods中可以用吗？

不可以，箭头函数绑定的是父级作用域的上下文，而不是vue实例，所以使用this会报undefined

11、vue事件中传入$event，使用event.target和event.currentTarget有什么区别？

event.target指向事件发生时的元素
event.currentTarget指向事件绑定的元素

12、怎么强制刷新组件？

强制重新渲染：this.$forceUpdate()
强制刷新组件：在组件上添加key，修改key值

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

组件外部：使用.native修饰符
组件内部：声明$emit（自定义事件）

14、vue组件里的定时器要怎么销毁？

计时器结束进行销毁，在beforeDestroy钩子里面再次销毁

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

都可以进行数据的请求，涉及到加载完成后的操作尽量放在mounted中处理

16、vue中怎么获取Dom节点？

this.$refs.refName

17、需要和多名后端进行联调时，怎么处理

把所有人的接口地址写进代理，动态修改baseUrl，避免重启

18、vue-loader是什么？做什么用？

webpack的一个loader模块，主要用于解析和转换.vue文件，提取真正的逻辑代码、样式代码、模板代码交由各自的loader去解析处理

19、如何将axios异步请求同步化处理？

async/await

20、组件进来请求接口时放在哪个生命周期？为什么？

created 如果涉及视图层操作 就放在mounted

21、dom渲染在哪个生命周期中就已经完成？

mounted

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

beforeCreate、created、beforemount、mounted

23、vue生命周期的作用是什么？

控制数据渲染和dom管理

24、组件和插件有什么区别？

组件：主要用来构成自身业务
插件：主要用来增强技术栈的功能模块

25、首屏加载过慢，有什么优化的地方吗？

开启gzip
路由懒加载
ssr渲染

26、v-if和v-for哪个优先级更高？如果同时出现，怎样使用？

v-for优先级更高
如果同时存在，需要新增template进行v-if判断，子元素进行v-for循环

27、$nextTick有什么作用？

为了处理数据更新视图未及时更新的问题

28、watch和computed的区别

watch：侦听属性，数据变化立即做出响应，没有缓存
computed：计算属性，应对复杂逻辑的计算，依赖源变化时响应，有缓存

29、v-for循环是的key有什么作用？

保证唯一性，数据更新时可以更加快速、精准的找到变化的位置

30、v-show和v-if的区别？什么时候使用?

v-show：Dom的显示和隐藏，在初始化时就会渲染，需要频繁操作时使用
v-if：Dom的创建和销毁，初始化时不会渲染，不需要频繁操作时使用

31、vue-cli中怎么解决跨域问题？

2.x中在config/index.js中配置devserver.proxy
3.x中在src/vue.config.js中配置（没有就新建）

Tips:vue-cli并不能解决跨域，解决跨域的是webpack,只不过vue-cli继承了webpack配置`

32、vue-router怎么重定向页面？

路由中配置redirect属性

33、vue-router怎么配置404页面？

使用通配符*

{
     
// 会匹配所有路径
// 含有通配符的路由应该放在最后
path: '*',
name: '404',
component: () => import('../views/404.vue')
}

34、vuex中actions和mutations有什么区别？

mutations可以直接修改state，但只能包含同步操作，同时，只能通过提交commit调用(尽量通过Action或mapMutation调用而非直接在组件中通过this.$store.commit()提交)

actions是用来触发mutations的，它无法直接改变state，它可以包含异步操作，它只能通过store.dispatch触发

35、vuex的store有哪几种属性值？作用是什么？

state：存放公共数据的地方
getter：获取根据业务场景处理返回的数据
mutations：唯一修改state的方法，修改过程是同步的
action：异步处理，通过分发操作触发mutation
module：将store模块分割，减少代码臃肿

持续更新…