Vue3+Vite实现工程化，响应式ref和reactive_vue3 vite reactive

      此处的响应式是指：数据模型发生变化时，自动更新DOM树内容，页面上显示的内容会进行同步变化，vue3的数据模型不是自动响应式的（Vue2中默认是响应式的），需要我们做一些特殊的处理

1、实现+ - 按钮数字加一减一

<script setup>
let counter = 0;
 
function show() {
  alert(counter)
}
</script>
 
<template>
      <div>
        <button @click="counter--">-</button>
        {{counter}}
        <button @click="counter++">+</button>
        <hr>
        <!--此案例，我们发现counter值，会改变，但是页面不改变！默认Vue3的数据是非响应式的！-->
        <button @click="show()">显示counter值</button>
      </div>
</template>
 
 

2、响应式实现关键字ref

                ref 可以将一个基本类型的数据（如字符串，数字等）转换为一个响应式对象。ref只能包裹单一元素。

<script setup>
//从vue中引入ref方法
import {ref} from "vue";
 
let counter = ref(0);
//函数中要操作ref处理过的数据，需要通过.value形式
let decre=()=>{
  counter.value--;
}
let incre=()=>{
  counter.value++;
}
 
function show() {
  alert(counter.value)
}
</script>
<template>
      <div>
        <button @click="counter--">-</button>
        <button @click="decre">-</button>
        <button @click="decre()">-</button>
        {{counter}}
        <button @click="counter++">+</button>
        <button @click="incre">+</button>
        <button @click="incre()">+</button>
        <hr>
        <button @click="show()">显示counter值</button>
      </div>
</template>
 
 

•  在上面的例子中，我们使用ref包裹了一个数字，在代码中给这个数字加1后，试图也会跟着动态更新。需要注意的是，由于使用了ref，因此需要在访问改对象时使用.value来获取其实际值。

3、响应式实现关键字reactive

            我们可以使用reactive()函数创建一个响应式对象和数组：

<script setup>
import {reactive, ref} from "vue";
/*
let person=ref({
  age: 20
})
//函数中要操作ref处理过的数据，需要通过.value形式
let decre=()=>{
  person.value.age--;
}
let incre=()=>{
  person.value.age++;
}
function show() {
  alert(person.value.age)
}
*/
let person=reactive({
  age: 20,
})
let decre=()=>{
  person.age--
}
let incre=()=>{
  person.age++
}
function show() {
  alert(person.age);
}
</script>
 
<template>
      <div>
        <button @click="person.age--">-</button>
        <button @click="decre">-</button>
        <button @click="decre()">-</button>
        {{person.age}}
        <button @click="person.age++">+</button>
        <button @click="incre">+</button>
        <button @click="incre()">+</button>
        <hr>
        <button @click="show()">显示person的年龄</button>
      </div>
</template>
 
 

 4、ref适用开发场景

• 包装基本数据类型：ref主要用于包装基本类型数据（如字符串、数字等），即只有一个值的数据，如果你想监听这个值的变化，用ref最方便。在组件中使用时也很常见。
• 访问方式简单：ref对象在访问时与普通的基本类型值没有太大区别，只需要.value访问其实际值即可。

 5、reactive适用开发场景

• 包装复杂对象：reactive可以将一个普通对象转化为响应式对象，这样在数据变化时会自动更新界面，特别适用于处理复杂对象或者数据结构
• 需要递归监听的属性：使用reactive可以递归追踪所有响应式对象内部的变化，从而保证界面的自动更新

 7、总结

• 综上所述，ref适合与简单情形下的数据双向绑定，对于只有一个字符等基本类型数据或自定义组件等情况，建议可以使用ref；而对于对象、函数等较为复杂的数据结构，以及需要递归监听的属性变化，建议使用reactive。当然，在实际项目中根据需求灵活选择也是十分必要的。