1、Vue3中的组合式Api有哪些? 和Vue2的Options Api有什么不同?

Vue3中的组合式API主要包括以下几个：

1. setup 函数：在组件创建之前执行，用于设置组件的响应式数据、计算属性、方法等。

2. ref 函数：用于创建一个响应式的数据对象，可以通过 .value 访问和修改该数据。

3. reactive 函数：用于创建一个响应式的数据对象，可以通过访问和修改该对象的属性来触发视图更新。

4. computed 函数：用于创建一个计算属性，可以根据响应式数据的变化自动更新计算结果。

5. watch 函数：用于监听响应式数据的变化，可以在数据变化时执行相应的操作。

与Vue2的option Api有什么不同

相比于Vue2的Options API，Vue3的组合式API更加灵活和易于组合。使用组合式API可以将组件的逻辑拆分成多个独立的函数，每个函数只关注自己的逻辑，便于维护和复用。此外，组合式API还可以更好地支持 TypeScript 类型推断，提高代码的可靠性和可维护性。

2、Vue3.0的设计目标是什么？做了哪些优化？

设计目标是什么？

• 更小
  Vue3移除一些不常用的 API
• 更快
  diff算法优化
  静态提升
  事件监听缓存
  SSR优化
• TypeScript支持
• API设计一致性
• 提高自身可维护性
• 开放更多底层功能
  vue3在兼顾vue2的options API的同时还推出了composition API，大大增加了代码的逻辑组织和代码复用能力

哪些优化？

1、源码 ：

• 源码管理 vue3整个源码是通过 monorepo的方式维护的，根据功能将不同的模块拆分到packages目录下面不同的子目录中

2、TypeScript

• Vue3是基于typeScript编写的，提供了更好的类型检查，能支持复杂的类型推导

3、性能

• 体积优化
• 编译优化
• 数据劫持优化

4、语法 API

• 优化逻辑组织
• 优化逻辑复用

---

• Vue3的最大设计目标是替代Vue2，为了实现这一点，Vue3在以下几个方面做了很大改进，如：易用性、框架性能、扩展性、可维护性、开发体验等
• 易用性方面主要是API简化，比如v-model在Vue3中变成了Vue2中v-model和sync修饰符的结合体，用户不用区分两者不同，也不用选择困难。类似的简化还有用于渲染函数内部生成VNode的h(type,props, children)，其中props不用考虑区分属性、特性、事件等，框架替我们判断，易用性大增。
• 开发体验方面，新组件Teleport传送门、Fragments 、Suspense等都会简化特定场景的代码编写，SFC Composition API语法糖更是极大提升我们开发体验。
• 扩展性方面提升如独立的reactivity模块，custom renderer API等
• 可维护性方面主要是Composition API，更容易编写高复用性的业务逻辑。还有对TypeScript支持的提升。
• 性能方面的改进也很显著，例如编译期优化、基于Proxy的响应式系统

3、Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同？

在使用vue2进行开发的时候会遇到，代码的可读性随着组件的变大而便差，每一种代码复用的方式，都存在缺点，TypeScript支持有限，而这些问题vue3却可以迎刃而解

options API

选项API，即以.vue为后缀的文件，通过定义methods、computed、watch，data等属性和方法，共同处理页面的逻辑，这种选项式的写法，如data中定义状态，methods中定义方法，然而这种情况随着组件复杂，导致对应的属性的列表也会增长，这可能会导致组件难以阅读

Compositions Api

在vue3中Compositions Api中，组件根据逻辑功能来组织的，一个功能所定义的所有Api会放在一起,更加高内聚，低耦合

对比

从逻辑组织和逻辑复用两个方面比较Compositions Api和options Api

逻辑组织
在选项式Api写法中随着组件的内容变得复杂，状态和方法的分离，使得理解和维护组件变得异常困难，并且选项分离也掩盖了组件的内层逻辑

在组合式Api的写法中属性和方法可以写在一起，在进行修改的时候可以非常的明了

逻辑复用
在选项式Api中进行逻辑复用的时候会出现命名冲突和数据来源不清晰的问题

总结

• 在逻辑组织和逻辑复用方面，组合式Api优于选项式Api
• 因为组合式Api几乎都是函数，会有更好的逻辑判断
• 组合式Api对tree-shaking友好，代码也更容易压缩
• 组合式Api中见不到this的使用，减少了this指向不明的问题

4、Vue2和Vue3中响应式原理及区别？

• 在vue2中，通过Object.defineProperty()来进行劫持各个属性的getter，setter，再结合发布订阅模式，在数据变动的时候，发布消息给订阅者，如何更新数据渲染页面的。Vue2中的响应式原理是通过将data对象中的每个属性都转换为getter和setter函数来实现的。当数据发生变化时，setter函数会触发依赖更新，从而更新视图。Vue2中的响应式原理存在一些限制，例如无法监听新增属性、数组的变化需要通过特定的方法触发等。

• 但是这样做的话是有缺点的，直接通过obj.a这种方法给对象添加key value值或者是通过数组下标操作数据的话，vue是监听不到的，所以在vue中提供了set和delete方法来弥补这个缺点。

• 在vue3中，不再用Object.defineProperty()，而是使用了ES6的一个新的构造函数Proxy，Proxy可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。

