Vue3面试题

1. vue3 新特性有哪些？

1、性能提升

• 响应式性能提升，由原来的 Object.defineProperty 改为基于ES6的 Proxy ，使其速度更快，消除警告。
• 重写了 Vdom ，突破了 Vdom 的性能瓶颈。
• 进行模板编译优化。
• 更加高效的组件初始化

2、更好的支持 typeScript

• 有更好的类型推断，使得 Vue3 把 typeScript 支持得非常好

3、新增Composition API

• Composition API 是 vue3 新增的功能，比 mixin 更强大。它可以把各个功能模块独立开来，提高代码逻辑的可复用性，同时代码压缩性更强

4、新增组件

• Fragment 不再限制 template 只有一个根几点。
• Teleport 传送门，允许我们将控制的内容传送到任意的 DOM 中。
• Supense 等待异步组件时渲染一些额外的内容，让应用有更好的用户体验。

5、Tree-shaking：支持摇树优化

• 摇树优化后会将不需要的模块修剪掉，真正需要的模块打到包内。优化后的项目体积只有原来的一半，加载速度更快

6、Custom Renderer API： 自定义渲染器

• 实现 DOM 的方式进行 WebGL 编程

2. vue3 组合式API生命周期钩子函数有变化吗?

setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内

3. watch 和 watchEffect 的区别？

watch 和 watchEffect 都是监听器，watchEffect 是一个副作用函数。它们之间的区别有：

1. watch 需要传入监听的数据源，而 watchEffect 可以自动手机数据源作为依赖。
2. watch 可以访问倒改变之前和之后的值，watchEffect 只能获取改变后的值。
3. watch 运行的时候不会立即执行，值改变后才会执行，而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。

4. vue中v-if和v-for优先级在vue2和vue3中的区别

实践中不管是vue2或者vue3都不应该把v-if和v-for放在一起使用。

• 在 vue 2.x 中，在一个元素上同时使用 v-if 和 v-for 时， v-for 会优先作用。
• 在 vue 3.x 中， v-if 总是优先于 v-for 生效。
• vue2中v-for的优先级是高于v-if的，放在一起，会先执行循环在判断条件，并且如果值渲染列表中一小部分元素，也得再每次重渲染的时候遍历整个列表，比较浪费资源。
• vue3中v-if的优先级是高于v-for的，所以v-if执行时，它调用相应的变量如果不存在，就会导致异常

5. script setup 是干啥的？

scrtpt setup 是 vue3 的语法糖，简化了组合式 API 的写法，并且运行性能更好。使用 script setup 语法糖的特点：

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

6. vue2.0 和 vue3.0 有什么区别？ 双向绑定更新

vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.defineProperty()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。

vue3 中使⽤了 ES6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。

这⾥是相⽐于vue2版本，使⽤proxy的优势如下

1. defineProperty只能监听某个属性，不能对全对象监听 可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可）

2. 监听数组，不⽤再去单独的对数组做特异性操作,通过Proxy可以直接拦截所有对象类型数据的操作，完美⽀持对数组的监听。

获取props

vue2在script代码块可以直接获取props，vue3通过setup指令传递

API不同

Vue2使⽤的是选项类型API（Options API），Vue3使⽤的是合成型API（Composition API）

建立数据data

vue2是把数据放入data中，vue3就需要使用一个新的setup()方法，此方法在组件初始化构造得时候触发。

生命周期不同

vue2	vue3
beforeCreate	setup() 开始创建组件之前，创建的是data和method
created	setup()
beforeMount	onBeforeMount 组件挂载到节点上之前执行的函数
mounted	onMounted 组件挂载完成后执行的函数
beforeUpdate	onBeforeUpdate 组件更新之前执行的函数
updated	onUpdated 组件更新完成之后执行的函数
beforeDestroy	onBeforeUnmount 组件挂载到节点上之前执行的函数
destroyed	onUnmounted 组件卸载之前执行的函数
activated	onActivated 组件卸载完成后执行的函数
deactivated	onDeactivated

关于v-if和v-for的优先级:

vue2 在一个元素上同时使用 v-if 和 v-for v-for会优先执行

vue3 v-if 总会优先于 v-for生效

7. reactive与ref的区别？

Vue3 中的 ref 和 reactive 是 Vue3 中用于数据管理的两种不同的响应式 API。

ref 用于创建一个包装简单值的响应式引用，例如一个数字、字符串或对象。当 ref 创建一个响应式引用时，它返回一个对象，该对象具有一个 value 属性，该属性指向实际值。当 ref 返回的对象中的 value 属性更改时，组件将自动重新渲染。

reactive 用于创建一个响应式对象，该对象可以包含多个属性和嵌套属性。当使用 reactive 创建响应式对象时，返回的对象是一个代理对象，该对象具有与原始对象相同的属性，并且任何对代理对象属性的更改都将触发组件的重新渲染。