Vue3组合式两种写法

第1种

1. export default默认导出对象，vue2写法
2. 导入ref方法用于声明变量
3. 使用data()定义变量与赋值
4. 最后给template模板使用变量

import { ref } from "vue";
export default {
  data() {
    return {
      name: "anbin",
      num: 0,
    }
  }
}
</script >

<template>
  <p>{{ name }}</p>
  <p>{{ num }}</p>
</template>

第2种

1. 使用vue3的setup(组合式API)代替export default表示导出默认对象
2. 推荐使用这种方式，可以实现更简洁的代码
3. 运行时具备更好的性能
4. 实现功能方面，这与第1种并没有什么两样

<script setup >
import { ref } from 'vue';
const name = ref('a');
const num = ref(0);
</script> 

<template>
  <p>{{ name }}</p>
  <p>{{ num }}</p>
</template>