首页 > 其他分享 >记录--为啥面试官总喜欢问computed是咋实现的?

记录--为啥面试官总喜欢问computed是咋实现的?

时间:2023-07-25 19:14:27浏览次数:56  
标签:面试官 const computed -- sum value state console

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

从computed的特性出发

computed最耀眼的几个特性是啥?

1. 依赖追踪

import { reactive, computed } from 'vue'

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

我们定义了一个响应式数据state和一个计算属性sum, Vue会自动追踪sum依赖的数据state.astate.b,并建立相应的依赖关系。

也就是只有state.astate.b发生变化的时候,sum才会重新计算而state.c任由它怎么变,sum都将丝毫不受影响。

2. 缓存

还是上面的例子,如果state.astate.b打死都不再改变值了,那么我们读取sum的时候,它将会返回上一次计算的结果,而不是重新计算。

3. 懒计算

这个特性比较容易被忽略,简单地说只有计算属性真正被使用(读取)的时候才会进行计算,否则咱就仅仅是定义了一个变量而已。

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)

挨个实现computed特性

1. 懒计算

我们依旧围绕effect函数来搞事情,到目前为止,effect注册的回调都是立刻执行。

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

想要实现computed的懒执行,咱们可以参考上篇文章Vue3:原来你是这样的“异步更新”的思路,添加一个额外的参数lazy

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

当然啦!回调的结果我们也应该一并返回(例如上面的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.astate.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 答案是错误的

寄上任务调度

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

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 答案是错误的

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

本文转载于:

https://juejin.cn/post/7259405321020424251

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 

标签:面试官,const,computed,--,sum,value,state,console
From: https://www.cnblogs.com/smileZAZ/p/17580724.html

相关文章

  • 泊松求和公式
    泊松求和公式\[\sum_{n=-\infty}^{\infty}\delta(t-nT)=\frac{1}{T}\sum_{k=-\infty}^{\infty}e^{j2\pifkt}\]证明:令\[g(t)=\sum_{n=-\infty}^{\infty}\delta(t-nT)\]可以发现\(g(t)\)是周期为T的周期函数的周期函数。那么对\(g(t)\)进行傅里叶级数展开\[\begin{aligned}......
  • mysql cpu使用率高的常见原因 mysql cpu占用率过高
    文章来自:https://blog.51cto.com/u_12192/6319295简单的分为下面几个步骤来解决这个问题:1、mysql运行正常,也有可能是同步设置问题导致2、如果mysql运行正常,那就是php的一些sql语句导致问题发现,用root用户进入mysql管理mysql-uroot-p输入密码mysql:showprocesslist;语句,查......
  • WebGL初接触
    有感于在不少jd中看到关于WebGL的内容,想起来之前在高程中还没看完的canvas,就匆匆把剩余的一点看完了,高程中的内容还是皮毛,就属于很基础的、概念性的东西。WebGL画布的3D上下文。不是W3C制定的标准,而是KhronosGroup的标准。作为浏览器中WebGL基础的OpenGLES2.0,要使用WebGL最好......
  • >.NET Core|--Quartz.Net|--控制台应用程序
    前言#VisualStudio版本MicrosoftVisualStudioProfessional2022(64位)#Quartz.Net版本Quartz.Net3.6.3#C#语言版本(别小看这个,否则我下面的代码在你那里很可能跑不起来)10.0安装Quartz.Net我是直接通过Nuget包管理器安装的其它安装方式,也可以使用命......
  • 基于开源IM即时通讯框架MobileIMSDK:RainbowChat v9.0版已发布
    关于MobileIMSDKMobileIMSDK是一套专门为移动端开发的开源IM即时通讯框架,超轻量级、高度提炼,一套API优雅支持UDP 、TCP 、WebSocket 三种协议,支持iOS、Android、H5、标准Java平台,服务端基于Netty编写。工程开源地址是:1)Gitee码云地址:https://gitee.com/jackjiang/Mobi......
  • 记一次 MDK 开发 STM32WB15 时遇到的玄学BUG
    使用STM32WB15CCU6开发BLE应用调试自建的工程时,莫名报错Jlink和ST-LINK/V2都是一样的结果于是开始测试例程,开始也是正常,但是找不到自建工程的问题,开始对比代码,逐步替换然而并没有效果......
  • 集合框架
    集合框架集合的概念概念:对象的容器,实现对对象常用的操作,类似数组功能和数组的区别:数组长度固定,集合长度不固定数组可以存储基本类型和引用类型,集合只能存储引用类型Collection接口Collection父接口特点:代表一组任意类型的对象,无序.无下标.不能重复方法:boole......
  • 前端多次调用1个接口, 要最后一次请求的数据
    假设你要进行多次调用一个名为`getData()`的接口,并且你只关心最后一次请求的数据。你可以使用以下示例代码来实现:1letlastRequestId=0;//记录最后一次请求的ID2letlastResponse=null;//记录最后一次请求的响应数据34asyncfunctiongetData(){5const......
  • 解决端口占用问题
    根据端口号,查看进程ID,杀死进程,来解决端口占用问题 #Windows//查询pid,命令:netstat-ano|findstr"端口号"netstat-ano|findstr"38088"//杀死进程,命令:taskkill/pid进程id-ftaskkill/pid8932-f#linux//查询pid,命令:lsof-i:端口号......
  • quartz.net 配置UseClustering
    Quartz.NET配置UseClustering概述在开始之前,我们需要明确一些概念。Quartz.NET是一个强大且灵活的开源任务调度库,它可以帮助我们在.NET应用程序中实现各种定时任务。而UseClustering则是Quartz.NET提供的一项功能,用于在多个节点之间分配和处理任务。本文将教你如何通过......