vue文章发布 2023年最新50道Vue全套vue2+vue3面试题带答案汇总
专业出黑
11.Vue3 新特性有哪些？
1、性能提升
响应式性能提升，由原来的 . 改为基于ES6的 Proxy ，使其速度更快，消除警告。
重写了 Vdom ，突破了 Vdom 的性能瓶颈。
进行模板编译优化。
更加高效的组件初始化。
2、更好的支持
有更好的类型推断，使得 Vue3 把 支持得非常好。
3、新增 API
API 是 vue3 新增的功能，比 mixin 更强大。它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强。
4、新增组件
不再限制 只有一个根几点。
传送门，允许我们将控制的内容传送到任意的 DOM 中。
等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。
5、Tree-：支持摇树优化
摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快。
6、 API： 自定义渲染器
实现 DOM 的方式进行 WebGL 编程。
12.vue3 组合式API生命周期钩子函数有变化吗？
setup 是围绕 和 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内。
值得注意的是组合式API中的钩子函数，通过在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子，需要注册，并且只能在 setup 期间同步使用，因为它们依赖于内部的全局状态来定位当前组件实例。
13. API 是什么？
vue2 中我们把一个 vue 文件中 data、、props、、 等定义属性和方法，共同处理页面逻辑，这种方式叫做 API。
这种方式开发的复杂组件，同一个功能的往往需要在不同 vue 配置项中定义属性和方法，代码比较分散。如果功能比较复杂，维护代码的时候往往会很难分清每个方法对应的功能，增加了代码维护成本。所以 vue3 舍弃了 API ，换用 API。
14. API 是什么？
API 是 vue3 新增的，所以 vue2 没有。在 API 中，根据代码逻辑功能来组织的，一个功能所定义的所有 API 都会放到一起，这样即使功能复杂，代码量增大，都可以一下子定位到某个功能的所有代码，代码维护方便。它的最大特点就是：高内聚，低耦合。
15. API 与 API 有什么区别？
vue3 仍然支持 API，但我们更推荐使用 API。优劣比较：
更好的可编程性。
更优的代码组织。
更好的逻辑抽象能力。
对 tree- 友好，代码也更容易压缩。
没有 this
16.watch 和 的区别？
watch 和 都是监听器， 是一个副作用函数。它们之间的区别有：
watch 需要传入监听的数据源，而 可以自动手机数据源作为依赖。
watch 可以访问倒改变之前和之后的值， 只能获取改变后的值。
watch 运行的时候不会立即执行，值改变后才会执行，而 运行后可立即执行。这一点可以通过 watch 的配置项 改变。
17.Vue2中双向数据绑定是如何实现的？
答：vue 双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的， 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变；
核心：关于VUE双向数据绑定，其核心是 .()方法，get set 方法。
简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；
18.vue2的生命周期
Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。通俗说就是 Vue 实例从创建到销毁的过程，就是生命周期。
: vue元素的挂载元素el和数据都为，还未初始化；
：vue实例的数据对象data有了，el还没有；
：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟dom节点上，data.还未替换；
：vue实例挂载完成，data.成功渲染。
更新前后：data变化时会触发和方法；
销毁前后：和，在执行方法后，对data的改变不会触发周期函数，说明vue实例已经解除了事件监听以及dom绑定，但是dom结构依然存在；
19.vue2生命周期的作用：
他的生命周期中有多个事件钩子，让我们控制整个vue实例的过程时更容易形成良好的逻辑。
生命周期钩子的一些使用方法：
：事件，在加载实例时触发。
：初始化完成事件，异步请求。
：挂载元素，获取dom节点
：对数据统一处理
：确认事件停止。
：更新数据后立即操作dom。
20.vue2 如何升级到 vue3 ?
如果是把之前的 vue2 项目升级到 vue3 ，先卸载旧版本的 vue-cli，安装最新版本。安装完成之后，检查 vue 的版本。然后需要注意，把项目中 vue3 发生改变或被废弃的特性需要进行修改。如：
$ 被 vue3 移除，使用 $ 的需要替换为 $ref。
被移除，更改为 。
$ 被移除，需要删除掉。
插槽的新变化。
Vuex 使用发生改变。
vue- 使用发生改变等等。
21.v-if 和 v-for 的优先级哪个高？
在 vue2 中 v-for 的优先级更高，但是在 vue3 中优先级改变了。v-if 的优先级更高。
在 vue2 中 v-for 和 v-if 同时出现时，可放在一个标签内
在 vue3 中这样写会报错，就是因为 v-if 的优先级更高，写到一个标签渲染的情况下会导致报错
22. setup 是什么？
setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。使用 setup 语法糖的特点：
属性和方法无需返回，可以直接使用。
引入组件的时候，会自动注册，无需通过 手动注册。
使用 接收父组件传递的值。
获取属性， 获取插槽， 获取自定义事件。
默认不会对外暴露任何属性，如果有需要可使用 。
23.vue3常用API有哪些
vue3支持的tree-，因此现在所有api都需要导入后再使用：
ref：
常用：ref()、isRef()、unRef()、toRef()、()、()
注：toRef()、()用在解构时仍希望数据为响应式时使用
：
常用：()、()、()、()、toRaw()
：只读，不可修改
：
//写法1：接受一个getter函数，并根据getter的返回值返回一个不可变的响应式ref对象
const a = computed(()=>{})
//写法2：接受一个具有get、set函数的对象，用来创建可写的ref对象
const b = computed({
get: () =>{},
set: (newValue) => {},
})
watch：
const obj = reactive( {a:{b:1}} )
const e = ref('e')
const f = ref('f')
watch( obj, (newValue,oldValue) => {})
watch( ()=>obj.a.b, (newValue,oldValue) => {}) //监听对象里的某个属性，必须用getter返回，即必须写成()=>obj.a.b的形式（直接写成obj.a.b会报错）
watch( ()=>_.cloneDeep(obj), (newValue,oldValue) => {}) //深拷贝过后,监听的newValue,oldValue才会是前后值不一样,否则newValue,oldValue打印值一样
watch( [e,f], (newValue,oldValue) => {})//vue3新增的写法，可同时监听多个ref数据，写成数组形式
const stop = watch(obj,()=>{})
stop() //停止监听
：立即执行传入的一个函数，同时响应式追踪其依赖，并在其依赖变更时重新运行该函数（写在里的数据会被收集为其依赖，当这些依赖改变时才会触发）
const stop = watchEffect(() =>{},{flush:'post'}) //对写在回调函数里的所有数据监听
stop() //停止监听
24.Vue3中的是什么？它的作用是什么？
Vue3中的 是控制渲染位置的新指令。它的作用是在DOM中移动一个组件的内容而不改变组件的父级。
25.Vue3中的是什么？它的作用是什么？
Vue3中的是Vue3中新增的一个组件，它的作用是实现延迟加载和错误处理。在组件中加入，可以让异步组件可以渲染出加载状态，并且如果异步组件加载时出现错误，也能够处理这些错误。
26.什么是响应式系统？ Vue3中的响应式系统有哪些更新？
响应式系统允许在状态发生变化时更新视图。Vue3中的响应式系统更新包括Proxy、和等。
27.Vue3 API是什么？它的作用是什么？
Vue3 API是Vue3中的一个新特性，它的作用是将组件中的逻辑分解成可复用的可组合函数。通过使用 API，可以更好地组织代码和管理状态。
28.3.Vue3 生命周期
API生命周期
API生命周期
29.如何看待 API 和 API API 更好的代码组织，更好的逻辑复用，更好的类型推到小型项目，业务逻辑简单，用 API中大型项目，业务逻辑复杂的，用 API 是为了解决复杂业务逻辑而设计的类似React Hooks 30.解释一下ref toRef和？ ref 生成值类型的响应式数据可用于模板和通过.value修改值 toRef 针对一个响应式对象（封装）的prop创建一个ref，具有响应式两者保持引用关系 ，避免模板中导出都是state 将响应式对象（封装）转换成普通对象对象的每个prop都是对应的ref两者保持引用关系 最佳使用方式 用做对象的响应式，用ref做值类型的响应式setup中返回(state)，或者toRef(state, ‘prop’)ref的变量命名都用合成函数返回响应式对象时，用 31.为何需要toRef
1. 初衷：不丢失响应式的情况下，把对象数据进行分解和扩散
2. 前提：针对的事响应式对象，不是普通对象
3. 注意：不创造响应式，而是延续响应式
32.setup中如何获取组件实例？ setup和其他 API中都没有this在 API中仍然可以使用 API中可以使用方法获取 33. API和React Hooks的对比 前者setup(生命周期)只会被调用一次，后者函数会被多次调用前者无需，，因为setup只调用一次前者无需考虑调用顺序，后者需要保证hooks的顺序一致 34.Vue3中的事件修饰符有哪些？
Vue3中的事件修饰符与Vue2基本相同，包括stop、、和self等。
35.Vue3中如何实现动态组件？
Vue3中使用 元素和 v-bind:is 属性来实现动态组件。例如， 。
36.. 和 Proxy 的区别
. 和 Proxy 的区别如下:
1.Proxy 可以直接监听对象而非属性；
2.Proxy 可以直接监听数组的变化；
3.Proxy 有多达 13 种拦截方法,不限于 apply、、、has 等等是 . 不具备的
4.Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而. 只能遍历对象属性直接修改
37.Vue3中的指令有哪些？
Vue3中的指令包括v-if、v-for、v-bind、v-on、v-html、v-model、v-show、v-slot、v-text等。
38.为什么vue3需要对引入的组件使用？
vue2中 is是通过组件名称切换的，vue3中setup是通过组件实例切换的。直接把组件实例放到中代理，vue会发出警告。告知我们可以通过 或者 跳过proxy 代理。对组件实例进行响应式代理毫无意义，且浪费性能
：标记一个对象，使其不能成为一个响应式对象。
toRaw：将响应式对象（由 定义的响应式）转换为普通对象。
：只处理基本数据类型的响应式, 不进行对象的响应式处理。
：只处理对象最外层属性的响应式（浅响应式）。
import A from '../components/A.vue'
import B from '../components/B.vue'
let tabList = reactive([
{name:'组件A',com:markRaw(A)},
{name:'组件B',com:markRaw(B)},
]);
39. Vue3如何进行状态管理？
Vue3中使用Vuex进行状态管理，需要先安装Vuex，并在根Vue实例中使用 app.use() 方法注册Vuex。然后在组件中使用 store 选项来创建和访问Vuex的状态。
40.为何VUE3使用组合式API？
由于vue2有局限性：
组件的逻辑膨胀导致组件的可读性变差；
无法跨组件重用代码；
vue2对TS的支持有限
41.组合式API的优点？
API是根据逻辑相关性组织代码的，提高可读性和维护性
代码量少，更好的重用逻辑代码
没有引入新的语法，只是单纯函数
异常灵活
工具语法提示友好，因为是单纯函数所以很容易实现语法提示、自动补偿
更好的支持
在复杂功能组件中可以实现根据特性组织代码，代码内聚性强
组件间代码复用
42.解释一下Vue 3中的 setup
setup函数接收两个参数，分别是 props 和 。
1、props：值为对象，包含: 组件外部传递过来。切组件内部声明接收了的属性。需要注意的是，Vue3中的 props 是只读的，即在setup 函数中不能修改 props 的值。如果需要修改传递过来的数据，可以使用响应式对象或ref。
2、：上下文对象。
attrs:值为对象，包含组件外部传递过来，但没有在props配置中声明的属性。相当于this.$attrs
slots:收到的插槽内容，相当于this.$slots
emit:分发自定义事件的函数，相当于this.$emit
43.与
1、和是一对新的API，用于在父组件中提供数据，然后在子组件中注入数据。
2、：是一个对象，或者是一个返回对象的函数。里面呢就包含要给子孙后代的东西，也就是属性和属性值。
3、：一个字符串数组，或者是一个对象。属性值可以是一个对象，包含from和默认值。
//在父组件中，使用provide提供数据：
//name：定义提供 property的 name。
//value ：property的值。
setup(){
provide('info',"值")
}
//在子组件中，使用inject注入数据
//name：接收 provide提供的属性名。
//default：设置默认值，可以不写，是可选参数。
setup(){
const info = inject("info")
inject('info',"设置默认值")
return {
info
}
}
//需要注意的是，provide和inject只能在setup函数中使用，而且provide提供的数据只能在其子组件中使用。如果要在兄弟组件中共享数据，可以使用一个共享的对象或者使用Vuex等状态管理库。
44. 与
1、：只处理基本数据类型的响应式
2、：只处理对象最外层属性的响应式（浅响应式）
3、浅层作用的响应式数据处理：只处理第一层对象的数据，再往下嵌套的数据，操作数据是不起作用的
4、与在某些特殊的应用场景下,是可以提升性能的,前者针对对象,用于浅层作用的响应式数据处理,而后者只处理基本数据类型的响应式,不进行对象的响应式处理。
45. 与
与都是让响应式数据只具备读的能力,后者是浅层次的只读,也就是只对数据对象第一层起作用,深层次的嵌套,当时用()处理时,深层次数据支持被修改
1、: 让一个响应式数据变为只读的 (深只读)，让一个响应式数据变为只读的,接收一个响应式数据,经过加工处理一下,那么新赋值的数据都不允许修改
2、接受一个对象 (不论是响应式还是普通的) 或是一个 ref，返回一个原值的只读代理
3、: 让一个响应式数据变为只读的 (浅只读)，接收一个响应式数据,经过的处理,变成一个只读的,只考虑对象的第一层数据,不可以修改,但是第一层嵌套里的深层数据却支持修改
4、让一个响应式数据变为只读能力(浅只读).
46.vue3中的父传子，子传父
1、父传子：
1、在父组件的子组件标签上通过：传到子组件的数据名=‘需要传递的数据’
2、子组件中通过props进行接收并在模板中使用
2、子传父：
1、子组件触发事件通过setup函数的第二个参数，.emit来实现子传父
47.ref 和 区别? 简单来说, ref通常用来定义基本类型数据, 用来定义对象（或者数组）类型数据
注: ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过转为代理对象。
使用方面: ref 操作数据需要.value取值，模板中不需要。
都不需要.value取值
3. 数据传递方面:
解构赋值会使丢失响应性, 而{ref(1), ref(2)}不会
原理角度:
ref通过.()的get与set来实现响应式（数据劫持）。
通过使用Proxy来实现响应式（数据劫持）, 并通过操作源对象内部的数据。
48.vue3响应式数据的判断？
isRef: 检查一个值是否为一个 ref 对象
: 检查一个对象是否是由 创建的响应式代理
: 检查一个对象是否是由 创建的只读代理
: 检查一个对象是否是由 或者 方法创建的代理
49.如何理解toRef
作用：创建一个 ref 对象，其value值指向另一个对象中的某个属性。
语法：const name = toRef(,‘name’)
应用: 要将响应式对象中的某个属性单独提供给外部使用时。
扩展： 与toRef功能一致，但可以批量创建多个 ref 对象，语法：()
50.vue3有哪些新的组件？
1.
在Vue2中: 组件必须有一个根标签
在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个虚拟元素中
好处: 减少标签层级, 减小内存占用
2.
什么是？—— 是一种能够将我们的组件html结构移动到指定位置的技术。
我是一个弹窗
3.
等待异步组件时渲染一些额外内容，让应用有更好的用户体验
使用步骤：
异步引入组件
import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent(()=>import('./components/Child.vue'))
使用包裹组件，并配置好 与
我是App组件
加载中.....
51.待继续补充
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
欢迎路过的小哥哥小姐姐们提出更好的意见哇~~
