• 分享几个常问的vue3面试题!


    一、说一下Vue3的新特性?

        1、新增组合API

            常用的有setup、reactive、ref、toRefs

        2、生命周期变化

            创建:

                beforeCreate和created被setup替代了

            挂载:

                onBeforeMount

                onMounted

            更新:

                onBeforeUpdate

                onUpdated

            销毁:

                onBeforeUnmount

                onUnmounted

        3、响应式原理变化

            用Proxy代理配合Reflect反射代替了v2中的Object.defineProperty()实现数据的响应式

        4、更好的支持TS

            因为源码用TS写的

        5、新增内置组件

            Fragment(片段)、Teleport(瞬移)、Suspense(不确定)

        6、新的脚手架工具vite

        7、可以设置多个根节点

        8、重写虚拟DOM的实现和Tree-Shaking,渲染速度更快、打包体积更小

        9、移除了一些东西

            移除v-on的键盘修饰符

            移除过滤器filter

    二、说一下reactive和ref的区别?

        ref:

            通过Object.defineProperty()给value的属性添加getter、setter来实现响应式

            一般用来处理基本数据类型,也能处理复杂数据类型,只不过内部会自动将对象转换为reactive的代理对象

            在js中要加.value,在模版中不需要

        reactive:

            通过Proxy对目标对象中的所有属性动态地进行数据劫持,并通过Reflect操作对象内部数据来实现响应式

            一般用来处理复杂数据类型,会实现递归深度响应式

    三、说一下Vue3的响应式原理?

        vue3采用数据代理+数据劫持+发布订阅模式的方法。

        在初始化vue实例时,通过Proxy进行数据代理,用Proxy对象来代理目标对象,

        并且对目标对象中的所有属性动态地进行数据劫持,动态地指定一个getter、setter,并通过Reflect操作对象内部数据。

        当Proxy对象属性或Proxy数组元素发生变化时,会触发Proxy属性的setter方法,然后通过Reflect操作目标对象属性,同时触发它Dep实例的notify方法进行依赖分发,通知所有依赖的Watcher实例执行内部回调函数。

        最后会触发renderWatcher回调,会重新执行render函数,重新对比新旧虚拟DOM,重新渲染页面。

        当读取Proxy对象属性时,会触发Proxy属性的getter方法,然后触发它Dep实例的depend方法进行依赖收集。

        

    四、说一下组合式API写法对比选项式API写法的优点?

        组合式API写法将组件的逻辑按照功能进行划分,将相关逻辑放在一起,使得代码更加清晰和易于维护

    五、说一下常用的一些组合API及作用?

        ref:定义一个基础数据类型的响应式数据

        reactive:定义一个复杂数据类型的响应式数据

        toRefs:把响应式数据对象中的所有属性变成ref对象,常用于解构响应式对象属性

        

        computed:计算属性

        watch:变化时监听

        watchEffect:立即监听

  • 相关阅读:
    Git从本地库撤销已经添加的文件或目录
    【LVGL事件(Events)】事件代码
    企典软件:一套系统解决85%以上企业管理难题
    人人都会Kubernetes(二):使用KRM实现快速部署服务,并且通过域名发布
    [附源码]计算机毕业设计ssm校园二手交易平台
    SSH在桌面会话启动应用程序
    【UE5】创建蓝图
    OpenCV(十三):图像中绘制直线、圆形、椭圆形、矩形、多边形和文字
    【附源码】Python计算机毕业设计企业信息化平台协同办公管理系统
    对内 DDD 对外 API 之—对外 API 的设计理念
  • 原文地址:https://blog.csdn.net/m0_74802419/article/details/134298379