如何回答Vue3与Vue2的区别持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第2天，点击查看活动详情

1、代码使用monorepo管理
2、同一个仓库中，同时各个包又是相互独立的，有自己的逻辑、单元测试等
3、模块化划分更加清晰，可维护性、可扩展性强
4、源码使用typescript来进行重写
- 1、vue2.x中使用flow来进行类型检测。
- 2、vue3.x中，vue的源码全部使用typescrit进行重构，并且vue本身对typesript支持更好。

1、使用Proxy进行数据劫持
- 1、vue2.x 中，使用Object.DefineProperty来进行数据劫持，劫持getter 和 setter这种方式有存在一个问题，在给对象添加属性的时候，无法进行数据劫持，需要使用 $set和$ delete,这种方式本身就是hack
- 2、vue3.x 中，使用Proxy进行数据拦截
2、删除了无用的api，比如：移除了 $off,$ once
3、移除了一些特性：如filter、内联模板等
4、编译方法的优化、生成 block tree、slot编译优化、diff算法

在生命周期钩子前面加上 “on” 来访问组件的生命周期钩子。

关于errorCaptured生命周期，你可以在此钩子中修改组件的状态。因此在捕获错误时，在模板或渲染函数中有一个条件判断来绕过其它内容就很重要；不然该组件可能会进入一个无限的渲染循环。

renderTracked,跟踪虚拟 DOM 重新渲染时调用,此事件告诉你哪个操作跟踪了组件以及该操作的目标对象和键。

renderTriggered,当虚拟 DOM 重新渲染被触发时调用。和renderTracked类似，此事件告诉你是什么操作触发了重新渲染，以及该操作的目标对象和键。

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits ，它们具备完整的类型推断并且在 <script setup> 中是直接可用的：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup code
</script>
复制代码

组件暴露出自己的属性，当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)

<script setup>
import { ref } from 'vue'

const a = 1
const b = ref(2)

defineExpose({
  a,
  b
})
</script>

从源码角度，使用monorepo管理代码，模块化划分更加清晰，可维护性、可扩展性强。使用typescript来进行类型检测。

从性能角度，使用Proxy进行数据劫持，删除了无用的api，移除了一些特性：如filter、内联模板等，编译方法的优化、生成 block tree、slot编译优化、diff算法。

从API角度，vue2.x 使用options api，vue3.x 使用 composition api。尤其是setup函数。

如何回答Vue3与Vue2的区别