【JeecgBoot-Vue3】第3节 Vue3开发必备知识

在JeecgBoot-Vue3项目中，我们可以使用Vue3的Composition API来创建和使用响应式数据。以下是一个简单的例子，展示如何定义响应式数据和方法：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="incrementCounter">点击我</button>
    <p>计数器值: {{ counter }}</p>
  </div>
</template>
 
<script>
import { ref, reactive, computed } from 'vue';
 
export default {
  name: 'MyComponent',
  setup() {
    // 响应式基本数据
    const counter = ref(0);
    
    // 定义方法
    function incrementCounter() {
      counter.value++;
    }
 
    // 响应式引用对象
    const state = reactive({
      message: 'Hello Vue3!'
    });
 
    // 计算属性示例
    const fullMessage = computed(() => state.message + ' You clicked me!');
 
    // 暴露到模板
    return {
      counter,
      incrementCounter,
      fullMessage
    };
  }
};
</script>

在这个例子中，我们使用了ref来创建一个响应式的基本数据类型，使用reactive来创建一个响应式的对象，并且定义了一个方法incrementCounter来修改响应式数据。我们还演示了如何使用computed来创建计算属性，它会根据依赖的响应式数据自动更新。最后，我们通过return将需要在模板中使用的响应式数据和方法暴露出去。