ref(...)

4 阅读1分钟

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 会帮你解包)