相关推荐recommended
【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...)
作者:mmseoamin日期:2023-11-30
前端vue3面试题 2023最新面试实录vue3.0,高频10问(持续更新…)

文章目录

        • 前端vue3面试题 2023最新面试实录vue3.0,高频10问(持续更新...)
        • 1问: vue3和vue2有哪些不同?
        • 2问: Vue3.0中的响应式原理是什么?vue2的响应式原理是什么?
          • vue2.x的响应式原理
          • vue3.0的响应式原理
          • 3问: 有哪些vue3响应性判断函数?
          • 4问: setup函数怎么用?
          • 5问: Composition API 和 React Hook 很像, 它们有什么区别?
            • reack Hook的限制:
            • Composition API 相比于 React Hook优点:
            • 6问: ref 和 reactive 区别?
            • 7问: watch 和 watchEffect
            • 8问: vue3的Composition API 相比于2的Options API, 有什么优势吗?
            • 9问: 什么是SSR(服务端渲染),原理是什么? 好处有哪些?
            • 10问: 还能想到Vue3其他不同于vue2的细节点吗?(考察宽度, 使用度)
              1问: vue3和vue2有哪些不同?
              1. 响应式系统的重构,使用proxy替换Object.defineProperty属性,优势:
                • Proxy可直接监听 对象添加/删除属性;
                • Proxy直接监听 数组的变化
                • Proxy监听的目标是对象本身,不需要像Object.defineProperty那样遍历每个属性,有一定的性能提升
                • 新增组合式API(Composition API),更好的逻辑重用和代码组织:
                  • setup配置
                  • ref与reactive
                  • watch与watchEffect
                  • provide与inject
                  • 重构虚拟 DOM, diff算法
                  • 生命周期更名
                    • 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
              
              1. 新的内置组件
                • Fragment
                • Teleport
                • Suspense
                • 移除的部分:
                  • 移除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(反射): 对源对象的属性进行操作。
                    new Proxy(data, {
                       // 拦截读取属性值
                       get (target, prop) {
                           return Reflect.get(target, prop)
                       },
                       // 拦截设置属性值或添加新属性
                       set (target, prop, value) {
                           return Reflect.set(target, prop, value)
                       },
                       // 拦截删除属性
                       deleteProperty (target, prop) {
                           return Reflect.deleteProperty(target, prop)
                       }
                    })
                    proxy.name = 'tom'   
                    
                    • 存在问题: 解决了vue2响应式的短板, 但是也存在兼容性问题(新特性, 老浏览器不支持)
                      3问: 有哪些vue3响应性判断函数?
                      • isRef: 检查一个值是否为一个 ref 对象

                        【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...),【前端vue3面试题】2023最新面试实录vue3.0,高频10问(持续更新...),第1张

                      • isReactive: 检查一个对象是否是由 reactive 创建的响应式代理

                      • isReadonly: 检查一个对象是否是由 readonly 创建的只读代理

                      • isProxy: 检查一个对象是否是由 reactive 或者 readonly 方法创建的代理

                        4问: setup函数怎么用?
                        • setup使用:
                           setup(props, context) {
                              /*** Setup props */
                              // 请注意如果你解构了 props 对象,解构出的变量将会丢失响应性, 推荐使用props.title形式
                              console.log(props.title)
                              // 将 `props` 转为一个其中全是 ref 的对象,然后解构
                              const { title } = toRefs(props)
                              // `title` 是一个追踪着 `props.title` 的 ref
                              console.log(title.value)
                              // 或者,将 `props` 的单个属性转为一个 ref
                              const title = toRef(props, 'title')
                              
                              /*** Setup 上下文 */
                              // 透传 Attributes(非响应式的对象,等价于 $attrs)
                              console.log(context.attrs)
                              // 插槽(非响应式的对象,等价于 $slots)
                              console.log(context.slots)
                              // 触发事件(函数,等价于 $emit)
                              console.log(context.emit)
                              // 暴露公共属性(函数)
                              console.log(context.expose)
                            }
                          
                          • 注意点, 当使用