1.利用选项式API和组合式API分别实现单击自增1的效果。 2.利用选项式API和组合式API分别实现生命周期函数的自调用。 3.利用绑定样式实现一个DIV容器的背景三种颜色切换的效果。

1. 利用选项式API实现单击自增1：

<template>
  <button @click="increment">点击增加</button>
  <p>{{ counter }}</p>
</template>

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

const counter = ref(0);
function increment() {
  counter.value++;
}
</script>

利用组合式API实现相同效果：

<template>
  <div>
    <button @click="increment">点击增加</button>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
  methods: {
    increment() {
      this.counter++;
    },
  },
};
</script>

2. 利用选项式API实现生命周期函数的自调用：

<template>
  <div>
    <!-- 生命周期钩子将在渲染前被调用 -->
    <script setup>
      onMounted(() => {
        // 自调用函数
        self.callMeLater();
      });

      function callMeLater() {
        // ...
      }
    </script>
  </div>
</template>

组合式API中的生命周期函数：

<template>
  <div>
    <script>
      const app = {
        setup() {
          // 在setup中使用
          onMounted(() => {
            callMeLater();
          });
          
          async function callMeLater() {
            // ...
          }
        },
      };
    </script>
  </div>
</template>

3. 利用绑定样式实现背景颜色切换：

<template>
  <div :style="{ backgroundColor: switchColor() }">
    Click to change color:
    <button v-model="colorIndex" @click="nextColor">Next</button>
  </div>
</template>

<script setup>
const colors = ['red', 'blue', 'green'];
let colorIndex = 0;

function switchColor() {
  return colors[colorIndex];
}

function nextColor() {
  colorIndex = (colorIndex + 1) % colors.length;
}
</script>

在这个例子中，`switchColor`返回当前颜色，`v-model`绑定按钮状态并触发`nextColor`方法来改变背景色。