vue面试常考之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()); // 32. 依赖追踪
咱们初步实现了懒执行的特性，为了更像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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题
这篇文章主要介绍了解决获取数据后this.$refs.xxx.toggleRowSelection无效的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了如何在 vue 中使用 svg symbols，本文通过示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2022-08-08
本文详细介绍了如何在使用Vite构建的Vue项目中实现ElementPlus暗黑模式及模式切换,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-11-11
这篇文章主要为大家介绍了vue3模块创建runtime-dom源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要介绍了vue2.0页面前进刷新回退不刷新的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
路由这个概念最先是后端出现的,下面这篇文章主要给大家介绍了关于vue前端路由以及vue-router两种模式的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了vue实现选项卡功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
过滤器提供给我们的一种数据处理方式。过滤器功能不是必须要使用的，因为它所实现的功能也能用计算属性或者函数调用的方式来实现。这篇文章主要为大家介绍了Vue中过滤器的使用，需要的可以了解一下2023-03-03
这篇文章主要介绍了vue中的img src 动态加载本地json的图片路径写法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-04-04
最新评论