VUE3.0 新增的Composition API 特性 都包含什么

        最后，在 return 语句中，将 count、doubleCount 和 increment 返回，使得它们可以在模板          中使用。
        使用 watch 函数创建了一个侦听器，当 count 的值发生变化时，会触发回调函数。
        使用 onMounted 函数在组件挂载后执行一个回调函数，用于输出一条日志信息。
        定义了一个名为 increment 的方法，当按钮被点击时，会将 count 的值加一。

1. ref：ref 函数用于创建一个响应式数据引用。它将普通的 JavaScript 数据转换为一个响应式对象，使得数据的变化可以被 Vue 自动追踪。示例：const count = ref(0);

2. reactive：reactive 函数用于创建一个响应式对象。与 ref 不同，reactive 可以接收一个普通对象，并将其转换为响应式对象。示例：const state = reactive({ name: 'John', age: 25 });

3. computed：computed 函数用于创建一个计算属性。通过传入一个计算函数，computed 会根据依赖的响应式数据自动计算出结果，并将结果缓存起来。示例：const doubleCount = computed(() => count.value * 2);

4. watch：watch 函数用于监视响应式数据的变化，并在数据发生变化时执行指定的回调函数。它可以用于监听单个数据的变化，也可以监听多个数据的变化。示例：watch(() => count.value, (newVal, oldVal) => { ... });

5. onMounted、onUpdated、onUnmounted：这些函数用于在组件的生命周期钩子中执行指定的回调函数。onMounted 在组件挂载后执行，onUpdated 在组件更新后执行，onUnmounted 在组件卸载前执行。示例：onMounted(() => { ... });

6. toRefs：toRefs 函数用于将响应式对象转换为响应式引用对象。它将响应式对象的属性转换为响应式引用，使得可以单独访问每个属性的响应式状态。示例：const { name, age } = toRefs(state)；

   <template>
     <div>
       <p>Count: {{ count }}</p>
       <p>Double Count: {{ doubleCount }}</p>
       <button @click="increment">Increment</button>
     </div>
   </template>
   
   <script>
   import { ref, computed, watch, onMounted } from 'vue';
   
   export default {
     setup() {
       // 创建一个响应式数据引用
       const count = ref(0);
   
       // 创建一个计算属性
       const doubleCount = computed(() => count.value * 2);
   
       // 创建一个侦听器
       watch(count, (newVal, oldVal) => {
         console.log('Count changed:', newVal);
       });
   
       // 在组件挂载后执行的回调函数
       onMounted(() => {
         console.log('Component mounted');
       });
   
       // 定义一个方法
       const increment = () => {
         count.value++;
       };
   
       // 返回需要在模板中使用的数据和方法
       return {
         count,
         doubleCount,
         increment,
       };
     },
   };
   </script>
   

   上面这段代码是包含了Composition API各核心函数。
    

   在这个例子中，我们使用了 Composition API 的各个核心函数。
   使用 ref 函数创建了一个名为 count 的响应式数据引用，并将其初始值设置为 0。
   使用 computed 函数创建了一个名为 doubleCount 的计算属性，它根据 count 的值计算出双倍的值。