【javascript被迫学习Vue3】两个例子搞懂vue3使用区别， 引入的Composition API到底有什么用？

Vue 3相对于Vue 2有一些重要的变化和改进：

1. 响应性系统：Vue 3中的响应性系统进行了全面的修改。在Vue 2中，使用Object.defineProperty进行数据劫持来实现响应式。而在Vue 3中，采用了基于Proxy的新响应性系统，提供了更好的性能和更丰富的响应式能力。

例如，在Vue 2中，我们需要使用Vue.observable()方法对数据进行包装，使其成为响应式的对象：

import Vue from 'vue';

export default {
  data() {
    return {
      count: { value: 0 }
    };
  }
}

而在Vue 3中，我们可以直接使用reactive()函数创建响应式对象，无需借助Vue的api：

import { reactive } from 'vue';

export default {
  setup() {
    const count = reactive({ value: 0 });
    return { count };
  }
}

2. Composition API：Vue 3引入了Composition API，这是一种更灵活和可组合的API风格，在处理逻辑复用和组件组织方面更加强大。相比Vue 2的Options API，Composition API提供了更好的代码组织、代码复用和逻辑聚合的能力。

例如，在Vue 2中，我们使用Options API来定义组件：

export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message!';
    }
  }
}

而在Vue 3中，我们使用Composition API来定义组件：

import { reactive } from 'vue';

export default {
  setup() {
    const message = reactive({ value: 'Hello Vue!' });
    
    const updateMessage = () => {
      message.value = 'Updated message!';
    };
    
    return { message, updateMessage };
  }
}

上面的例子展示了如何通过Composition API使用reactive()函数创建响应式数据，以及通过返回一个对象来暴露组件的属性和方法。

这些是Vue 3和Vue 2之间的一些不同之处的示例，总的来说，Vue 3在性能和开发体验等方面都有了很大的提升，同时引入了一些新特性和改进，使得开发更加灵活和高效。