• Vue3中的响应式原理使用了Proxy对象来实现。Proxy对象可以监听对象的所有属性，包括新增属性和删除属性。Vue3中的响应式原理还支持了更细粒度的依赖追踪，可以更准确地判断哪些依赖需要更新。此外，Vue3中还引入了Reactivity API，使得开发者可以更灵活地控制响应式数据的行为。

总的来说，Vue3中的响应式原理相比Vue2更加灵活、高效，可以更好地满足开发者的需求。

5、Vue2和Vue3的区别至少说5点

• 响应式系统：
  • vue2中使用Object.defineProperty实现响应式系统。
  • vue3中使用Proxy实现响应式系统。
  • Proxy比Object.defineProperty更高效、更灵活，可以监听数组的变化。
• 性能优化：
  • Vue3在编译器方面进行了优化，使用了静态提示和基于Proxy的响应式系统，使得渲染性更改，同时，Vue3还引入了Tree shaking，可以更好的优化打包后的代码
• 数据和方法的定义：
  • vue2中使用的是选项类型API，Vue3中使用的是组合式API。
• 生命周期：
  • vue3的生命周期钩子函数发生了变化，取消了beforeCreate和created钩子函数，还引入了setup函数。
• 父子传参不同，setup()函数特性
• TypeScript支持：Vue3对TypeScript的支持更加友好，提供了更好的类型推断和类型检查。

6、Vue3中组件通信的流程【父传子，子传父】？

• 1、父组件向子组件传递数据

  • 父组件通过props属性将需要传递的数据传递给子组件，在子组件中定义props属性接收父组件传递的数据。

• 2、子组件向父组件传递数据

  • 子组件在emit方法触发父组件的事件，子组件在emit方法中传递需要传递的数据，父组件中监听子组件的事件，在监听方法中获取子组件传递过来的数据

• 3、setup中的返回值

  • 在setup函数中定义需要传递的数据或方法返回一个对象或数组
    在子组件中使用props属性获取父组件传递过来的数据，子组件通过setup函数提供的数据或方法来使用

• 4、provide / inject

  • provide在父组件中提供需要传递的数据
    inject在子组件中获取提供的数据
    可以在组件树中遥远的组件之间进行传递

  在Vue3中，父子组件之间的通信需要通过props和$emit方法、setup函数以及provide / inject来进行。这些方式的选择需根据实际情况和项目需求和组织结构而定。需要注意的一点是，过于频繁的组件通信也可能导致应用的耦合度过高，因此，在使用时需要权衡其利弊。

7、请叙述Vue2和Vue3的diff算法的区别？

Vue2和Vue3的diff算法有以下几点区别：

1. Vue2使用的是双指针算法，而Vue3使用的是单指针算法。Vue2的双指针算法需要同时遍历新旧节点，而Vue3的单指针算法只需要遍历新节点，可以减少一半的遍历次数。
2. Vue3的diff算法采用了全量更新策略，即每次更新都会重新渲染整个组件树，而Vue2的diff算法采用了增量更新策略，只会更新发生变化的部分。全量更新策略可以减少diff算法的复杂度，提高渲染性能。
3. Vue3的diff算法引入了静态标记和动态标记的概念，可以更好地处理静态节点和动态节点的更新。静态节点是指在组件渲染过程中不会发生变化的节点，动态节点是指会发生变化的节点。Vue3会对静态节点进行标记，避免重复渲染，提高渲染性能。
4. Vue3的diff算法对于列表渲染的优化更加明显。Vue3会对列表中的节点进行缓存，避免重复创建和销毁节点，提高渲染性能。

总的来说，Vue3的diff算法在性能上有很大的提升，特别是在处理大型组件树和列表渲染时更加优秀。

8、Vue3中的定义响应式数据的两个函数ref函数和reactive函数？

ref函数？

• 作用: 定义一个响应式的数据
• 语法: const xxx = ref(initValue)
  • 创建一个包含响应式数据的引用对象（reference对象，简称ref对象）。
  • JS中操作数据： xxx.value
  • 模板中读取数据: 不需要.value，直接：<div>{{xxx}}</div>
• 备注：
  • 接收的数据可以是：基本类型、也可以是对象类型。
  • 基本类型的数据：响应式依然是靠Object.defineProperty()的get与set完成的。
  • 对象类型的数据：内部 “ 求助 ” 了Vue3.0中的一个新函数—— reactive函数。

reactive函数

• 作用: 定义一个对象类型的响应式数据（基本类型不要用它，要用ref函数）
• 语法：const 代理对象= reactive(源对象)接收一个对象（或数组），返回一个代理对象（Proxy的实例对象，简称proxy对象）
• reactive定义的响应式数据是“深层次的”。
• 内部基于 ES6 的 Proxy 实现，通过代理对象操作源对象内部数据进行操作。

reactive和ref的对比？

• 从定义数据角度对比：
  • ref用来定义：基本类型数据。
  • reactive用来定义：对象（或数组）类型数据。
  • 备注：ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。
• 从原理角度对比：
  • ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）。
  • reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。
• 从使用角度对比：
  • ref定义的数据：操作数据需要.value，读取数据时模板中直接读取不需要.value。
  • reactive定义的数据：操作数据与读取数据：均不需要.value。

笔记记录，方便自己观看，笔记不全仅供参考~~

------------------------------------------------------------------持续更新中。。。。---------------------------------------------------------