一.const 定义的reactive的对象不能直接赋值，定义的ref对象可以给对象的value赋值
在 Vue 3 中，reactive 和 ref 是两种不同的响应式 API，它们的使用方式和适用场景有所不同。以下是对这两者的详细解释，以及如何正确使用它们。
1. reactive
- 定义：
reactive用于创建一个响应式对象。它会将整个对象变为响应式，您可以直接访问和修改对象的属性。 - 赋值：您不能直接将一个新的对象赋值给
reactive创建的对象，但可以修改其内部属性。
示例
import { reactive } from 'vue';
const state = reactive({
count: 0,
name: 'Alice'
});
// 修改属性
state.count += 1; // 正确
state.name = 'Bob'; // 正确
// 不能直接赋值一个新的对象
// state = { count: 10 }; // 错误：Assignment to constant variable.
2. ref
- 定义：
ref用于创建一个响应式引用，通常用于基本数据类型（如数字、字符串等）或单个对象。ref返回一个对象，该对象有一个value属性，您需要通过value来访问和修改其值。 - 赋值：您可以直接将新的值赋给
ref对象的value属性。
示例
import { ref } from 'vue';
const count = ref(0);
const user = ref({ name: 'Alice' });
// 修改值
count.value += 1; // 正确
user.value.name = 'Bob'; // 正确
// 可以直接赋值一个新的值
count.value = 10; // 正确
user.value = { name: 'Charlie' }; // 正确
总结
reactive：用于创建响应式对象，适合用于复杂的对象结构。您可以直接修改其属性，但不能将整个对象替换为另一个对象。ref：用于创建响应式引用，适合用于基本数据类型或单个对象。您可以通过value属性访问和修改其值，并且可以直接赋值新的值。
选择使用 reactive 还是 ref 取决于您的具体需求。如果您需要处理一个复杂的对象，使用 reactive 是更合适的选择；如果您需要处理基本类型或希望能够直接替换值，使用 ref 更为方便。
二：const form = reactive(){id:1,name:2,age:3,num:4} 怎样循环属性赋值
在 Vue 3 中，使用 reactive 创建的对象可以通过 for...in 循环来遍历其属性并进行赋值。以下是一个示例，展示如何循环 reactive 对象的属性并赋值。
示例代码
import { reactive } from 'vue';
export default {
setup() {
// 创建一个 reactive 对象
const form = reactive({
id: 1,
name: 2,
age: 3,
num: 4
});
// 函数：循环属性并赋值
const updateFormValues = (newValues) => {
for (const key in form) {
if (form.hasOwnProperty(key) && newValues.hasOwnProperty(key)) {
form[key] = newValues[key]; // 赋值
}
}
};
// 示例：更新表单值
const newValues = {
id: 10,
name: 'John',
age: 25,
num: 100
};
// 调用函数更新值
updateFormValues(newValues);
return {
form
};
}
};
说明
-
创建
reactive对象：使用reactive创建一个对象form，包含多个属性（id,name,age,num）。 -
循环属性赋值：
- 定义一个函数
updateFormValues，接受一个新值对象newValues。 - 使用
for...in循环遍历form对象的属性。 - 使用
hasOwnProperty检查属性是否属于对象本身，并确保newValues中也有对应的属性。 - 将
newValues中的值赋给form对应的属性。
- 定义一个函数
-
示例更新：创建一个
newValues对象，包含新的值，并调用updateFormValues函数来更新form的属性。
总结
通过使用 for...in 循环，您可以轻松地遍历 reactive 对象的属性并进行赋值。这种方法适用于需要批量更新对象属性的场景。确保在赋值之前检查属性的存在性，以避免潜在的错误。
三：直接form.hasOwnProperty(key)浏览器运行没有问题，但是，git提交代码eslint校验的时候，会报错error Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins
解决方案：
对于错误：error Do not access Object.prototype method 'hasOwnProperty' from target object no-prototype-builtins
这个错误提示是来自 ESLint 的 no-prototype-builtins 规则，它建议不要直接在对象上调用 Object.prototype 的方法（如 hasOwnProperty、isPrototypeOf 和 propertyIsEnumerable），以避免潜在的错误。这是因为如果对象被篡改，可能会导致这些方法不可用。
解决方案
为了避免这个错误，您可以使用 Object.prototype.hasOwnProperty.call 方法来安全地调用 hasOwnProperty。这样可以确保即使对象被篡改，您仍然可以正确地检查属性。
示例代码
以下是如何使用 Object.prototype.hasOwnProperty.call 的示例：
const obj = {
name: 'Alice',
age: 25
};
const hasOwn = Object.prototype.hasOwnProperty.call(obj, 'name');
console.log(hasOwn); // true
const hasGender = Object.prototype.hasOwnProperty.call(obj, 'gender');
console.log(hasGender); // false
在循环中使用
如果您在循环中使用 hasOwnProperty，可以这样写：
const form = {
id: 1,
name: 2,
age: 3,
num: 4
};
const newValues = {
id: 10,
name: 'John',
age: 25
};
for (const key in form) {
if (Object.prototype.hasOwnProperty.call(form, key) && Object.prototype.hasOwnProperty.call(newValues, key)) {
form[key] = newValues[key]; // 赋值
}
}
总结
使用 Object.prototype.hasOwnProperty.call 是一种安全的方式来检查对象的自身属性，避免了直接在对象上调用 hasOwnProperty 可能带来的问题。这种方法可以确保代码的健壮性，并符合 ESLint 的最佳实践。
