Options API 和 Composition API

1、vue2 使用 Options API （选项API），逻辑分散在 data, methods, props, filters, mounted, created 中

<template>
  <button @click="increment">count is: {{ count }}</button>
</template>
<script
export default {
  data(){
    return {
      count: 0
    }
  },
  methods: {
    increment(){
      this.count++
    }
  },
  mounted(){
    console.log('initial count: ', this.count)
  }
}
</script>

2、vue3 使用 Composition API （组合式API），使用导入的API函数定义组件的逻辑

<template>
  <button @click="increment">Count is: {{ count }}</button>
　<span>{{ msg }}</span>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  const props = defineProps({
　　msg: String,
　　name: {
　　  type: String,
　　  require: true,
　　  default: 'xxxx'
　　}
  })
  const count = ref(0)
  const info = reactive({
　　name: 'test',
　　age: 18
  })
  function increment(){
    count.value++
  }
  onMounted(()=>{
    console.log(`initial count is: ${count.value}`)
  })
</script>