vue-响应式变量（ref&&reactive）

之前笔者在学校里的时候，做过一些前端相关的企业级开发项目，但毕竟是学生时代，做的项目破绽百出，主打一个能用就行，什么效率，什么框架优点完全不考虑。直到最近接手了一个公司前辈的项目，对比人家写的代码，再回想起自己写的代码，简直是在用马力来拉火车，主打一个现代+中世纪的魔幻感，其中一部分就是今天我们要讲的主题，vue的特色，响应式变量。

响应式变量主要有ref和reactive两种，ref vue2，3都有，reactive则是vue3才引进的，ref函数会返回一个带有value和.value属性的对象，当你要读取或修改该对象的值时，唯一方法是使用.value属性
for example：

import { ref } from 'vue';

// 创建一个带有初始值0的响应式变量
const count = ref(0);

// 读取count的值
console.log(count.value); // 输出: 0

// 修改count的值
count.value++;
console.log(count.value); // 输出: 1

ref可以定义任意属性的变量，他只代表了该变量是响应式的

相对于ref，reactive用于绑定复杂的数据类型，如数组，对象
所以，reactive访问对象的值时，不像ref一样必须使用.value方法，只需要对象名.属性名的方法即可访问。
such as：

import { reactive } from 'vue';

// 创建一个响应式对象
const state = reactive({
  count: 0,
  name: 'Vue',
  nested: {
    info: 'Nested property'
  }
});

// 访问和修改属性
console.log(state.count); // 输出: 0
state.count++;
console.log(state.count); // 输出: 1

// 修改嵌套对象的属性
state.nested.info = 'Updated nested property';

介绍完了响应式变量，我们来谈谈为什么要使用响应式变量，响应式变量的好处是显而易见的，其能够使数据的变化能够自动反映在用户界面中，而无需手动刷新或更新视图。
回想起我之前写代码的时候，用传统变量，每次操作完就要调用一个手动的刷新函数，一个系统有10来个环节，每个环节结束我都要手动刷新，三个大模块写到后面我人都晕掉了，维护起来更是一团乱麻，牛魔的哪知道哪里要调哪个刷新函数。
而用响应式变量的好处是显而易见的，不用手动刷新，数据修改完页面自动更新。所以我一开始接手这个项目的时候还在找刷新函数在哪呢，找了半天，前辈用的是响应式变量，感谢前辈，维护工作量瞬间小了好多，加个新模块也很快就搞定了。
说起来，也不知道之前写的那个系统还在不在使用，我的锅，把一个复杂的系统搞得更复杂了。。。。。。