探索 mini-vue reactivity 模块的新特性及重构

2023-12-27 07:52:08

扩展 reactivity 模块的新特性

在之前的文章中，我们已经介绍了 reactivity 模块的基础概念和实现原理。现在，我们将继续扩展该模块，增加一些新特性，使其更加强大和灵活。

Readonly

Readonly 是一个非常有用的特性，它可以防止对象被意外修改。在 mini-vue 中，我们可以使用 readonly 函数来创建一个只读的响应式对象。

const obj = readonly({
  name: 'Zhang San',
  age: 18
})

obj.name = 'Li Si' // 不会生效
console.log(obj.name) // 'Zhang San'

isReactive 和 isReadonly

isReactive 和 isReadonly 这两个函数可以用来判断一个对象是否是响应式的或只读的。

const obj1 = reactive({
  name: 'Zhang San'
})

const obj2 = readonly({
  name: 'Li Si'
})

console.log(isReactive(obj1)) // true
console.log(isReadonly(obj1)) // false
console.log(isReactive(obj2)) // false
console.log(isReadonly(obj2)) // true

修复 stop 的 bug

在之前的版本中，stop 函数存在一个 bug，它无法正确地停止对对象的跟踪。现在，我们已经修复了这个 bug，确保 stop 函数能够正常工作。

嵌套 reactive

在某些情况下，我们需要对嵌套的对象进行响应式处理。在 mini-vue 中，我们可以使用 nestedReactive 函数来创建一个嵌套的响应式对象。

const obj = nestedReactive({
  name: 'Zhang San',
  address: {
    street: 'Beijing Road',
    city: 'Shanghai'
  }
})

obj.address.street = 'Nanjing Road' // 会触发更新

console.log(obj.address.street) // 'Nanjing Road'