Vue3从零开始——掌握setup、ref和reactive函数的奥秘

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>
 
<script>
import { ref, reactive } from 'vue';
 
export default {
  setup() {
    // 使用ref创建响应式的基本类型数据
    const count = ref(0);
 
    // 使用reactive创建响应式的对象
    const state = reactive({
      message: 'Hello Vue 3!'
    });
 
    // 定义一个方法用于增加count的值
    function increment() {
      count.value++;
    }
 
    // 暴露到模板，返回一个对象，这样模板就可以访问这些变量和函数
    return {
      count,
      state,
      increment
    };
  }
};
</script>

这个简单的Vue 3组件示例展示了如何使用setup函数、ref函数和reactive函数来创建响应式数据和方法。setup函数是Vue 3组件中一个新的组成部分，它在组件实例被创建时执行，允许我们使用Composition API。ref用于基本类型数据，而reactive用于复杂对象类型。通过setup函数返回的对象，我们可以在模板中访问这些响应式数据和方法。