不再困惑：一文读懂Vue2与Vue3的主要差异

Vue3相对于Vue2有很多改进和新特性。以下是一些主要的区别：

1. 性能更好：Vue3的性能比Vue2更好，因为它使用了更少的代码和更高效的算法。例如，Vue3使用Proxy代替了Object.defineProperty来监听数据变化，这使得Vue3的性能更高。
2. 组合式API：Vue3引入了组合式API，这是一种新的编写组件逻辑的方式。组合式API允许您将组件的逻辑分解为可重用的组合函数，这些函数可以包含副作用和中间件。
3. 更好的TypeScript支持：Vue3提供了更好的TypeScript支持，这使得在Vue3中编写TypeScript代码更加容易和愉快。
4. 更好的模板：Vue3的模板编译器现在可以生成更快的渲染代码，并且可以更好地处理大型模板。
5. 更好的错误处理：Vue3提供了更好的错误处理机制，这使得在开发过程中更容易找到和解决问题。

一、vue2和vue3双向数据绑定原理

vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的 vue3发生了改变，使用proxy替换Object.defineProerty,使用Proxy的优势：

可直接监听数组类型的数据变化 性能的提升 监听的目标为对象本身，不需要像Object.defineProperty一样遍历每个属性，有一定的性能提升 可直接实现对象属性的新增/删除

根节点的不同

vue3在组件中支持多个根节点.

vue2

<template>
    <div>
        <h1></h1>
    </div>
</template>

vue3

<template>
    <div>
        <h1></h1>
    </div>
    <div>
        <span></span>
    </div>
</template>

Composition API (组合api)

是使用的Options API，这种写法不方便我们的阅读和交流，逻辑过于分散。

在vue2中

// vue2
<script>
export default {
	// 数据
    data() {
        return {};
    },
    mounted() {},
    // 方法
    methods: {},
    computed: {},
    components:{}
};
</script>
 
// vue3
 
// 这样代码会更加简洁和整洁。
<script>
export default {
    setup() {
        // 数据 和 方法都在setup里面使用
    }
};
</script>