Vue2和Vue3区别的理解和学习1-API结构

API结构

Vue 2采用选项式API，包括data、methods、mounted等，而Vue 3则引入了组合式API，主要使用setup函数。这种变化使得代码组织更加模块化，更易于复用和维护。

选项式 API (Options API)

包含多个选项的对象来描述组件的逻辑。选项所定义的属性都会暴露在函数内部的 this 上，它会指向当前的组件实例。··

<template>
  <div>
    <button @click="addCount">addCount</button>
    <p>{{ count }}</p>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        count: 0
      }
    },
    methods: {
      addCount() {
        this.count++
      }
    },
    updated() {
      console.log(`The initial count is ${this.count}.`)
    }
  }
</script>

组合式 API (Composition API)

使用导入的 API 函数来描述组件逻辑。在单文件组件中，组合式 API 通常会与<script setup>搭配使用。这个 setup attribute 是一个标识，告诉 Vue 需要在编译时进行一些处理，让我们可以更简洁地使用组合式 API。

<template>
  <div>
    <button @click="addCount">addCount</button>
    <p>{{ count }}</p>
  </div>
</template>
<script setup>
  import { ref, onUpdated } from 'vue'
  const count = ref(0)
  function addCount() {
    count.value++
  }
  onUpdated(() => {
    console.log(`The initial count is ${count.value}.`)
  })
</script>

总结

选项式API使用基于类的写法，而组合式API更接近于现代JavaScript开发实践，可以更容易地使用现代JavaScript特性，如函数组件、响应性系统等。

组合式 API 的主要优点包括：
1.状态逻辑可复用：你可以把组件的状态和逻辑抽象成一个可复用的函数。
2.更好的类型支持：使用组合式 API 时，TypeScript 可以更好地推断出类型。
3.更好的测试体验：单独的函数使得测试更加简单，可以更容易地测试每个逻辑块。
4.更好的性能：不会进行多余的响应式跟踪，因为它只在你明确声明时才会跟踪。