什么是响应式状态？

admin

响应式状态（Reactive State）是 Vue 的核心特性，简单说就是：数据变化时，视图会自动更新。
1. Vue 3 中创建响应式状态：

1. // 1. ref 用于简单类型
   
2. import { ref } from 'vue'
   
3. const count = ref(0)
   
4. 
   
5. // 2. reactive 用于对象
   
6. import { reactive } from 'vue'
   
7. const state = reactive({
   
8.   count: 0,
   
9.   name: 'Vue'
   
10. })

复制代码

2. 实际使用例子：

1. <template>
   
2.   <div>
   
3.     <p>{{ count }}</p>
   
4.     <button @click="count++">加 1</button>
   
5.   </div>
   
6. </template>
   
7. 
   
8. <script setup>
   
9. import { ref } from 'vue'
   
10. 
    
11. const count = ref(0)  // 响应式状态
    
12. </script>

复制代码

3.响应式原理简述：

1. // Vue 会跟踪数据的变化
   
2. const count = ref(0)
   
3. 
   
4. // 修改数据时
   
5. count.value++  // 视图自动更新
   
6. 
   
7. // 对象的情况
   
8. const state = reactive({
   
9.   count: 0
   
10. })
    
11. state.count++  // 视图自动更新

复制代码

简单理解：
响应式状态 = 会自动影响视图的数据
数据变化 → 视图自动更新
类似于 Excel 表格的公式计算