admin 管理员组文章数量: 887031
2024年2月6日发(作者：oracleparameter)
目录
vue2面试题
1、$route 和 $router`的区别
2、一个.vue文件由几部分组成，分别什么含义
3、scoped作用与原理
4、组件通信有哪些方式
5.为什么data属性是一个函数而不是一个对象
6、vue生命周期分为几个阶段，几个钩子函数，分别写出来
7、axios的请求方式
8、说出$nextTick的作用
9、如何实现组件缓存
与MVC的区别是什么
常用修饰符有哪些
12.为什么避免v-for和v-if在一起使用
中Key值作用
中有时候数组会更新页面，有时候不更新为什么
15.计算属性与侦听器的区别
组件传值
中解决跨域做法
vue2面试题
1、$route 和 $router`的区别
$router 是VueRouter的实例，在script标签中想要导航到不同的URL,使用 $方法
$route为router跳转对象，里面可以获取当前路由的name,path,query,parmas等。
2、一个.vue文件由几部分组成，分别什么含义
由三部分组成：
1.所需要渲染的区域
2.
3.
3、scoped作用与原理
作用：组件css作用域，避免子组件内部的css样式被父组件覆盖
默认情况下，如果子组件和父组件css选择器权重相同，优先加载父组件css样式
原理：给元素添加一个自定义属性 v-data-xxxxx， 通过属性选择题来提高css权重值
4、组件通信有哪些方式
通过 props 传递
通过 $emit 触发自定义事件
使用 ref
EventBus
$parent 或$root
attrs 与 listeners
Provide 与 Inject
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 做相应的处理，这时候就可以使用 ck(callback)来帮助我们处理更新后的dom数据。
9、如何实现组件缓存
使用
与MVC的区别是什么
MVC ： 传统的设计模式。M：model模型，V：View视图，C：controller控制器
MVVM：我们vue所用的设计模式，数据双向绑定，让数据自动地双向同步不需要操作dom。
M： model数据模型 (data里定义)
V： view视图 （页面标签）
VM： ViewModel视图模型 (源码)
常用修饰符有哪些
.prevent: 提交事件不再重载页面；
.stop: 阻止单击事件冒泡；
.once: 只执行一次这个事件
.enter:监听键盘enter键
12.为什么避免v-for和v-if在一起使用
Vue 处理指令时，v-for 比 v-if 具有更高的优先级, 虽然用起来也没报错好使, 但是性能不高, 如果你有5个元素被v-for循环, v-if也会分别执行5次.
中Key值作用
key值的作用是给元素添加一个唯一的标识符，提高vue渲染性能。当数据变化的时候，vue就会使用diff算法对比新旧虚拟Dom。 如果遇到相同的key值，则复用元素。如果遇到不同的key值则强制更新。
中有时候数组会更新页面，有时候不更新为什么
因为vue内部只能监测到数组顺序/位置的改变/数量的改变, 但是值被重新赋予监测不到变更, 可以用 () / 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)计算属性可以监听多个数据变化(计算属性内部用到的数据变化了，就会执行计算属性方法), 侦听器只能侦听一个数据的变化。
组件传值
父传子
子组件props定义变量
父组件在使用子组件时通过行内属性给props变量传值
特点：单向数据流
子传父
子组件：$emit触发父的事件
父在使用组件用@自定义事件名=父的方法 (子把值带出来)
特点：事件监听
非父子组件:使用vuex
中解决跨域做法
使用CORS （Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。
所谓同源（即指在同一个域）具有以下三个相同点
协议相同（protocol）
主机相同（host）
端口相同（port）
反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。
版权声明：本文标题：【前端vue2面试题】2023前端最新版vue模块,高频17问(上) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1707196521h511984.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论