揭秘Vue3 reactive与readonly的嵌套转换与实现shallowReadonly

2023-11-06 17:41:44

探索 Vue 3 中响应式嵌套对象的神奇世界

前言

在 Vue 3 中，响应式对象是构建交互式应用程序的秘密武器。凭借 reactive() 和 readonly() 函数，我们能够创建对象，当属性更改时可以自动更新 UI。本文将深入探讨嵌套对象在响应式世界中的行为，揭示浅只读的强大功能，并通过代码示例和常见问题解答巩固你的理解。

响应式嵌套对象

reactive() 函数将普通对象转换为响应式对象，这意味着对属性的任何更改都会触发 UI 更新。有趣的是，嵌套对象中的对象也具有响应性，与原始对象具有相同的功能。

只读嵌套对象

readonly() 函数创建只读响应式对象，它允许 Vue.js 跟踪属性，但禁止对其进行修改。这确保了嵌套对象中的对象也是只读的。

shallowReadonly: 灵活的只读

shallowReadonly() 函数通过创建浅只读对象提供了灵活性。虽然父对象是响应式的，但子对象是只读的。这意味着我们可以修改嵌套对象，但不能修改其子对象。

代码示例：验证响应式行为

const nestedObject = {
  foo: 'bar',
  baz: {
    qux: 'quux'
  }
};

const reactiveObject = Vue.reactive(nestedObject);

console.log(reactiveObject.foo); // 'bar'
console.log(reactiveObject.baz.qux); // 'quux'

reactiveObject.foo = 'updated';
console.log(reactiveObject.foo); // 'updated'

reactiveObject.baz.qux = 'updated';
console.log(reactiveObject.baz.qux); // 'updated'

此代码示例展示了嵌套对象的响应性，修改任何属性都会更新日志输出。

浅只读验证示例

const nestedObject = {
  foo: 'bar',
  baz: Vue.shallowReadonly({
    qux: 'quux'
  })
};

const reactiveObject = Vue.reactive(nestedObject);

console.log(reactiveObject.foo); // 'bar'
console.log(reactiveObject.baz.qux); // 'quux'

reactiveObject.foo = 'updated';
console.log(reactiveObject.foo); // 'updated'

reactiveObject.baz.qux = 'updated'; // 错误：无法设置只读属性