理解响应式系统核心：合理触发响应

前端

2023-09-10 03:26:35

在上一篇文章中，我们加强了对对象的拦截，解决了以下问题：

拦截in操作符
拦截for in循环
拦截对象的删除操作

接下来我们在对响应式系统做一些优化，避免一些不必要的响应。

优化响应式系统

为了避免不必要的响应，我们需要合理地触发响应。

避免重复响应

当我们修改一个对象中的属性时，响应式系统会触发响应。但是，如果我们立即再次修改同一个属性，则不需要再次触发响应。

例如：

const obj = {
  name: 'John'
}

// 第一次修改
obj.name = 'Mary'

// 第二次修改
obj.name = 'Bob'

在上面的代码中，当我们第一次修改obj.name时，响应式系统会触发响应。但是，当我们立即再次修改obj.name时，就不需要再次触发响应。

为了避免这种重复响应，我们可以使用一个叫做debounce的技术。debounce可以确保在一段时间内只触发一次响应。

const obj = {
  name: 'John'
}

// 使用debounce包装修改函数
const debouncedSetName = debounce(function(newName) {
  obj.name = newName
}, 300)

// 修改obj.name
debouncedSetName('Mary')

// 300毫秒内再次修改obj.name
debouncedSetName('Bob')

在上面的代码中，我们使用debounce包装了setName函数。debounce函数会确保在300毫秒内只触发一次setName函数。因此，当我们在300毫秒内再次修改obj.name时，就不会触发响应。

仅响应必要属性

当我们修改一个对象的属性时，响应式系统会触发响应。但是，如果我们修改了一个对象中的属性，而这个属性不影响任何视图，则不需要触发响应。

例如：

const obj = {
  name: 'John',
  age: 30,
  address: '123 Main Street'
}

// 修改obj.address
obj.address = '456 Elm Street'

在上面的代码中，当我们修改obj.address时，响应式系统会触发响应。但是，obj.address属性不影响任何视图，因此不需要触发响应。

为了避免这种不必要的响应，我们可以使用一个叫做computed的技术。computed可以让我们定义一个属性，该属性的值是其他属性的函数。当其他属性发生变化时，computed属性的值也会发生变化。但是，computed属性只有在被使用时才会被计算。

const obj = {
  name: 'John',
  age: 30,
  address: '123 Main Street'
}

// 定义一个computed属性
const formattedAddress = computed(() => {
  return `${obj.address}, ${obj.city}, ${obj.state}`
})

// 修改obj.address
obj.address = '456 Elm Street'

// formattedAddress的值不会发生变化
console.log(formattedAddress.value)

在上面的代码中，我们使用computed定义了一个属性formattedAddress。formattedAddress的值是obj.address、obj.city和obj.state的函数。当obj.address发生变化时，formattedAddress的值也会发生变化。但是，formattedAddress只有在被使用时才会被计算。因此，当我们在控制台中打印formattedAddress.value时，formattedAddress的值不会发生变化。