Vue3基础面试题

本文总结了 Vue3 框架相关的面试题

Vue3 如何实现响应式

vue2 是针对对象是通过 Object.defineProperty 来实现的，针对数组是通过重写数组的原型链上的方法实现的 push ，pop ，shift ，unshift ，splice ，sort ，reverse，这种实现方案的不足之处有以下两点

1. 对于对象，vue 只能针对初始化的对象，或者通过 Vue.set / this.$set 来对新的属性监听，直接过 obj.[key] 来赋值则无法实现监听，还有也无法监听到 delete obj.key （删除对象属性）。
2. 对于数组，如果直接修改数组下标，也无法实现响应式更新。

Vue3 通过 JS 自带的 Proxy 对象 来实现的，可以实现 vue2 的监听对象和数组的功能，对 vue 的不足之处，也得到了完美的解决

查看更新 Vue3 实现的细节，可以阅读 Vue3 响应式原理

watch 和 watchEffect 的区别？

watch 可以获取到访问前后都数据，watchEffect 只能获取改变后的数据。

watch 默认不立即执行（可以通过 immediate 配置），watchEffect 立即执行。

watch 能设置需要指定监听的数据属性，watchEffect 能监听回调函数里面用到的所有数据。

v-if 和 v-for 优先级转变？

在 vue2 中，v-for 优先级更高，而在 vue3 中，v-if 的优先级更高。

setup 函数是做什么的？

script setup 是 vue3 的语法糖，是 composition api 的简化写法。

• 属性和方法可以直接使用，无需返回。
• 引入组件会自动注册组件。
• 通过 defineProps 接收父组件传递的值。
• 可以通过 useAttrs 获取属性，useSlots 获取插槽，defineEmits 获取自定义事件。
• 默认不会对外暴露属性，不过可以通过 defineExpose 来实现。

## ref 和 reactive 有什么区别？

ref 和 reactive 是 vue3 的新 api，用来创建响应式数据。

• template 模板使用的数据和方法，都需要通过 setup 函数 return 出去才能使用。
• ref 创建的响应式数据，可以在模板中直接使用，js 中需要使用 .value 使用。
• ref 函数可以接收原始数据类型和引用数据类型，reactive 只能接收引用数据类型。
• ref 底层是用 reactive 来实现，使它支持基础数据类型。