【前端vue3面试题】2024最新面试实录vue3(2)，最新前端大厂高频面试题

* watch与watchEffect
* provide与inject

3. 重构虚拟 DOM, diff算法
4. 生命周期更名
   • beforeDestroy改名为 beforeUnmount
   • destroyed改名为 unmounted

// Vue3.0也提供了 Composition API 形式的生命周期钩子，与Vue2.x中钩子对应关系如下：

beforeCreate ===> setup()
created      ===> setup()
beforeMount  ===> onBeforeMount
mounted      ===> onMounted
beforeUpdate ===> onBeforeUpdate
updated      ===> onUpdated
beforeUnmount===> onBeforeUnmount
unmounted    ===> onUnmounted

4. 新的内置组件
   • Fragment
   • Teleport
   • Suspense
5. 移除的部分:
   • 移除v-on.keyCode修饰符，同时也不再支持config.keyCodes
   • 移除v-on.native修饰符,
   • 移除过滤器（filter）
   • 不再建议使用mixins, 组合式函数本身就是更好的mixin代替品

2问: Vue3.0中的响应式原理是什么？vue2的响应式原理是什么？

vue2.x的响应式原理

• 对象类型：通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）
• 数组类型：通过重写更新数组的一系列方法来实现拦截。（对数组的变更方法进行了包裹）。
• 存在问题:
  • 新增属性、删除属性, 界面不会更新。
  • 直接通过下标修改数组, 界面不会自动更新。
• 追问: vue2如何解决这些问题? 答: $set

vue3.0的响应式原理

• 通过Proxy（代理）: 拦截对象中任意属性的变化, 包括：属性值的读写、添加、删除等。
• 通过Reflect（反射）: 对源对象的属性进行操作