vue2 和vue3的区别 详细代码分析

1. 性能优化
Vue 3 对于性能优化做了一些更新，包括：

更快的虚拟 DOM，Vue 3 中使用了类似 React 的 Fiber 算法，这种方式可以减少不必要的渲染和 DOM 操作，进而提高渲染性能。
更好的树摇 (Tree shaking)，Vue 3 内置了更好的标识符，使 Webpack 或者 Rollup 等打包工具在编译时可以更好地检测代码是否要删除掉，从而减小 bundle 的大小，提高加载速度。
更少的内存使用，Vue 3 大量使用了 TypeScript 和 Proxy，可以显著地减少内存使用和临时对象的创建。
更好的代码分割，现在 VUE 3 支持 SSR 和 Web 服务端渲染时使用的异步组件。
2. Composition API
Composition API 是一种全新的写法，完全替换了 Vue 2.x 中 Options API。 相较于 Vue 2.x 中的 Options API，Composition API 按照逻辑和功能划分，组织代码更加清晰，同时具有以下优势：

更加适合代码的组合。
更加容易重用逻辑。
更好的类型推断。
提供了更好的代码整洁性和组织结构。
可以摆脱 data、methods 等命名污染的属性。
以下是一个示例组件：

<template>
  <div>
    {{ fullName }}
  </div>
</template>

<script>
import { reactive, computed } from 'vue'; 

export default {
  setup() {
    const user = reactive({
      firstName: 'John',
      lastName: 'Doe'
    });

    const fullName = computed(() => {
      return user.firstName + ' ' + user.lastName;
    });

    return {
      fullName
    }
  }
}
</script>

在 Vue 3 中使用 Composition API，我们首先引入两个函数：reactive 和 computed。它们分别是定义响应式数据和计算属性的方法。然后我们在 setup() 函数中定义一个 user 对象，该对象包含两个属性：firstName 和 lastName，并使用 reactive 方法获得响应式处理。最后我们使用了 computed 方法计算出 fullName 并返回。

3. TypeScript 支持
在 Vue 3 中，TypeScript 已经被作为一等公民进行支持。Vue 3 自带了 TypeScript 类型定义和编译器，让我们在开发过程中可以更好地使用 TypeScript。

Vue 3 也内置了很多 TypeScript 的类型声明文件，这些文件可以让开发者可以更好地使用 TypeScript 书写代码。

下面是一个 TypeScript 在 Vue3 中的例子：

<script lang="ts">
import { defineComponent, ref } from 'vue'

interface User {
  name: string;
  age: number;
}

export default defineComponent({
  setup() {
    const user = ref<User>({
      name: 'John Doe',
      age: 30
    })

    return {
      user
    }
  }
})
</script>

4. setup()函数
在 Vue 3 中，setup() 函数的使用被推广到了组件的整个生命周期中，可以帮助我们更好地组织和复用代码。setup() 函数负责为组件设置初始值，如响应式数据、计算属性、方法等。

在 Vue 2 中，组件的选项对象中有 data、computed、methods 等选项，它们将组件的逻辑和功能混杂在一起，使得代码的可读性差。在 Vue 3 中，setup() 函数将这些逻辑抽离出来，更好的组织代码。

以下是一个使用 setup() 函数创建组件的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue 3!')

    return {
      message
    }
  }
}
</script>

这个例子中，使用 ref 函数创建了一个 message 变量，并使用 setup() 函数返回它。在模板中，message 将会渲染 Hello, Vue 3!。

综上，这是 Vue 2 和 Vue 3 的几个主要区别，主要涉及性能优化、Composition API、TypeScript 支持和 setup() 函数的使用等。Vue 3 通过这些改进让在 Vue 3 中编写更好的代码变得更加简单、高效。