vue2与vue3的区别

vue2和vue3主要的区别涵盖：响应式、生命周期钩子、diff性能

以下是我通过自己整理了网上的一些vue2与vue3区别的知识

1、响应式原理

vue2： 是使用Object.defineProperty对数据进行劫持，然后vue会将每个数据将它转化为getter和 setter，通过结合订阅发布模式来实现监听响应。其不能检测对象属性的新增或删除。

vue3： 是则使用Proxy，直接修改对象属性都会触发视图的更新

2、API差异

vue2： 是使用Options API（选项式），其使用可以定义data变量、计算属性、方法、生命钩子

vue3： 是使用Composition API（组合式），其使用是在setup中定义响应式变量、计算属性、方法，最后需要将这些定义的全部return出去

ref和reactive

ref：用于定义基本类型为响应式，通过.value访问变量

reactive：用于定义引用类型的响应式，

3、生命周期

vue2：

beforeCreate：实例刚被创建，数据和事件还未初始化。
created：实例创建完成，数据已响应，事件/Watcher 已设置。
其他就不列举了

vue3：

setup：代表组价实例已经创建完成，数据也已经响应
onbeforemount:还未挂载，dom还没渲染
onmounted：挂载完成，DOM 已经渲染
onbeforeupdatae:数据改变重新渲染之前
onupdated:组件渲染更新之后
onbeforeUnmoute:组件销毁前
onunmounted：组件销毁后
keep-alive
onActivated:组件激活时
onDeactivated():组件消失时

4、数据传递

vue3：

父传子

<script setup>
// 使用 defineEmits() 来声明事件
const emit = defineEmits();

// 触发事件
const sendMessage = () => {
	emit('customEvent', 'Hello from Child');
};

子传父

<script setup>
// 使用 defineEmits() 来声明事件
const emit = defineEmits();

// 触发事件
const sendMessage = () => {
	emit('customEvent', 'Hello from Child');
};

5、diff算法

vue2：会去遍历每一个虚拟节点，并返回一个比较对象，然后通过这个比较对象的记录去更新dom。

vue3：会对每个节点对应创建一个虚拟节点，只会比较发生变化的节点然后更新视图。