【vue for beginner】ref和reactive
🌈Don’t worry , just coding!
内耗与overthinking只会削弱你的精力，虚度你的光阴，每天迈出一小步，回头时发现已经走了很远。
📗概念
在 Vue 3 中，ref 和 reactive 是用于创建响应式数据的两种主要方法。
ref
用法
ref 用于创建一个基本数据类型的响应式引用（如字符串、数字、布尔值等）或对象的引用。
通过 .value 属性访问和修改其值。
示例
import { ref } from 'vue';
const count = ref(0);
function increment() {
count.value++;
}
reactive
用法
reactive 用于创建一个响应式对象，适用于更复杂的数据结构，如对象和数组。
直接访问和修改对象的属性。
示例
import { reactive } from 'vue';
const state = reactive({
count: 0,
message: 'Hello, Vue!'
});
function increment() {
state.count++;
}
区别
总结
- 若需要一个基本类型的响应式数据，必须使用ref。
- 若需要一个响应式对象，层级不深，ref、reactive都可以，推荐用reactive。
- 若需要一个响应式对象，且层级较深，推荐使用reactive。
- ref创建的变量必须使用.value（可以使用volar插件自动添加.value）
- reactive重新分配一个新对象，会失去响应式（可以使用Object.assign去整体替换）。
💡 reactive响应式怎么理解
在 Vue 3 中，使用 reactive 创建的对象是响应式的，但如果你重新分配一个新对象给这个响应式对象的引用，它将失去响应性。
理解响应式的基本原理
响应式对象:
使用 reactive 创建一个对象时，Vue 会通过代理（Proxy）机制使这个对象的属性变得响应式。这意味着当你修改对象的属性时，Vue 会自动更新依赖于这些属性的组件。
重新分配新对象:
直接将一个新对象赋值给原来的响应式对象，例如：
const state = reactive({ count: 0 });
state = { count: 1 }; // 失去响应性
state 现在引用了一个新的对象，而原来的 state 对象仍然是响应式的，无法再通过 state 访问到它。
使用 Object.assign
为了保持响应性并更新对象的内容，可以使用 Object.assign 或扩展运算符（spread operator）来更新对象的属性，而不是重新赋值整个对象。例如：
使用 Object.assign
Object.assign(state, { count: 1 });
使用扩展运算符
能达到更新state的目的，但是会导致失去响应性
state = { ...state, count: 1 }; // 不推荐，因为这会导致失去响应性
总结
失去响应性: 重新分配一个新对象会使原有的响应式对象失去响应性。
使用 Object.assign: 通过 Object.assign 方法更新属性，可以保持对象的响应性。
💪无人扶我青云志，我自踏雪至山巅。
