Vue3 响应式 API 及 reactive 和 ref 的用法示例详解

<template>
  <p>
    响应式Count: {{ reactiveCount.count }}
    <button @click="reactiveCount.count++">++</button>
  </p>
</template>
<script setup lang="ts">
import { reactive } from "vue";
interface CountObject {
  count: number;
}
const reactiveCount = reactive<CountObject>({ count: 0 });
</script>

<template>
  <p>学生: {{ student.name }}</p>
  <p>成绩: {{ student.test_socre.name }} | {{ student.test_socre.score }}分</p>
  <button @click="rest">rest mark</button>
</template>
<script setup lang="ts">
import { reactive } from "vue";
interface Student {
  name: string;
  test_socre: {
    name: string;
    score: number;
  };
}
const student = reactive<Student>({
  name: "ghz",
  test_socre: {
    name: "C语言",
    score: 98,
  },
});
const rest = () => {
  student.test_socre.score = 0;
};
</script>

<template>
  <div></div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const str = ref<string>("hello");
const num = ref<number>(123);
const bool = ref<boolean>(true);
const bigint = ref<bigint>(9007199254740991n);
const symbolObject = Symbol("foo");
const symb = ref<symbol>(symbolObject);
const und = ref<undefined>(undefined);
const nul = ref<null>(null);
console.log(str.value); // hello
console.log(num.value); // 123
console.log(bool.value); // true
console.log(bigint.value); // 9007199254740991nX
console.log(typeof symb.value); // symbol
console.log(symb.value); // Symbol(foo)
console.log(und.value); // undefined
console.log(nul.value); // null
</script>