一、reactive()

image.png

<script setup>
import { reactive } from "vue";
const state = reactive({
  count: 1,
});
const addCount = () => {
  state.count++;
};
</script>

<template>
  <h1>{{ state.count }}</h1>
  <button @click="addCount">点我+1</button>
</template>

二、ref()

image.png

本质：是在原有传入数据的基础上，外层包了一层对象，包成了复杂类型
底层：包成复杂类型之后，再借助 reactive 实现的响应式
注意点:

1. 脚本中访问数据，需要通过 .value
2. 在template中，.value不需要加 (帮我们扒了一层)
   推荐: 以后声明数据，统一用 ref => 统一了编码规范

<script setup>
import { ref } from "vue";
const count = ref(0);

const addCount = () => {
  count.value++;
};
</script>

<template>
  <h1>{{ count }}</h1>
  <button @click="addCount">点我+1</button>
</template>

三、总结

image.png