前端vue2面试题2023前端最新版vue模块，高频17问(上)

Posted 2023-03-04 初映CY的前说

🥳博       主：初映CY的前说(前端领域)

🌞个人信条：想要变成得到，中间还有做到！

🤘本文核心：博主收集的关于vue2面试题(上) 

目录

 vue2面试题

1、$route 和 $router`的区别

2、一个.vue文件由几部分组成，分别什么含义

3、scoped作用与原理

4、组件通信有哪些方式

5.为什么data属性是一个函数而不是一个对象

6、vue生命周期分为几个阶段，几个钩子函数，分别写出来

7、axios的请求方式

8、说出$nextTick的作用

9、如何实现组件缓存

10.MVVM与MVC的区别是什么

11.Vue常用修饰符有哪些

12.为什么避免v-for和v-if在一起使用

13.Vue中Key值作用

14.Vue中有时候数组会更新页面，有时候不更新为什么

 15.计算属性与侦听器的区别

16.vue组件传值

17.vue中解决跨域做法

---

 vue2面试题

1、$route 和 $router`的区别

 $router 是VueRouter的实例，在script标签中想要导航到不同的URL,使用  $router.push方法

 $route为router跳转对象，里面可以获取当前路由的name,path,query,parmas等。

---

2、一个.vue文件由几部分组成，分别什么含义

由三部分组成：

1.<template>所需要渲染的区域</template>

2.<script>存放引入的资源与业务实现的数据与操作</script>

3.<style>存放界面css的样式</style>

3、scoped作用与原理

作用：组件css作用域，避免子组件内部的css样式被父组件覆盖

• 默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式

原理：给元素添加一个自定义属性 v-data-xxxxx， 通过属性选择题来提高css权重值

---

4、组件通信有哪些方式

1. 通过 props 传递
2. 通过 $emit 触发自定义事件
3. 使用 ref
4. EventBus 
5. $parent 或$root 
6. attrs 与 listeners
7. Provide 与 Inject
8. Vuex

---

5.为什么data属性是一个函数而不是一个对象

根本原因：每次调用产生一个新的地址空间防止数据被污染

我们对象是引用类型数据，处理的是内存当中的地址。当我们引用data多个组件会对data的地址值进行更改。当我们data是函数的话，则会每次引用的时候都会返回一个新的的地址确保我们的数据不会被更改。

---

6、vue生命周期分为几个阶段，几个钩子函数，分别写出来

•  初始化阶段:  beforeCreate、 created
•  挂载阶段 : beforeMount、mounted
•  更新阶段 : beforeUpdate、updated
•  销毁阶段:  beforeDestroy、destroyed

具体关于vue生命周期的详情可移步看：

【vue2】vue生命周期的理解_初映CY的前说-CSDN博客

---

7、axios的请求方式

• get请求（常用于获取数据）
• post请求（常用于提交表单数据和上传文件）
• put请求（对数据进行全部更新）
• patch请求（修改部分数据）
• delete请求(常用于删除操作(参数可以放在url上也可以和post一样放在请求体中)

  ---

  注意：axios常根据业务需求需要进行二次封装

8、说出$nextTick的作用

Vue 是异步修改 DOM 的并且不鼓励开发者直接接触 DOM，但有时候业务需要必须对数据更改--刷新后的 DOM 做相应的处理，这时候就可以使用 Vue.nextTick(callback)来帮助我们处理更新后的dom数据。

9、如何实现组件缓存

使用<keep-alive>标签，作用是创造一个缓存的空间，用于保存组件状态或者避免重新全部渲染。可以快速调用我们的缓存中的数据，从而达到提高访问速度。那常见的列表与购物车为例子，我们常常在这两个区域之间访问，每次点击不需要每次都重新渲染加载一次。

10.MVVM与MVC的区别是什么

MVC ： 传统的设计模式。M：model模型，V：View视图，C：controller控制器

MVVM：我们vue所用的设计模式，数据双向绑定，让数据自动地双向同步不需要操作dom。

• M： model数据模型 (data里定义)      
•    V： view视图 （页面标签）
• VM： ViewModel视图模型 (vue.js源码)

11.Vue常用修饰符有哪些

.prevent: 提交事件不再重载页面；

.stop: 阻止单击事件冒泡；

.once: 只执行一次这个事件

.enter:监听键盘enter键

12.为什么避免v-for和v-if在一起使用

Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.

13.Vue中Key值作用

key值的作用是给元素添加一个唯一的标识符，提高vue渲染性能。当数据变化的时候，vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值，则复用元素。如果遇到不同的key值则强制更新。

14.Vue中有时候数组会更新页面，有时候不更新为什么

因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 Vue.set() / vm.$set()

这些方法会触发数组改变, v-for会监测到并更新页面：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

这些方法不会触发v-for更新：

• slice()

• filter()

• concat()

 15.计算属性与侦听器的区别

点击跳转两者详解：【vue2】计算属性(computed)与侦听器(watch)详解_

(1)计算属性有缓存机制,侦听器没有

(2)计算属性不支持异步操作, 侦听器支持异步操作

(3)计算属性是一个额外新增的属性， 侦听器只能侦听data中的属性

(4)计算属性有返回值return,侦听器不需要return

(5)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法), 侦听器只能侦听一个数据的变化。

16.vue组件传值

父传子

• 子组件props定义变量
• 父组件在使用子组件时通过行内属性给props变量传值
• 特点：单向数据流

子传父

• 子组件：$emit触发父的事件
• 父在使用组件用@自定义事件名=父的方法 (子把值带出来)
• 特点：事件监听

非父子组件:使用vuex

---

17.vue中解决跨域做法

使用CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 javascript 代码获取跨域请求的响应。

所谓同源（即指在同一个域）具有以下三个相同点

• 协议相同（protocol）
• 主机相同（host）
• 端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。

点击可查看:跨域的解决办法 ---CORS方法、同源策列的理解

---

【接下来会慢慢更新中下篇，如对你有帮助请关注博主喔【爱心】