台州知名网站,代理域名网站的公司,制作简历的免费网站,三河做网站Composition API 可以说是Vue3的最大特点#xff0c;那么为什么要推出Composition Api#xff0c;解决了什么问题#xff1f;
通常使用Vue2开发的项目#xff0c;普遍会存在以下问题#xff1a;
代码的可读性随着组件变大而变差每一种代码复用的方式#xff0c;都存在缺…Composition API 可以说是Vue3的最大特点那么为什么要推出Composition Api解决了什么问题
通常使用Vue2开发的项目普遍会存在以下问题
代码的可读性随着组件变大而变差每一种代码复用的方式都存在缺点TypeScript支持有限
以上通过使用Composition Api都能迎刃而解 以下面试题汇总自2022金三银四-vue3面试题汇总文章
一、Options Api与Composition Api的区别
1、Options Api选项API即以vue为后缀的文件通过定义methodscomputedwatchdata等属性与方法共同处理页面逻辑。 用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而当组件变得复杂导致对应属性的列表也会增长这可能会导致组件难以阅读和理解。
2、Composition API 中组件根据逻辑功能来组织的一个功能所定义的所有 API 会放在一起 更加的 高内聚低耦合 。
3、Composition Api 相对Options Api的两大优点
逻辑组织 Options Api在处理一个大型的组件时内部的逻辑点容易碎片化可能同时存在于method,computed,watch等API中我们必须不断地“跳转”相关代码的选项块这种碎片化使得理解和维护复杂组件变得困难。Composition Api将某个逻辑关注点相关的代码全都放在一个函数里这样当需要修改一个功能时就不再需要在文件中跳来跳去。 逻辑复用 在vue2.0中当混入多个mixin会存在两个非常明显的问题命名冲突、数据来源不清晰而Composition Api可以通过编写多个hooks函数就很好的解决了
总结
在逻辑组织和逻辑复用方面Composition API是优于Options API因为Composition API几乎是函数会有更好的类型推断。Composition API 对 tree-shaking 友好代码也更容易压缩Composition API中见不到this的使用减少了this指向不明的情况如果是小型组件可以继续使用Options API也是十分友好的 二、Vue3.0性能提升主要是通过哪几方面体现的
1、编译阶段优化
回顾Vue2我们知道每个组件实例都对应一个 watcher 实例它会在组件渲染的过程中把用到的数据property记录为依赖当依赖发生改变触发setter则会通知watcher从而使关联的组件重新渲染。
因此Vue3在编译阶段做了进一步优化
① diff算法优化
vue3在diff算法中相比vue2增加了静态标记其作用是为了会发生变化的地方添加一个flag标记下次发生变化的时候直接找该地方进行比较。
② 静态提升
Vue3中对不参与更新的元素会做静态提升只会被创建一次在渲染时直接复用。免去了重复的创建操作优化内存。
没做静态提升之前未参与更新的元素也在render函数内部会重复创建阶段。 做了静态提升后未参与更新的元素被放置在render 函数外每次渲染的时候只要取出即可。同时该元素会被打上静态标记值为-1特殊标志是负整数表示永远不会用于 Diff。
③ 事件监听缓存
默认情况下绑定事件行为会被视为动态绑定没开启事件监听器缓存所以每次都会去追踪它的变化。开启事件侦听器缓存后没有了静态标记。也就是说下次diff算法的时候直接使用。
④ SSR优化
当静态内容大到一定量级时候会用createStaticVNode方法在客户端去生成一个static node这些静态node会被直接innerHtml就不需要创建对象然后根据对象渲染。
2、源码体积
相比Vue2Vue3整体体积变小了除了移出一些不常用的API最重要的是Tree shanking。
任何一个函数如ref、reavtived、computed等仅仅在用到的时候才打包没用到的模块都被摇掉打包的整体体积变小。
3、响应式系统
vue2中采用 defineProperty来劫持整个对象然后进行深度遍历所有属性给每个属性添加getter和setter实现响应式。
vue3采用proxy重写了响应式系统因为proxy可以对整个对象进行监听所以不需要深度遍历。
可以监听动态属性的添加可以监听到数组的索引和数组length属性可以监听删除属性 三、Vue3.0里为什么要用 Proxy API 替代 defineProperty API
1、vue2中采用 defineProperty来劫持整个对象然后进行深度遍历所有属性给每个属性添加getter和setter实现响应式。但是存在以下的问题
检测不到对象属性的添加和删除数组API方法无法监听到需要对每个属性进行遍历监听如果嵌套对象需要深层监听造成性能问题
2、proxy监听是针对一个对象的那么对这个对象的所有操作会进入监听操作。
总结
Object.defineProperty只能遍历对象属性进行劫持Proxy直接可以劫持整个对象并返回一个新对象我们可以只操作新的对象达到响应式目的Proxy可以直接监听数组的变化push、shift、spliceProxy有多达13种拦截方法,不限于apply、ownKeys、deleteProperty、has等等这是Object.defineProperty不具备的
四、Vue3.0响应式原理
vue3 响应式是使用 ES6 的 proxy 和 Reflect 相互配合实现数据响应式解决了 vue2 中视图不能自动更新的问题。
proxy 是深度监听所以可以监听对象和数组内的任意元素从而可以实现视图实时更新。
详细的原理可查看vue3.0 响应式原理(超详细)
总结响应式大致分为三个阶段:
初始化阶段初始化阶段通过组件初始化方法形成对应的proxy对象然后形成一个负责渲染的effect。get依赖收集阶段通过解析template替换真实data属性来触发get,然后通过stack方法通过proxy对象和key形成对应的deps将负责渲染的effect存入deps。这个过程还有其他的effect比如watchEffect存入deps中 。set派发更新阶段当我们 this[key] value 改变属性的时候首先通过trigger方法通过proxy对象和key找到对应的deps然后给deps分类分成computedRunners和effect,然后依次执行如果需要调度的直接放入调度。 Proxy只会代理对象的第⼀层那么Vue3⼜是怎样处理这个问题的呢 判断当前Reflect.get的返回值是否为Object如果是则再通过 reactive ⽅法做代理 这样就实现了深度观测。 监测数组的时候可能触发多次get/set那么如何防⽌触发多次呢 我们可以判断key是否为当前被代理对象target⾃身属性也可以判断旧值与新值是否相等只有满⾜以上两个条件之⼀时才有可能执⾏trigger。 五、说说Vue 3.0中Treeshaking特性举例说明一下
1、是什么
Tree shaking 是一种通过清除多余代码方式来优化项目打包体积的技术专业术语叫 Dead code elimination简单来讲就是在保持代码运行结果不变的前提下去除无用的代码
在Vue2中无论我们使用什么功能它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的捆绑程序无法检测到该对象的哪些属性在代码中被使用到。
而Vue3源码引入tree shaking特性将全局 API 进行分块。如果您不使用其某些功能它们将不会包含在您的基础包中
2、如何做
Tree shaking是基于ES6模板语法import与exports主要是借助ES6模块的静态编译思想在编译时就能确定模块的依赖关系以及输入和输出的变量。
Tree shaking无非就是做了两件事
编译阶段利用ES6 Module判断哪些模块已经加载判断那些模块和变量未被使用或者引用进而删除对应代码
3、作用好处?
通过Tree shakingVue3给我们带来的好处是
减少程序体积更小减少程序执行时间更快便于将来对程序架构进行优化更友好 以下面试题汇总自「2022」打算跳槽涨薪必问面试题及答案——VUE3 篇
六、Vue3 新特性有哪些
1、性能提升
响应式性能提升由原来的 Object.defineProperty 改为基于ES6的 Proxy 使其速度更快重写了 Vdom (diff算法优化增加静态标志)进行模板编译优化静态提升不参与更新的元素只被创建一次更加高效的组件初始化
2、更好的支持 typeScript
Vue.js 2.x 选用 Flow 做类型检查来避免一些因类型问题导致的错误但是 Flow 对于一些复杂场景类型的检查支持得并不好。Vue.js 3.0 抛弃了 Flow 使用 TypeScript 重构了整个项目TypeScript 提供了更好的类型检查能支持复杂的类型推断
3、新增 Composition API
Composition API 是 vue3 新增的功能比 mixin 更强大。它可以把各个功能模块独立开来提高代码逻辑的可复用性同时代码压缩性更强。
在 Vue3 中定义 methods、watch、computed、data数据等都放在了 setup() 函数中。
setup()函数会在created()生命周期之前执行。执行顺序为beforeCreate setup created
4、新增组件
Fragment 不再限制 template 只有一个根节点。Teleport 传送门允许我们将控制的内容传送到任意的 DOM 中。Suspense 等待异步组件时渲染一些额外的内容让应用有更好的用户体验。
5、Tree-shaking支持摇树优化
摇树优化后会将不需要的模块修剪掉真正需要的模块打到包内。优化后的项目体积只有原来的一半加载速度更快。
6、Custom Renderer API 自定义渲染器
实现 DOM 的方式进行 WebGL 编程。 七、vue3 组合式API生命周期钩子函数有变化吗
setup 是围绕 beforeCreate 和 created 生命周期钩子运行的所以不需要显示的定义它们。其他的钩子都可以编写到 setup 内。
值得注意的是组合式API中的钩子函数通过在生命周期钩子前面加上 on 来访问组件的生命周期钩子。需要注册并且只能在 setup 期间同步使用因为它们依赖于内部的全局状态来定位当前组件实例。
下图是选项式API 和 组合式API 生命周期钩子对比 八、watch 和 watchEffect 的区别
watch 和 watchEffect 都是监听器watchEffect 是一个副作用函数。它们之间的区别有 watch 既要指明监视的数据源也要指明监视的回调。 而 watchEffect 可以自动监听数据源作为依赖。不用指明监视哪个数据监视的回调中用到哪个数据那就监视哪个数据。 watch 可以访问改变之前和之后的值watchEffect 只能获取改变后的值。 watch 运行的时候不会立即执行值改变后才会执行而 watchEffect 运行后可立即执行。这一点可以通过 watch 的配置项 immediate 改变。 watchEffect有点像 computed 但 computed 注重的计算出来的值回调函数的返回值 所以必须要写返回值。而 watcheffect注重的是过程回调函数的函数体所以不用写返回值。 watch与 vue2.x中 watch 配置功能一致但也有两个小坑 监视 reactive 定义的响应式数据时oldValue 无法正确获取强制开启了深度监视deep配置失效监视 reactive 定义的响应式数据中某个属性时deep配置有效。
let sum ref(0)
let msg ref(你好啊)
let person reactive({name:张三,age:18,job:{j1:{salary:20}}
})//情况1监视ref定义的响应式数据
watch(sum,(newValue, oldValue){console.log(sum变化了, newValue, oldValue),(immediate:true)
})
//情况2监视多个ref定义的响应式数据
watch([sum, msg],(newValue, oldValue){console.log(sum或msg变化了, newValue, oldValue),(immediate:true)
})
//情况3监视reactive定义的响应式数据
//若watch监视的是reactive定义的响应式数据则无法正确获得oldValue且强制开启了深度监视。
watch(person,(newValue, oldValue){console.log(person变化了, newValue, oldValue),(immediate:true,deep:false) //此处的deep配置不再生效。
})
//情况4监视reactive所定义的一个响应式数据中的某个属性
watch(()person.name,(newValue, oldValue){console.log(person.name变化了, newValue, oldValue)
})
//情况5监视reactive所定义的一个响应式数据中的某些属性
watch([()person.name, ()person.age],(newValue, oldValue){console.log(person.name或person.age变化了, newValue, oldValue)
})
//特殊情况
watch(()person.job,(newValue, oldValue){console.log(person.job变化了, newValue, oldValue)
}, {deep:true}) 九、v-if 和 v-for 的优先级哪个高
在 vue2 中 v-for 的优先级更高但是在 vue3 中优先级改变了。v-if 的优先级更高。 十、script setup 是干啥的
scrtpt setup 是 vue3 的语法糖简化了组合式 API 的写法并且运行性能更好。使用 script setup 语法糖的特点
属性和方法无需返回可以直接使用。引入组件的时候会自动注册无需通过 components 手动注册。使用 defineProps 接收父组件传递的值。useAttrs 获取属性useSlots 获取插槽defineEmits 获取自定义事件。默认不会对外暴露任何属性如果有需要可使用 defineExpose 。
十一、Vue2/Vue3组件通信方式
Vue3的8种和Vue2的12种组件通信值得收藏
Vue3通信方式
props$emitexpose / ref$attrsv-modelprovide / inject原理原型链Vuex/piniamitt
Vue2.x 组件通信共有12种
props$emit / v-on.syncv-modelrefchildren/children / children/parentattrs/attrs / attrs/listenersprovide / injectEventBusVuex$rootslot
十二、ref与reactive的区别
ref与reactive 是 Vue3 新推出的主要 API 之一它们主要用于响应式数据的创建。
template 模板中使用的数据和方法都需要通过 setup 函数 return 出去才可以被使用。ref 函数创建的响应式数据在模板中可以直接被使用在 JS 中需要通过 .value 的形式才能使用。ref 函数可以接收原始数据类型与引用数据类型。reactive 函数只能接收引用数据类型。ref 底层还是使用 reactive 来做ref 是在 reactive 上在进行了封装增强了其能力使它支持了对原始数据类型的处理。在 Vue3 中 reactive 能做的ref 也能做reactive 不能做的ref 也能做。
十三、EventBus与mitt区别
Vue3.0通关秘籍
Vue2 中我们使用 EventBus 来实现跨组件之间的一些通信它依赖于 Vue 自带的 $on/$emit/$off 等方法这种方式使用非常简单方便但如果使用不当也会带来难以维护的毁灭灾难。
而 Vue3 中移除了这些相关方法这意味着 EventBus 这种方式我们使用不了 Vue3 推荐尽可能使用 props/emits、provide/inject、vuex 等其他方式来替代。
当然如果 Vue3 内部的方式无法满足你官方建议使用一些外部的辅助库例如mitt。
优点
非常小压缩后仅有 200 bytes。完整 TS 支持源码由 TS 编码。跨框架它并不是只能用在 Vue 中React、JQ 等框架中也可以使用。使用简单仅有 on、emit、off 等少量实用API。
十四、谈谈pinia?
Vue3.0通关秘籍
Pinia 是 Vue 官方团队成员专门开发的一个全新状态管理库并且 Vue 的官方状态管理库已经更改为了 Pinia。在 Vuex 官方仓库中也介绍说可以把 Pinia 当成是不同名称的 Vuex 5这也意味不会再出 5 版本了。
优点
更加轻量级压缩后提交只有1.6kb。完整的 TS 的支持Pinia 源码完全由 TS 编码完成。移除 mutations只剩下 state 、 actions 、 getters 。没有了像 Vuex 那样的模块镶嵌结构它只有 store 概念并支持多个 store且都是互相独立隔离的。当然你也可以手动从一个模块中导入另一个模块来实现模块的镶嵌结构。无需手动添加每个 store它的模块默认情况下创建就自动注册。支持服务端渲染SSR。支持 Vue DevTools。更友好的代码分割机制传送门。 Pinia 配套有个插件 pinia-plugin-persist进行数据持久化否则一刷新就会造成数据丢失 本文摘录自
2022金三银四-vue3面试题汇总vue3.0 响应式原理(超详细)「2022」打算跳槽涨薪必问面试题及答案——VUE3 篇 -纯干货图解Vue响应式原理Vue3.0通关秘籍
