VUE3常见面试题总结大全(看这一篇就够了) |
1、vue2和vue3响应式原理Vue2和Vue3的响应式原理都是基于Object.defineProperty实现的，但是Vue3在性能和功能上做了一些优化和改进 。 Vue2的响应式原理：
Vue3的响应式原理：
2、Vue3带来了什么更快的渲染速度：Vue3使用了Proxy代理对象，可以更快地跟踪数据变化，从而提高渲染速度 。 更小的体积：Vue3的体积比Vue2更小，同时也支持按需加载，减少了页面加载时间 。 更好的TypeScript支持：Vue3对TypeScript的支持更加完善，可以更好地进行类型检查和代码提示 。 更好的组件封装：Vue3引入了Composition API，可以更好地封装组件逻辑，使得组件更加可复用和易维护 。 更好的响应式系统：Vue3的响应式系统进行了重构，可以更好地处理嵌套对象和数组的变化，同时也提供了更多的API来处理响应式数据 。 总之，Vue3带来了更好的性能、更小的体积、更好的TypeScript支持、更好的组件封装和更好的响应式系统，使得开发者可以更加高效地开发Vue应用 。 3、composition API 优势好处特点3.1、为什么要选择组合式API？由于vue2有局限性：
3.2、组合式API解决了什么问题？1、面对vue2的局限性，可以将相同的代码组织在一起，而不会散落在各个角落 3.3、组合式API的优点？
4、setup配置Vue 3中的 setup 函数接收两个参数，分别是 props 和 context 。 1、 2、
注意： 1、这个钩子会在created之前执行 2、内部不存在this 3、如果返回值是一个对象，那么这个对象中的键值对会被合并到created钩子的this中，而在视图上也能访问相应的数据值 5、ref与reactivereactive: (1)、它的响应式是更加‘深层次’的，底层本质是将传入的数据包装成一个Proxy 。 (2)、参数必须是对象或者数组，如果要让对象的某个元素实现响应式时比较麻烦 。需要使用toRefs ref: (1)、函数参数可以是基本数据类型，也可以接受对象类型 (2)、如果参数是对象类型时，其实底层的本质还是reactive,系统会自动根据我们给ref传入的值转换成：reactive (3)、在template中访问，系统会自动添加.value;在js中需要手动.value (4)、ref响应式原理是依赖于 6、计算属性6.1、什么是计算属性：1、computed函数，是用来定义计算属性的，计算属性不能修改 。 2、模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的 。在模板中放入太多的逻辑会让模板过重且难以维护 。 3、计算属性还可以依赖多个Vue 实例的数据，只要其中任一数据变化，计算属性就会重新执行，视图也会更新 。 methods和computed看起来都可以实现我们的功能， 那么为什么还要多一个计算属性这个东西呢？ 原因： 1、计算属性会进行缓存，如果多次使用时，计算属性只会调用一次； 2、而方法会使用一次则调用一次，因此计算属性相对而言性能更好 。 注意： 回调函数必须return，结果就是计算的结果 如果计算属性依赖的数据发生变化，那么会重新计算 不要在计算中中进行异步操作 高级：computed有两个方法，分别是set()和get() 。 计算属性可以直接读取或者修改 如果要实现计算属性的修改操作，那么computed的实参应该是对象
7、watch与watchEffect1、 2、 watch 的工作原理：侦听特定的数据源，并在回调函数中执行副作用 。它默认是惰性的——只有当被侦听的源发生变化时才执行回调，不过，可以通过配置 immediate 为 true 来指定初始时立即执行第一次 。可以通过配置 deep 为 true，来指定深度监视 。 3、immdiate: 默认情况下，侦听器需要 data 后面值改变了才会生效，若需要侦听器一进入页面就生效，那就需要使用 immediate 。 4、deep: 默认情况下，侦听器只会监听数据本身的改变，若要进行深度监听，那就需要使用 deep 。 5、immediate 和 deep 配置在第三个参数对象里 。 第一个参数：监听谁，第二个参数：回调函数，第三个参数：配置对象 7.1、watchEffectwatchEffect 函数的特点：
1、 2、 3、简单来说，watchEffect 是 Vue3 中的一个响应式 API，它允许你监听响应式状态的变化，并在其发生变化时触发副作用函数 。这个特性非常有用，在我们需要对响应式数据进行操作的时候，我们可以在监听到变化后马上做出反应 。 8、provide与inject1、provide和inject是一对新的API，用于在父组件中提供数据，然后在子组件中注入数据 。 2、provide：是一个对象，或者是一个返回对象的函数 。里面呢就包含要给子孙后代的东西，也就是属性和属性值 。 3、inject：一个字符串数组，或者是一个对象 。属性值可以是一个对象，包含from和default默认值 。 //在父组件中，使用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等状态管理库 。9.vue3新的生命周期钩子Vue3中新增了两个生命周期钩子函数：
除此之外，Vue3还对原有的生命周期钩子函数进行了优化和改进，比如：
10、自定义hook函数1、以函数形式抽离一些可复用的方法像钩子一样挂着，随时可以引入和调用，实现高内聚低耦合的目标； 2、将可复用功能抽离为外部JS文件 3、函数名/文件名以use开头，形如：useXX 4、引用时将响应式变量或者方法显式解构暴露出来如：const {nameRef，Fn} = useXX() （在setup函数解构出自定义hooks的变量和方法） 10.1、Vue3自定义Hooks和Vue2时代Mixin的关系：Mixin不足 在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具 。但是，他们有几个问题： 1、Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性 。 2、可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性 。 10.2、vue3自定义hooks和vue2中mixin的区别和比较？1、Mixin难以追溯的方法与属性！Vue3自定义Hooks却可以 2、无法向Mixin传递参数来改变逻辑，但是Vue3自定义Hooks却可以： 3、Mixin同名变量会被覆盖，Vue3自定义Hook可以在引入的时候对同名变量重命名 11、toRef和toRefstoRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref，而且它既保留了响应式，也保留了引用，也就是你从 reactive 复制过来的属性进行修改后，除了视图会更新，原有 ractive 里面对应的值也会跟着更新，如果你知道 浅拷贝 的话那么这个引用就很好理解了，它复制的其实就是引用 + 响应式 ref 不加 s 和 加 s 的区别就是这样： toRef: 复制 reactive 里的单个属性并转成 ref toRefs: 复制 reactive 里的所有属性并转成 ref 12、shallowReactive 与 shallowRef1、shallowRef：只处理基本数据类型的响应式 2、shallowReactive：只处理对象最外层属性的响应式（浅响应式） 3、浅层作用的响应式数据处理：只处理第一层对象的数据，再往下嵌套的数据，操作数据是不起作用的 4、 13、readonly 与 shallowReadonlyreadonly与shallowReadonly都是让响应式数据只具备读的能力,后者是浅层次的只读,也就是只对数据对象第一层起作用,深层次的嵌套,当时用shallowReadonl()处理时,深层次数据支持被修改 1、readonly: 让一个响应式数据变为只读的 (深只读)，让一个响应式数据变为只读的,接收一个响应式数据,经过 2、接受一个对象 (不论是响应式还是普通的) 或是一个 3、shallowReadonly: 让一个响应式数据变为只读的 (浅只读)，接收一个响应式数据,经过 4、让一个响应式数据变为只读能力(浅只读) 14、toRaw与markRaw转换为普通数据和标记属性非响应式
toRaw: 作用： 将一个由 reactive 生成的响应式对象转为普通对象 使用场景： 1、用于读取响应式对象对应的普通对象 2、对这个普通对象的所有操作，不会引起页面更新 。 markRaw: 作用：标记一个对象，使其永远不会再成为响应式对象 应用场景： 1、有些值不应被设置为响应式的，例如复杂的第三方类库等 2、当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能 15、customRef 自定义ref使用1、customRef：返回一个ref对象，可以显示的控制依赖追踪和触发响应 16、vue3中的父传子，子传父1、父传子： 1、在父组件的子组件标签上通过：传到子组件的数据名=‘需要传递的数据’ 2、子组件中通过props进行接收并在模板中使用 2、子传父： 1、子组件触发事件通过setup函数的第二个参数，context.emit来实现子传父 17、响应式数据的判断isRef、isReactive、isReadonly、isProxy1、isRef：判断一个值是否为一个 ref 对象 2、isReactive：判断一个对象是否是由 reactive创建的响应式代理 3、isReadonly：判断一个对象是否是由 readonly 创建的只读代理 4、isProxy：判断一个对象是否是由 reactive 或 readonly 创建的代理 18、vue3中使用插槽？1、插槽 2、理解：
3、具名插槽：具有名字的 4、作用域插槽：能够接受参数的插槽就被称为了 19、vue3中路由守卫onBeforeRouteLeave，onBeforeRouteUpdate？vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航 。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的 。 1、vue3 router中新增的onBeforeRouteLeave方法表示添加一个导航守卫，此方法会在组件将要离开的时候触发，类似于以前的beforeRouteLeave，但onBeforeRouteLeave可以在任何组件中使用，当组件被卸载的时候，导航守卫也将被移除 。当我们使用router执行跳转或返回的时候，就会触发onBeforeRouteLeave方法 。 2、 onBeforeRouteUpdate：添加一个导航守卫，在当前位置即将更新时触发 。 import { onBeforeRouteUpdate } from "vue-router";
onBeforeRouteUpdate(to => {
console.log(to, "路由变动");
});
?3、onBeforeRouteLeave：添加一个导航守卫，在当前位置的组件将要离开时触发 。 //使用组件内守卫，对离开页面事件做一些操作，
beforeRouteLeave(to, from, next){
if(from.path=='/b'){ //当前页面路由
next({replace: true,redirect: '/a'}); //目标路由 重定向
}else {
next()
}
}20、vue3中使用vuex useStore？1、在Vue3中，可以使用 使用`useStore`函数的步骤如下：
?
1. 在组件中导入`useStore`函数和`createStore`函数 。
?
import { useStore, createStore } from 'vuex'
?
2. 创建一个Vuex store实例 。
?
const store = createStore({
state: {
count: 0
},
mutations: {
increment(state) {
state.count++
}
}
})
?
3. 在组件中使用`useStore`函数来获取Vuex store实例 。
?
export default {
setup() {
const store = useStore()
return {
store
}
}
}
?
?
4. 在组件中使用Vuex store实例 。
?
<template>
<div>
<p>Count: {{ store.state.count }}</p>
<button @click="store.commit('increment')">Increment</button>
</div>
</template>
?
<script>
import { useStore } from 'vuex'
?
export default {
setup() {
const store = useStore()
return {
store
}
}
}
</script>21、vue3中使用vue-router，useRoute和useRouter ？1、在Vue.js中， 2、useRoute相当于是vue2中的this.$route import { useRoute } from 'vue-router'
export default {
setup() {
const route = useRoute()
console.log(route.path) // 当前路由路径
return {
route
}
}
}3、useRouter相当于是vue2中的this.$router，可以使用useRouter进行路由跳转 import { useRouter } from 'vue-router'
export default {
setup() {
const router = useRouter()
console.log(router.currentRoute.value.path) // 当前路由路径
?
return {
router
}
}
}4、区别：
22、vue3单文件组件 script setup语法？1、<script setup>是在单文件组件 (SFC) 中使用组合式 API的编译时语法糖 。相比于普通的 <script> 语法，它具有更多优势
23、vue3中nextTick使用1、nextTick 是将回调推迟到下一个 DOM 更新周期之后执行 。在更改了一些数据以等待 DOM 更新后立即使用它 2、异步使用： import { nextTick } from 'vue'
//异步使用
setup() {
const message = ref('Hello!')
const changeMessage = async newMessage => {
message.value = newMessage
await nextTick()
console.log('Now DOM is updated')
}
}
//基本使用
nextTick(()=>{
...
})24、原型绑定全局属性1、通过config.globalProperties 2、通过provide注入：在应用实例上设置一个可以被注入到应用范围内所有组件中的值 。当组件要使用应用提供的 provide 值时，必须用 inject 来接收 。 3、在main.js中全局引入，然后在组件中获取 25、vue3中使用keeplive ？1、 2、 和 3、使用： 1、配置app.vue 使用v-if判断是否缓存 2、添加meta属性，在路由元信息中添加缓存的标识 3、实现页面的部分刷新 26、element-plus组件库vant3.0ant27、vue3中废弃了过滤器1、过滤器：过滤器可以通俗理解成是一个特殊的方法，用来加工数据的2、vue3要精简代码，并且filter功能重复，filter能实现的功能，methods和计算属性基本上也可以实现 。所以就干脆把filter这方面的vue源码给删掉，这样的话，更加方便维护 。 总结到此这篇关于VUE3常见面试题总结的文章就介绍到这了,更多相关VUE3常见面试题内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！ |
