vue3的用法跟vue2对比

 Vue 3 是 Vue.js 的最新版本，它引入了许多新的功能和改进，以提高用户体验和应用程序的性能。下面是一些 Vue 3 的特性，以及与 Vue 2 的对比：

1. 更简洁的语法：Vue 3 使用了 ES 模块和 Composition API，使代码更简洁易读。同时，它还简化了组件的导入和使用，提高了开发效率。例如，在 Vue 2 中，导入和注册组件的代码如下：

import MyComponent from './MyComponent.vue';

export default {
  components: {
    MyComponent
  }
}

在 Vue 3 中，可以使用 `defineAsyncComponent` 函数来异步加载组件，代码更简洁：
 

import { defineAsyncComponent } from 'vue';

export default {
  components: {
    MyComponent: defineAsyncComponent(() => import('./MyComponent.vue'))
  }
}

2. 更简洁的逻辑：Composition API 提供了更简洁的逻辑编写方式，使代码更易于理解。它使用 setup 函数来定义响应式数据、计算属性、方法、生命周期钩子等。

例如，在 Vue 2 中，定义响应式数据的代码如下：

export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

在 Vue 3 中，可以使用 Composition API 更简洁地定义响应式数据：

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment
    }
  }
}

3. 更丰富的组件功能：Vue 3 提供了许多新的组件功能，例如 <script setup>、<style scoped>、<slot> 等。

例如，在 Vue 2 中，使用 `<script setup>` 来定义响应式数据和计算属性的代码如下：

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

在 Vue 3 中，可以直接在模板中使用 <script setup>：

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

const count = ref(0);

function increment() {
  count.value++;
}
</script>

4. 更强大的响应式系统：Vue 3 的响应式系统比 Vue 2 更强大，支持更多的数据类型和操作。

例如，在 Vue 2 中，定义一个数组数据和操作的代码如下：

export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem() {
      this.items.push('New item');
    }
  }
}

在 Vue 3 中，可以使用 `reactive` 和 `toRefs` 函数来定义响应式数据，并将其转换为响应式对象：
 

import { reactive, toRefs } from 'vue';

export default {
  setup() {
    const state = reactive({
      items: []
    });

    function addItem() {
      state.items.push('New item');
    }

    return toRefs(state);
  }
}

总的来说，Vue 3 提供了许多新的功能和改进，使开发更加简洁、易读和高效。与 Vue 2 相比，它的语法更简洁，逻辑更加简洁，组件功能更加丰富，响应式系统也更强大。