¿Por qué a los entrevistadores siempre les gusta preguntar cómo se implementa la computación?

Quizás tú y yo nunca nos hayamos conocido, pero es muy probable que nos conozcamos tarde, yo soy el pez cabeza gorda de front-end

prefacio

A través de los artículos anteriores, tenemos una comprensión preliminar del diseño receptivo en Vue3.

1. Entrevistador: Ni siquiera puedo escribir el sistema de respuesta Vue3, ¿te atreves a decir que eres competente?
2. Entrevistador: ¿Crees que el sistema receptivo de Vue es solo un Proxy?
3. Vue3: Resulta que eres una "actualización asíncrona"

En cuanto a las propiedades calculadas ( ) que se usan todos los días computed, supongo que también debes querer entrometerte en sus secretos y principios, ¡verdad! ¡vamos! ! !

A partir de las características de computado

computed¿Cuáles son las características más deslumbrantes?

1. Seguimiento de dependencia

import { reactive, computed } from 'vue'

const state = reactive({
  a: 1,
  b: 2,
  c: 3,
})
const sum = computed(() => {
  return state.a + state.b
})

Definimos datos receptivos statey una propiedad calculada , y sumVue rastreará automáticamente sumlos datos dependientes y establecerá las dependencias correspondientes.state.astate.b

Es decir, solo state.acuando state.bla suma cambie, se sumvolverá a calcular, y state.cno importa cómo cambie, sumno se verá afectada en absoluto.

2. caché

Aún con el ejemplo anterior, si state.ael state.bvalor ya no cambia después de ser eliminado, sumcuando lo leamos, devolverá el resultado del último cálculo en lugar de volver a calcular.

3. Computación perezosa

Esta característica es relativamente fácil de ignorar. En pocas palabras, solo se calculará cuando la propiedad calculada se use (lea), de lo contrario, solo definiremos una variable.

import { reactive, computed } from 'vue'

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})

const sum = computed(() => {
  console.log('执行计算')
  return state.a + state.b
})

setTimeout(() => {
  // 没有读取sum.value之前，sum不会进行计算
  console.log('1-sum', sum.value)
  // 我们改变了a的值，但是sum并不会立刻进行计算
  state.a = 4

  setTimeout(() => {
    // 而是要等到再次读取的时候才会触发重新计算
    console.log('2-sum', sum.value)
  }, 1000)
}, 1000)

Implementar características calculadas una por una

1. Computación perezosa

Todavía effecthacemos cosas en torno a las funciones y, hasta ahora, effectlas devoluciones de llamada registradas se ejecutan de inmediato.

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})
// 有没有很像计算属性的感觉
const sum = effect(() => {
  console.log('执行计算') // 立刻被打印
  const value = state.a + state.b
  return value
})

console.log(sum) // undefined

Si desea implementar computedla ejecución diferida, podemos consultar el artículo anterior Vue3: resulta que tiene una idea de "actualización asíncrona", agregando un parámetro adicional lazy.

它要实现的功能是：如果传递了lazy为true，副作用函数将不会立即执行，而是将执行的时机交还给用户，由用户决定啥时候执行。

当然啦！回调的结果我们也应该一并返回（例如上面的value值）

你能想象，我们仅仅需要改造几行代码就能离computed近了一大步。

const effect = function (fn, options = {}) {
  const effectFn = () => {
    // ... 省略
    // 新增res存储fn执行的结果
    const res = fn()
    // ... 省略
    // 新增返回结果
    return res
  }
  // ... 省略
  // 新增，只有lazy不为true时才会立即执行
  if (!options.lazy) {
    effectFn()
  }
  // 新增，返回副作用函数让用户执行
  return effectFn
}

测试一波

const state = reactive({
  a: 1,
  b: 2,
  c: 3,
});
// 有没有很像计算属性的感觉
const sum = effect(() => {
  console.log("执行计算"); // 调用sum函数后被打印
  const value = state.a + state.b;
  return value;
}, {
  lazy: true
});
// 不执行sum函数，effect注册的回调将不会执行
console.log(sum()); // 3

2. 依赖追踪

咱们初步实现了懒执行的特性，为了更像computed一点，我们需要封装一个函数。

function computed (getter) {
  const effectFn = effect(getter, {
    lazy: true,
  })

  const obj = {
    get value () {
      return effectFn()
    }
  }

  return obj
}

这就有点那么味道啦！

测试一波

可以看到computed只会依赖state.a和state.b，而不会依赖state.c，这得益于我们前面几篇文章实现的响应式系统，所以到了计算属性这里，我们不用改动任何代码，天然就支持。

不过还是有点小问题，我们读取了两次sum.value，sum却被执行了两次，这和computed缓存的特性就不符了。

别急，马上就要实现了这个最重要的特性了。

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})

const sum = computed(() => {
  console.log('执行计算')
  return state.a + state.b
})

console.log(sum.value)
console.log(sum.value)

3. 缓存

回顾一下computed的缓存特性:

1. 只有当其依赖的东西发生变化了才需要重新计算
2. 否则就返回上一次执行的结果。

为了缓存上一次计算的结果，咱们需要定义一个value变量，现在的关键是怎么才能知道其依赖的数据发生变化了呢？

function computed (getter) {
  const effectFn = effect(getter, {
    lazy: true,
  })
  let value
  let dirty = true

  const obj = {
    get value () {
      // 2. 只有数据发生变化了才去重新计算
      if (dirty) {
        value = effectFn()
        dirty = false
      }

      return value
    }
  }

  return obj
}

测试一波

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})

const sum = computed(() => {
  console.log('执行计算')
  return state.a + state.b
})

console.log(sum.value) // 3
console.log(sum.value) // 3

state.a = 4

console.log(sum.value) // 3 答案是错误的

寄上任务调度

不得不说，任务调度实在太强大了，不仅仅可以实现数组的异步批量更新、在computed和watch中也是必不可少的。

function computed (getter) {
  const effectFn = effect(getter, {
    lazy: true,
    // 数据发生变化后，不执行注册的回调，而是执行scheduler
    scheduler () {
      // 数据发生了变化后，则重新设置为dirty，那么下次就会重新计算
      dirty = true
    }
  })
  let value
  let dirty = true

  const obj = {
    get value () {
      // 2. 只有数据发生变化了才去重新计算
      if (dirty) {
        value = effectFn()
        dirty = false
      }

      return value
    }
  }

  return obj
}

测试一波

const state = reactive({
  a: 1,
  b: 2,
  c: 3
})

const sum = computed(() => {
  console.log('执行计算')
  return state.a + state.b
})

console.log(sum.value) // 3
console.log(sum.value) // 3

state.a = 4

console.log(sum.value) // 3 答案是错误的

完美！！！这下面试官再也难不倒我了！！！

结尾

最近在阅读霍春阳大佬的 《Vue.js技术设计与实现》，本文的内容主要来源于这本书，强烈推荐对Vue底层实现感兴趣的同学阅读。