vue2和vue3

1.生命周期

大部分生命周期钩子名称上+"on"关键字，功能是类似的。

不过vue3在组合式api种使用生命周期钩子时候需要先引入、而vue2在选项api种可以直接调用生命周期钩子。

setup是围绕beforeCreate和created生命周期钩子运行的，不需要显示的去定义。

2.书写方式：

v-if和v-for的优先级也不同；先循环在判断所以不适合在vue里写。

TypeScript 复制代码

在 Vue 2 中，v-for 拥有比 v-if 更高的优先级，v-for 会先执行，
然后 v-if 会在每个 v-for 循环中进行判断
而在 Vue 3 中，v-if 和 v-for 拥有相同的优先级，
因此它们的执行顺序与它们在模板中的位置相关。

在 Vue 2 中，使用 Options API 来定义组件的数据、方法等。而在 Vue 3 中，可以使用 Composition API 来组织组件的逻辑，通过ref 和 setup来定义响应式数据和组件逻辑。在 Vue 3 中，可以使用 ref，reactive创建响应式数据，并在setup中书写组件逻辑。而在 Vue 2 中，需要使用 data函数来定义响应式数据。

Vue2 的（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。

Vue3 的组合式API，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。

TypeScript 复制代码

而Compositon API正是解决上述问题，将某个逻辑关注点相关的代码全都放在一个函数里，这样当需要修改一个功能时，就不再需要在文件中跳来跳去

下面举个简单例子，将处理count属性相关的代码放在同一个函数了
function useCount() {
    let count = ref(10);
    let double = computed(() => {
        return count.value * 2;
    });

    const handleConut = () => {
        count.value = count.value * 2;
    };

    console.log(count);

    return {
        count,
        double,
        handleConut,
    };
}
组件上中使用count

export default defineComponent({
    setup() {
        const { count, double, handleConut } = useCount();
        return {
            count,
            double,
            handleConut
        }
    },
});

逻辑复用

在Vue2中，我们是用过mixin去复用相同的逻辑

使用单个mixin似乎问题不大，但是当我们一个组件混入大量不同的 mixins 的时候

会存在两个非常明显的问题：

命名冲突
数据来源不清晰

现在通过Compositon API这种方式改写vue2的代码

3.虚拟dom：

patchFlag 帮助 diff 时区分静态节点，以及不同类型的动态节点。一定程度地减少节点本身及其属性的比对。

4.diff：

vue3在diff算法中相比vue2增加了静态标记

其作用是为了会发生变化的地方添加一个flag标记，下次发生变化的时候直接找该地方进行比较

比如：已经标记静态节点的p标签在diff过程中则不会比较，把性能进一步提高

静态提升

Vue3中对不参与更新的元素，会做静态提升，只会被创建一次，在渲染时直接复用

这样就免去了重复的创建节点，大型应用会受益于这个改动，免去了重复的创建操作，优化了运行时候的内存占用

5.composition api：

Vue2 是选项API（Options API），一个逻辑会散乱在文件不同位置（data、props、computed、watch、生命周期钩子等），导致代码的可读性变差。当需要修改某个逻辑时，需要上下来回跳转文件位置。

Vue3 组合式API，可将同一逻辑的内容写到一起，增强了代码的可读性、内聚性，其还提供了较为完美的逻辑复用性方案。

6.响应式原理

vue2中采用 defineProperty来劫持整个对象，然后进行深度遍历所有属性，给每个属性添加getter和setter，实现响应式

基本用法：直接在一个对象上定义新的属性或修改现有的属性，并返回对象。

vue3采用proxy重写了响应式系统，因为proxy可以对整个对象进行监听，所以不需要深度遍历

可以监听动态属性的添加
可以监听到数组的索引和数组length属性
可以监听删除属性
Proxy 是 ES6 新特性，通过第2个参数 handler 拦截目标对象的行为。相较于 Object.defineProperty 提供语言全范围的响应能力，消除了局限性。
局限性： (1)、对象/数组的新增、删除 (2)、监测 .length 修改 (3)、Map、Set、WeakMap、WeakSet 的支持（4）基本用法：创建对象的代理，从而实现基本操作的拦截和自定义操作。'
Vue2 相应解决方案：
针对常用数组原型方法push、pop、shift、unshift、splice、sort、reverse进行了hack处理；
提供Vue.set监听对象/数组新增属性。对象的新增/删除响应，还可以new个新对象，新增则合并新属性和旧对象；
删除则将删除属性后的对象深拷贝给新对象。

7.ts支持：

Vue3 由 TypeScript 重写，

Vue2 Options API 中 option 是个简单对象，而 TypeScript 是一种类型系统，面向对象的语法，不是特别匹配。
Vue2 需要vue-class-component强化vue原生组件，也需要vue-property-decorator增加更多结合Vue特性的装饰器，写法比较繁琐。

8.体积更小：

vue3通过webpack的tree-shaking功能，可以将无用模块"剪辑"，仅打包需要的。

简单来讲，就是在保持代码运行结果不变的前提下，去除无用的代码。

也就是说，tree shaking 其实是找出使用的代码

在Vue2中，无论我们使用什么功能，它们最终都会出现在生产代码中。主要原因是Vue实例在项目中是单例的，捆绑程序无法检测到该对象的哪些属性在代码中被

而Vue3源码引入tree shaking特性，将全局 API 进行分块。如果您不使用其某些功能，它们将不会包含在您的基础包中

9.Fragment（片段）

可以让你在 Vue 组件中返回多个根节点的机制。

在 HTML 中，每个元素都必须有一个根节点，但是有时候在 Vue 组件中，你希望返回多个相邻的节点而不需要包裹它们在一个额外的父节点内。在 Vue 2 中，这是不允许的，但是在 Vue 3 中引入了 Fragment，解决了这个问题。