【Vue3 基础篇】02.声明式渲染

在Vue 3中，可以使用<script setup>来创建组件，这样可以更直接地编写组件逻辑，避免了Vue 2中data、methods等的使用。

以下是一个简单的Vue 3组件示例，使用<script setup>进行声明式渲染：

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="increment">点击我</button>
    <p>点击次数: {{ count }}</p>
  </div>
</template>
 
<script setup>
import { ref, reactive } from 'vue'
 
// 使用 ref 创建响应式基本类型数据
const count = ref(0)
 
// 使用 reactive 创建响应式对象
const state = reactive({ message: 'Hello Vue 3!' })
 
// 使用方法更新 count 的值
function increment() {
  count.value++
}
</script>

在这个例子中，我们创建了一个包含消息、点击次数和点击按钮的简单组件。通过<script setup>，我们直接在模板中使用了count和increment，无需在模板外部编写methods。state是一个响应式对象，包含消息文本，它也直接在模板中使用，而不是通过计算属性或方法返回。这种声明式的方式使得组件的逻辑更加直观和简洁。