Vue3 响应式 API：工具函数（一）

isRef()

isRef 是一个简单的工具函数，它接受一个参数并返回一个布尔值，指示该参数是否是一个由 ref 创建的响应式引用。
在某些情况下，你可能需要编写一些通用逻辑或函数，这些逻辑或函数需要处理不同类型的响应式数据（如 ref 和 reactive 创建的数据）。

import { isRef, reactive, ref } from 'vue';  function getValue(data) {  if (isRef(data)) {  return data.value;  } else {  // 假设 data 是一个由 reactive 创建的对象，并且我们想要访问其名为 'prop' 的属性  return data.prop;  }  
}  
const count = ref(0);  
const obj = reactive({ prop: 'Hello' });   
console.log(getValue(count)); // 输出: 0  
console.log(getValue(obj)); // 输出: 'Hello'

unref()

1. 如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val 计算的一个语法糖。
2. unref 的主要作用是简化从 ref 或非 ref 值中获取实际值的逻辑。如果传递给 unref 的是一个 ref，则 unref 返回其 value 属性；如果传递的是一个非 ref 值（如原始值或对象），则直接返回该值。
3. 当你编写需要处理可能来自不同来源（如 ref 或直接值）的响应式数据的组件或函数时，unref 非常有用。使用 unref 可以确保你始终处理的是实际的值，而不是 ref 对象本身。

import { ref, unref } from 'vue';  // 创建一个 ref  
const count = ref(0);  // 使用 unref  
const countValue = unref(count); // countValue 现在是 0，而不是 ref 对象  // 如果传递一个非 ref 值给 unref  
const nonRefValue = 'Hello, Vue!';  
const result = unref(nonRefValue); // result 现在是 'Hello, Vue!'，没有变化

toRef()

1. toRef 的主要作用是将一个响应式对象中的属性转换为一个响应式引用。这个新的 ref 将与原始对象中的属性保持响应式关联，即当原始属性发生变化时，ref 的值也会自动更新，反之亦然。
2. 使用 toRef 的主要场景是在你需要将一个响应式对象中的属性作为独立的响应式引用传递或存储时。这在你想要保持原始对象完整性的同时，又想要以更灵活的方式操作其属性时特别有用。
3. 你可能有一个组件，该组件接收一个响应式对象作为 prop，但你需要将对象中的某个属性作为独立的响应式引用来传递给子组件。在这种情况下，你可以使用 toRef 来创建这个独立的引用，并将其传递给子组件。这样，子组件就可以独立地监听和更新这个属性的值，而不会影响到原始对象的其他属性。

import { reactive, toRef } from 'vue';  // 使用 reactive 创建一个响应式对象  
const state = reactive({  count: 0,  name: 'Vue 3'  
});  // 使用 toRef 创建一个响应式引用，该引用与 state.count 保持响应式关联  
const countRef = toRef(state, 'count');  // 现在，你可以像使用普通的 ref 一样使用 countRef  
console.log(countRef.value); // 输出: 0  // 修改 countRef 的值也会更新 state.count  
countRef.value++;  
console.log(state.count); // 输出: 1  // 同样地，修改 state.count 也会更新 countRef 的值  
state.count++;  
console.log(countRef.value); // 输出: 2

toValue()

• 使用 toValue（或 unref）的主要目的是确保无论传入的值是 ref 还是非 ref，你都能获取到其实际的值。这在处理可能来自不同来源（如用户输入、组件属性、Vuex 状态等）的响应式数据时非常有用。

function toValue(val) {  return isRef(val) ? val.value : val;  
}  // 使用假设的 toValue 函数  
const count = ref(0);  
const nonRefValue = 'Hello, Vue!';  console.log(toValue(count)); // 输出: 0  
console.log(toValue(nonRefValue)); // 输出: 'Hello, Vue!'

toRefs()

• toRefs 的主要作用是将一个由 reactive 创建的响应式对象的所有属性转化为响应式的 ref 对象，并返回一个包含这些 ref 对象的普通对象。这样做的好处是，在组件的模板中可以直接使用这些属性，而无需担心它们是 ref 还是普通的值。
• 使用 toRefs 的主要原因是它提供了一种方便的方式来在组件模板中直接使用响应式对象的属性，而无需在每次访问属性时都添加 .value。
• toRefs 还允许你保持对原始响应式对象的引用，这样你就可以在 setup 函数内部继续操作该对象，而无需担心会影响到模板中的绑定。

import { reactive, toRefs } from 'vue';  export default {  setup() {  const state = reactive({  count: 0,  name: 'Vue 3'  });  // 使用 toRefs 将 state 的属性转换为 ref 对象  const { count, name } = toRefs(state);  // 可以在 setup 函数中继续操作 state 或 count/name  function increment() {  state.count++; // 或者 count.value++  }  return {  count, // 这里返回的是 ref 对象，但在模板中可以直接使用 count 而不是 count.value  name,  // 同理  increment  };  }  
};

isReactive()

• isReactive 函数接受一个参数，该参数是你想要检查的对象。如果对象是由 reactive 函数创建的，那么 isReactive 将返回 true；否则，它将返回 false。
• 使用 isReactive 的主要目的是在开发过程中验证一个对象是否已经被转换为响应式对象。这在你需要确保某个对象是否可以被 Vue 的响应式系统追踪其变化时特别有用。

import { reactive, isReactive } from 'vue';  // 创建一个响应式对象  
const reactiveObj = reactive({  name: 'Vue 3',  version: '3.x'  
});  // 使用 isReactive 检查对象是否响应式  
console.log(isReactive(reactiveObj)); // 输出: true  // 创建一个非响应式对象  
const nonReactiveObj = {  message: 'Hello, Vue!'  
};  // 使用 isReactive 检查对象是否响应式  
console.log(isReactive(nonReactiveObj)); // 输出: false

isReadonly()

• isReadonly 函数接受一个参数，即你想要检查的对象。如果对象是由 readonly 函数创建的，那么 isReadonly 将返回 true；否则，它将返回 false。
• 只读对象是一种特殊的响应式对象，其属性是只读的，也就是说，尝试修改只读对象的属性将会失败，并且不会触发视图更新。
• 使用 isReadonly 的主要目的是在开发过程中验证一个对象是否已经被转换为只读对象。这在以下场景中特别有用：

1. 保护状态：当你想要暴露一些状态给外部使用，但又不想让这些状态被意外修改时，可以使用 readonly 创建只读对象，并使用 isReadonly 验证其只读性。
2. 组件间通信：在组件间通过 props 传递数据时，有时你可能希望传递的数据是只读的，以确保子组件不会修改父组件的状态。这时，你可以在父组件中使用 readonly 创建只读对象，并在子组件中使用 isReadonly 验证其只读性。
3. 调试和测试：isReadonly 可以用于调试和测试过程中，帮助你验证对象是否按预期被设置为只读。

import { reactive, readonly, isReadonly } from 'vue';  // 创建一个响应式对象  
const reactiveObj = reactive({  name: 'Vue 3',  version: '3.x'  
});  // 创建一个只读对象  
const readonlyObj = readonly(reactiveObj);  // 使用 isReadonly 检查对象是否只读  
console.log(isReadonly(readonlyObj)); // 输出: true  
console.log(isReadonly(reactiveObj)); // 输出: false  
// 尝试修改只读对象  
readonlyObj.name = 'Cannot change'; // 不会生效，且不会触发任何警告或错误
//只读对象，想暴露给外部使用，但希望可读，这里就不写暴露代码了....