Composition API 和 React Hook 很像, 它们有什么区别?

是很像, Composition API 诞生之初就借鉴了React Hook, 同时避免了reack Hook的短板限制。

reack Hook的限制：

• 不能在循环中、条件、调用嵌套函数 Hook
• 你必须确保它总是在你这边 React Top level 调用函数 Hook
• useEffect、useMemo 依赖关系必须手动确定

Composition API 相比于 React Hook优点：

Compositon API 不必担心调用的顺序，它也可以在循环中、条件、在嵌套函数中使用

• React Hook 每次重新渲染时，都需要调用 Hook, 而vue3在setup函数中，一个组件实例只调用一次setup，性能相对react hook较高
• vue响应式系统自动实现依赖关系收集，而且组件的性能优化是由 Vue 内部完成的，而 React Hook 的依赖关系需要手动传递，并且依赖关系的顺序必须得到保证，让路 useEffect、useMemo 等等，否则组件性能会因为依赖关系不正确而下降。

ref 和 reactive 区别?

简单来说： ref通常用来定义基本类型数据, reactive用来定义对象（或者数组）类型数据

注: ref也可以用来定义对象（或数组）类型数据, 它内部会自动通过reactive转为代理对象。

使用方面：ref 操作数据需要 .value 取值，template模板中不需要。

reactive都不需要.value取值

数据传递方面：

解构赋值会使reactive丢失响应性, 而{ref(1), ref(2)}不会

原理角度：

ref通过Object.defineProperty()的get与set来实现响应式（数据劫持）

reactive通过使用Proxy来实现响应式（数据劫持）, 并通过Reflect操作源对象内部的数据。