2023前端面试必备问题（vue3）

1、 Vue2.0 和 Vue3.0 有什么区别？

1. vue2和vue3双向数据绑定原理发生了改变。
   vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 ，结合发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。

2. Vue3支持碎片(Fragments)，就是说在组件中可以拥有多个根节点。

3. Vue2与Vue3 最大的区别 — Vue2使用选项类型API，Vue3合成型API。旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）stup(){}来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。

4. 建立数据 data。Vue2把数据放在data中，在Vue3中，我们就需要使用一个新的setup()方法，此方法在组件初始化构造的时候触发。

5. 使用以下三步来建立反应性数据：

   1. 从vue引入reactive

   2. 使用reactive()方法来声名我们的数据为响应性数据

   3. 使用setup()方法来返回我们的响应性数据，从而我们的template可以获取这些响应性数据

 2. vue3的带来的好处

1.  打包大小减少41%

2. 初次渲染快55%, 更新渲染快133%

3. 内存减少54%

4. 重写虚拟DOM的实现和Tree-Shaking

5. 使用Proxy代替defineProperty实现响应式

6. Vue3可以更好的支持TypeScript

7. 移除keyCode作为 v-on 的修饰符，同时也不再支持config.keyCodes

8. 移除v-on.native修饰符

9. 移除过滤器（filter）
   过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” 的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

10. 新的生命周期钩子
    beforeDestroy改名为 beforeUnmount
destroyed改名为 unmounted

    Vue3.0与Vue2.x中钩子对应关系如下：

    beforeCreate===>setup()

    created=======>setup()

    beforeMount ===>onBeforeMount

    mounted=======>onMounted

    beforeUpdate===>onBeforeUpdate

    updated =======>onUpdated

    beforeDestroy ==>onBeforeUnmount

    destroyed =====>onUnmounted

11. data 选项应始终被声明为一个函数