AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

为啥面试官总喜欢问computed是咋实现的？

2024-01-10 104
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 为啥面试官总喜欢问computed是咋实现的？

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

从computed的特性出发

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

1. 依赖追踪

1

2

3

4

5

6

7

8

9

10

import { reactive, computed } from'vue'

conststate = reactive({

  a: 1,

  b: 2,

  c: 3,

})

constsum = computed(() => {

  returnstate.a + state.b

})

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

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

2. 缓存

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

3. 懒计算

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

import { reactive, computed } from'vue'

conststate = reactive({

  a: 1,

  b: 2,

  c: 3

})

constsum = computed(() => {

  console.log('执行计算')

  returnstate.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注册的回调都是立刻执行。

1

2

3

4

5

6

7

8

9

10

11

12

13

conststate = reactive({

  a: 1,

  b: 2,

  c: 3

})

// 有没有很像计算属性的感觉

constsum = effect(() => {

  console.log('执行计算') // 立刻被打印

  constvalue = state.a + state.b

  returnvalue

})

console.log(sum) // undefined

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

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

consteffect = function (fn, options = {}) {

  consteffectFn = () => {

    // ... 省略

    // 新增res存储fn执行的结果

    constres = fn()

    // ... 省略

    // 新增返回结果

    returnres

  }

  // ... 省略

  // 新增，只有lazy不为true时才会立即执行

  if(!options.lazy) {

    effectFn()

  }

  // 新增，返回副作用函数让用户执行

  returneffectFn

}

测试一波

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

conststate = reactive({

  a: 1,

  b: 2,

  c: 3,

});

// 有没有很像计算属性的感觉

constsum = effect(() => {

  console.log("执行计算"); // 调用sum函数后被打印

  constvalue = state.a + state.b;

  returnvalue;

}, {

  lazy: true

});

// 不执行sum函数，effect注册的回调将不会执行

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

2. 依赖追踪

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

1

2

3

4

5

6

7

8

9

10

11

12

13

function computed (getter) {

  consteffectFn = effect(getter, {

    lazy: true,

  })

  constobj = {

    getvalue () {

      returneffectFn()

    }

  }

  returnobj

}

这就有点那么味道啦！

测试一波

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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

conststate = reactive({

  a: 1,

  b: 2,

  c: 3

})

constsum = computed(() => {

  console.log('执行计算')

  returnstate.a + state.b

})

console.log(sum.value)

console.log(sum.value)

3. 缓存

回顾一下computed的缓存特性:

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

function computed (getter) {

  consteffectFn = effect(getter, {

    lazy: true,

  })

  letvalue

  letdirty = true

  constobj = {

    getvalue () {

      // 2. 只有数据发生变化了才去重新计算

      if(dirty) {

        value = effectFn()

        dirty = false

      }

      returnvalue

    }

  }

  returnobj

}

测试一波

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

conststate = reactive({

  a: 1,

  b: 2,

  c: 3

})

constsum = computed(() => {

  console.log('执行计算')

  returnstate.a + state.b

})

console.log(sum.value) // 3

console.log(sum.value) // 3

state.a = 4

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

寄上任务调度

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

function computed (getter) {

  consteffectFn = effect(getter, {

    lazy: true,

    // 数据发生变化后，不执行注册的回调，而是执行scheduler

    scheduler () {

      // 数据发生了变化后，则重新设置为dirty，那么下次就会重新计算

      dirty = true

    }

  })

  letvalue

  letdirty = true

  constobj = {

    getvalue () {

      // 2. 只有数据发生变化了才去重新计算

      if(dirty) {

        value = effectFn()

        dirty = false

      }

      returnvalue

    }

  }

  returnobj

}

测试一波

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

conststate = reactive({

  a: 1,

  b: 2,

  c: 3

})

constsum = computed(() => {

  console.log('执行计算')

  returnstate.a + state.b

})

console.log(sum.value) // 3

console.log(sum.value) // 3

state.a = 4

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

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

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

 前端面试题库 （面试必备）            推荐：★★★★★

地址：前端面试题库

文章标签：
缓存
JavaScript
前端开发
调度
存储
关键词：
面试computed
前端技术栈
目录
相关文章
前端技术栈
|
7月前
|
缓存 JavaScript 前端开发
前端面试怎么总问watch和computed区别
前端面试怎么总问watch和computed区别
前端技术栈
48 0
coderHing[专注前端]
|
缓存 前端开发
前端经典面试题 | Computed 和 Watch 的区别
前端经典面试题 | Computed 和 Watch 的区别
coderHing[专注前端]
132 0
coderHing[专注前端]
|
缓存 JavaScript 前端开发
前端经典面试题 | Vue的computed 和 watch的区别
前端经典面试题 | Vue的computed 和 watch的区别
coderHing[专注前端]
115 0
Jovy.
|
缓存 监控 JavaScript
vue相关面试题:computed和watch区别
★主要用来监听某些特定数据的变化，从而进行某些具体的业务逻辑操作，可以看作是 computed 和 methods 的结合体； ★可以监听的数据来源：data，props，computed内的数据； ★watch支持异步； ★不支持缓存，监听的数据改变，直接会触发相应的操作； ★监听函数有两个参数，第一个参数是最新的值，第二个参数是输入之前的值，顺序一定是新值，旧值
Jovy.
171 0
热爱技术的小郑
|
4月前
|
存储 Java
【IO面试题 四】、介绍一下Java的序列化与反序列化
Java的序列化与反序列化允许对象通过实现Serializable接口转换成字节序列并存储或传输，之后可以通过ObjectInputStream和ObjectOutputStream的方法将这些字节序列恢复成对象。
热爱技术的小郑
56 2
程序员皮皮林
|
1月前
|
存储 缓存 算法
面试官：单核 CPU 支持 Java 多线程吗？为什么？被问懵了！
本文介绍了多线程环境下的几个关键概念，包括时间片、超线程、上下文切换及其影响因素，以及线程调度的两种方式——抢占式调度和协同式调度。文章还讨论了减少上下文切换次数以提高多线程程序效率的方法，如无锁并发编程、使用CAS算法等，并提出了合理的线程数量配置策略，以平衡CPU利用率和线程切换开销。
程序员皮皮林
59 1
面试官：单核 CPU 支持 Java 多线程吗？为什么？被问懵了！
mikechen的互联网架构
|
1月前
|
存储 算法 Java
大厂面试高频：什么是自旋锁？Java 实现自旋锁的原理？
本文详解自旋锁的概念、优缺点、使用场景及Java实现。关注【mikechen的互联网架构】，10年+BAT架构经验倾囊相授。
mikechen的互联网架构
100 6
大厂面试高频：什么是自旋锁？Java 实现自旋锁的原理？
软件求生
|
1月前
|
存储 缓存 Java
大厂面试必看！Java基本数据类型和包装类的那些坑
本文介绍了Java中的基本数据类型和包装类，包括整数类型、浮点数类型、字符类型和布尔类型。详细讲解了每种类型的特性和应用场景，并探讨了包装类的引入原因、装箱与拆箱机制以及缓存机制。最后总结了面试中常见的相关考点，帮助读者更好地理解和应对面试中的问题。
软件求生
56 4
喜欢猪猪
|
2月前
|
算法 Java 数据中心
探讨面试常见问题雪花算法、时钟回拨问题，java中优雅的实现方式
【10月更文挑战第2天】在大数据量系统中，分布式ID生成是一个关键问题。为了保证在分布式环境下生成的ID唯一、有序且高效，业界提出了多种解决方案，其中雪花算法（Snowflake Algorithm）是一种广泛应用的分布式ID生成算法。本文将详细介绍雪花算法的原理、实现及其处理时钟回拨问题的方法，并提供Java代码示例。
喜欢猪猪
92 2
dream_ready
|
2月前
|
JSON 安全 前端开发
第二次面试总结 - 宏汉科技 - Java后端开发
本文是作者对宏汉科技Java后端开发岗位的第二次面试总结，面试结果不理想，主要原因是Java基础知识掌握不牢固，文章详细列出了面试中被问到的技术问题及答案，包括字符串相关函数、抽象类与接口的区别、Java创建线程池的方式、回调函数、函数式接口、反射以及Java中的集合等。
dream_ready
37 0

热门文章

最新文章

  • 1
    2024年最新阿里Java高级岗200+面试题，掌握80%进阿里没问题
  • 2
    C# 面试题解析-请遍历页面上所有的TextBox控件并给它赋值为string.Empty
  • 3
    面试题1：赋值运算符函数
  • 4
    大厂高频面试真题详解：最长无重复字符的子串
  • 5
    Spring Boot面试题
  • 6
    初学者必须知道的对于面试的技术记汇
  • 7
    那些面试官口中常常提到b树(MySQL索引底层数据结构)
  • 8
    都2022年了，Python继续霸榜，SQL写得溜，面试或能加分
  • 9
    前端面试题目
  • 10
    Java面试（static 关键字）(final关键字)
  • 1
    面试官：素有Java锁王称号的‘StampedLock’你知道吗？我：这什么鬼？
    101
  • 2
    Spring Boot 源码面试知识点
    100
  • 3
    大厂高频面试题：ReentrantLock 与 synchronized异同点对比
    72
  • 4
    【Java多线程】面试常考 —— JUC(java.util.concurrent) 的常见类
    81
  • 5
    【Java多线程】面试常考——锁策略、synchronized的锁升级优化过程以及CAS（Compare and swap）
    69
  • 6
    【LeetCode力扣】面试题 17.14. 最小K个数（top-k问题）
    96
  • 7
    【刷题】 leetcode 面试题 08.05.递归乘法
    73
  • 8
    【刷题】 leetcode 面试题 01.06 字符串压缩
    70
  • 9
    MySQL第五战：常见面试题（下）
    62
  • 10
    MySQL第四战：视图以及常见面试题（上）
    72

    • 相关课程

    更多
  • Java面试疑难点解析 - 面试技巧及语言基础
  • Java面试疑难点解析 - Java Web开发
  • Java面试疑难点解析 - 系统架构及项目设计

    • 相关电子书

    更多
  • 阿里云技术面试红宝书
  • 超全算法笔试-模拟题精解合集
  • 程序员面试宝典
    • 下一篇
    阿里云oss存储简介和如何使用