脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue computed

vue面试常考之computed是如何实现的

 更新时间：2023年08月04日 09:51:30   作者：前端胖头鱼  
对于每天都在用的计算属性(computed)，小编猜大家肯定也想窥探其奥妙与原理对吧，所以这篇文章就来讲讲computed是如何实现的吧，感兴趣的小伙伴可以学习一下

前言

通过前面几篇文章，我们对Vue3中的响应式设计有了初步的了解。

而对于每天都在用的计算属性(computed)，我猜你肯定也想窥探其奥妙与原理对吧！走起！！！

从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.a和state.b，并建立相应的依赖关系。

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

2. 缓存

还是上面的例子，如果state.a和state.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。

它要实现的功能是：如果传递了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的缓存特性:

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

为了缓存上一次计算的结果，咱们需要定义一个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面试常考之computed是如何实现的的文章就介绍到这了,更多相关vue computed内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue项目中使用自定义字体样式方式

    Vue项目中使用自定义字体样式方式

    这篇文章主要介绍了Vue项目中使用自定义字体样式方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • vue中解决拖拽改变存在iframe的div大小时卡顿问题

    vue中解决拖拽改变存在iframe的div大小时卡顿问题

    这篇文章主要介绍了vue中解决拖拽改变存在iframe的div大小时卡顿问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-07-07
  • vue中iframe使用以及结合postMessage实现跨域通信

    vue中iframe使用以及结合postMessage实现跨域通信

    这篇文章主要介绍了vue中iframe使用以及结合postMessage实现跨域通信方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-09-09
  • el-form表单验证的一些实用方法总结

    el-form表单验证的一些实用方法总结

    表单校验是注册环节中必不可少的操作,表单校验通过一定的规则来确保用户提交数据的有效性,下面这篇文章主要给大家介绍了关于el-form表单验证的一些实用方法,需要的朋友可以参考下
    2023-01-01
  • 简单理解vue中Props属性

    简单理解vue中Props属性

    这篇文章主要帮助大家简单的理解vue中Props属性，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-10-10
  • vue单页应用中如何使用jquery的方法示例

    vue单页应用中如何使用jquery的方法示例

    最近在工作中遇到的一个需求，需要在vue-cli建立的应用中引入jquery的方式，通过查找相关的资料最终解决了，所以这篇文章主要给大家介绍了关于在vue单页应用中如何使用jquery的方法示例，需要的朋友可以参考借鉴，下面来一起看看吧。
    2017-07-07
  • element plus el-table多选框跨页多选保留功能

    element plus el-table多选框跨页多选保留功能

    这篇文章主要介绍了element plus el-table多选框跨页多选保留功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2025-05-05
  • vite+vue3项目启动报错Unexpected “%“问题及解决

    vite+vue3项目启动报错Unexpected “%“问题及解决

    这篇文章主要介绍了vite+vue3项目启动报错Unexpected “%“问题及解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • Vue之props 配置详解

    Vue之props 配置详解

    这篇文章主要为大家介绍了Vue之props 配置，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助,希望能够给你带来帮助
    2021-11-11
  • vue+iview+less+echarts实战项目总结

    vue+iview+less+echarts实战项目总结

    本篇文章是作者通过学习vue+iview+less+echarts制作一个小系统后，做的心得以及遇到的坑的总结，值得大家学习参考。
    2018-02-02

最新评论