vue3中的组合式api中的两种写法

1.setup(){ return {} }

<template>
  <div>
    <div>setup1</div>
    <el-button type="primary" size="large" @click="add"> count++</el-button>
    <h1>{{ count }}</h1>
    <h1>------------------------------------------------</h1>
    <el-button type="primary" size="large" @click="changelist"> list</el-button>
    <h1>{{ list[0].id }}</h1>
  </div>
</template>

<script>
import { ref, reactive } from "vue";
export default {
  setup() {
    const count = ref(0);
    const list = reactive([
      { id: 1, name: "aaa" },
      { id: 2, name: "bbb" },
    ]);
    function add() {
      count.value += 2;
    }
    function changelist() {
      list[0].id += 10;
    }
    return {
      count,
      list,
      add,
      changelist,
    };
  },
};
</script>

2.<script setup>  </script>

<template>
  <div>
    <div>setup2</div>
    <el-button type="primary" size="large" @click="add"> count++</el-button>
    <h1>{{ count }}</h1>
    <h1>------------------------------------------------</h1>
    <el-button type="primary" size="large" @click="changelist"> list</el-button>
    <h1>{{ list[0].id }}</h1>
  </div>
</template>
  
  <script setup>
import { ref, reactive } from "vue";

const count = ref(0);
const list = reactive([
  { id: 1, name: "aaa" },
  { id: 2, name: "bbb" },
]);
function add() {
  count.value += 2;
}
function changelist() {
  list[0].id += 10;
}
</script>