在vue3的＜script setup＞语法糖中，method和计算属性等都怎么添加

在 <script setup> 语法糖中，添加方法、计算属性等和普通的组合式 API 用法相似，但更简洁，不需要显式地从 setup 函数返回。以下分别介绍如何添加方法、计算属性、监听器等。

1. 添加方法

在 <script setup> 中添加方法很简单，直接定义一个函数即可，该函数会自动在模板中可用。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">改变消息</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

// 定义响应式数据
const message = ref('初始消息');

// 定义方法
const changeMessage = () => {
  message.value = '新的消息';
};
</script>

2. 添加计算属性

使用 computed 函数来定义计算属性。computed 函数可以接收一个 getter 函数来创建只读计算属性，或者接收一个包含 get 和 set 方法的对象来创建可写计算属性。

只读计算属性

<template>
  <div>
    <p>数字: {{ num }}</p>
    <p>数字的平方: {{ squaredNum }}</p>
    <button @click="increment">增加数字</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义响应式数据
const num = ref(1);

// 定义只读计算属性
const squaredNum = computed(() => {
  return num.value * num.value;
});

// 定义方法
const increment = () => {
  num.value++;
};
</script>

可写计算属性

<template>
  <div>
    <p>名: {{ firstName }}</p>
    <p>姓: {{ lastName }}</p>
    <p>全名: {{ fullName }}</p>
    <button @click="updateFullName">更新全名</button>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 定义响应式数据
const firstName = ref('张');
const lastName = ref('三');

// 定义可写计算属性
const fullName = computed({
  get() {
    return `${firstName.value}${lastName.value}`;
  },
  set(newValue) {
    firstName.value = newValue.slice(0, 1);
    lastName.value = newValue.slice(1);
  }
});

// 定义方法
const updateFullName = () => {
  fullName.value = '李四';
};
</script>

3. 添加监听器

使用 watch 函数来添加监听器，监听响应式数据的变化。

<template>
  <div>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加计数器</button>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue';

// 定义响应式数据
const count = ref(0);

// 定义方法
const increment = () => {
  count.value++;
};

// 添加监听器
watch(count, (newValue, oldValue) => {
  console.log(`计数器从 ${oldValue} 变为 ${newValue}`);
});
</script>

通过以上示例，你可以在 <script setup> 语法糖中方便地添加方法、计算属性和监听器等功能。