ref(...)适合:单个值/基础类型/需要 .value
<template>
<div>count: {{ count }}</div>
<button @click="count++">+1</button>
<div style="margin-top:12px;">
<input v-model="name" placeholder="输入名字" />
<p>name: {{ name }}</p>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// 数字
const count = ref(0)
// 字符串
const name = ref('Tom')
</script>
要点:
- 在
<template>里用 count / name 不用写 .value
- 在
<script>里读写要用 .value(但像上面 count++ 是模板事件里,Vue 会帮你解包)