Vue3通透教程setup语法糖、computed函数、watch函数

<template>
  <div>
    <h1>Vue3 教程</h1>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
import { ref, reactive, computed, watch, watchEffect } from 'vue';
 
export default {
  setup() {
    // 响应式状态
    const count = ref(0);
 
    // 响应式状态
    const state = reactive({
      count: 0,
    });
 
    // 计算属性
    const doubleCount = computed(() => count.value * 2);
 
    // 监听响应式状态变化
    watch(count, (newCount, oldCount) => {
      console.log(`count变化了，新的值为: ${newCount}, 旧的值为: ${oldCount}`);
    });
 
    // 监听响应式状态变化，使用函数
    watch(() => state.count, (newCount, oldCount) => {
      console.log(`state.count变化了，新的值为: ${newCount}, 旧的值为: ${oldCount}`);
    });
 
    // 监听响应式对象的变化
    watchEffect(() => {
      console.log(`state对象的变化导致的count值为: ${state.count}`);
    });
 
    // 方法
    function increment() {
      count.value++;
      state.count++;
    }
 
    // 返回到模板中使用的响应式数据和方法
    return {
      count,
      doubleCount,
      increment,
    };
  },
};
</script>

这个代码示例展示了如何在Vue3组件中使用setup函数来定义响应式数据、计算属性、监听响应式数据的变化以及定义方法。它演示了如何使用ref和reactive来创建响应式状态，如何使用computed来创建计算属性，以及如何使用watch和watchEffect来监听响应式状态的变化。