Vue 3.0 相关面试题及答案

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

响应式系统的重新配置，使用代理替换对象.define属性，使用代理优势：

• 可直接监控阵列类型的数据变化
• 监听的目标是对象本身，不需要像Object.defineProperty那样遍历每个属性，有一定的性能提升
• 可拦截应用、拥有密钥、有等13种方法，以及Object.define属性没有办法
• 直接添加对象属性/删除
  • 新增组合API，更好的逻辑重用和代码组织
  • 重构虚拟 DOM
• 模板编译时间优化，将一些静态节点编译成常量
• slot优化，采取槽编译成懒人功能，拿槽渲染的决定留给子组件
• 在模板中提取和重用内联事件（最初，每次渲染时都会重新生成内联函数）
  • 代码结构调整，更方便树摇动，使其更小
  • 使用打字脚本替换流

二、Vue3带来了什么改变？

1. 性能的提升
   • 打包大小减少41%
   • 初次渲染快55%, 更新渲染快133%
   • 内存减少54%
2. 源码的升级
   • 使用Proxy代替defineProperty实现响应式
   • 重写虚拟DOM的实现和Tree-Shaking
3. 拥抱TypeScript
   • Vue3可以更好的支持TypeScript
4. 新的特性

   1. Composition API（组合API）

      • setup配置
      • ref与reactive
      • watch与watchEffect
      • provide与inject

   2. 新的内置组件

      • Fragment
      • Suspense
      • Teleport

   3. 其他改变

      • 新的生命周期钩子
      • data 选项应始终被声明为一个函数
      • 移除keyCode支持作为 v-on 的修饰符

   4. vue3还有哪些其他改变？

      • data选项应始终被声明为一个函数。

      • 过度类名的更改：

            // vue2.x写法
            .v-enter {
              opacity: 0;
            }
            .v-leave {
              opacity: 1;
            }
            
            // Vue3.x写法
            .v-enter-from {
              opacity: 0;
            }
        
            .v-leave-from {
              opacity: 1;
            }
        

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

      • 移除v-on.native修饰符

            // 父组件中绑定事件
            <data-component
              v-on:close="handlerClose"
              v-on:click="handlerNativeClick"
            />
        

            // DataComponent.vue
            <template>
                <div>
                    <button v-on:click="$emit('click')">click</button>
                    <button v-on:click="$emit('close')">close</button>
                </div>
            </template>
            <script>
              export default {
               // 这里没有接收 click 事件会被自动添加到`<div>`中
               // 所以当子组件被点击时，就会触发`click`事件。
                emits: ['close']
              }
            </script>
        

   5. 移除过滤器（filter）

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