Vue.js中的computed功能设计
1、关于computed的功能描述
computed作为计算属性其作用是描述响应式数据的复杂逻辑计算，当所依赖的响应式数据发生改变时计算属性会重新计算，更新逻辑计算的结果。
有个体现计算属性特点的便是比较计算属性和方法的区别，比如我们需要计算两个响应式数据的和
const obj = new reactive({foo: 1, bar: 2})
// 使用计算属性获取值
const value = computed(() => {obj.foo + obj.bar})
// 使用方法获取值
const value = () => obj.foo + obj.bar其区别为computed有缓存机制，当内部依赖的响应式数据没有改变时则直接从缓存中获取结果，而方法则每次都需要执行。当依赖的响应式数据很多并且逻辑很复杂的时候那么计算属性效率会比方法高很多。
2、计算属性的lazy设计
对于计算属性我们只有在需要值的时候才需要计算，而computed(getter)以一个getter作为参数，即每次计算属性依赖的响应式数据改变的时候都需要重新执行getter，但是每次getter的每一次执行却是不必要的，因为只有当获取计算属性的值时才运行getter获取值，所以对于getter的计算需要懒惰执行。
在上一章节中已经介绍了调度器的作用，所以我们只需要在调度器中加入一个lazy的标记就行了
effect(() => {
return obj.foo + obj.bar
}, {
// 调度器中设置lazy标记
lazy: true
})
function effect(fn, options = {}) {
const effectFn = () => {
// 省略代码
}
effectFn.options = options
effectFn.deps = []
// 如过有缓存标记则直接返回
if(options.lazy)
return effectFn
effectFn()
}
function computed(getter) {
// 把getter作为一个副作用函数
const effectFn = effect(getter, {
lazy: true,
})
const obj = {
// 只有当读取到value时才会触发effectFn
get value() {
return effectFn()
}
}
return obj.value
}这样只有我们在获取计算属性的value时才会触发副作用函数执行，而不会在响应式数据改变时就直接执行。
3、计算属性的缓存
假设我们在上述代码的设计基础下有以下代码
const sum = computed(() => obj.foo + obj.bar) console.log(sum.value) console.log(sum.value) console.log(sum.value)
此时effectFn会接连执行三次，但是每次的结果都是一样的，因为计算属性所依赖的obj.foo \obj.bar的值并没有改变，所以我们可以直接将计算的结果缓存下来。
function computed(getter) {
// 用来缓存计算的结果
let value
// 用于标记是否需要重新计算值
let dirty = true
let effectFn = effect(getter, {
lazy: true
})
const obj = {
get value() {
// 如过需要重新计算值
if(dirty) {
value = effectFn()
dirty = false
}
return value
}
}
return obj
}此时我们多次获取sum.value的值则不会每次都重新计算了，但是这样写有一个非常明显的问题就是我们所依赖的响应式的值改变的时候不会重新计算，所以我们dirty这个标记还需要和依赖的响应式数据联系起来。具体做法是将dirty放入调度器中，这样每次响应式数据被改变的时候都会触发调度器改变dirty的值
function computed(getter) {
// 用来缓存计算的结果
let value
// 用于标记是否需要重新计算值
let dirty = true
let effectFn = effect(getter, {
lazy: true,
// 当响应式数据修改时，触发副作用函数时修改dirty的值
scheduler: () => {
dirty = true
}
})
const obj = {
get value() {
// 如过需要重新计算值
if(dirty) {
value = effectFn()
dirty = false
}
return value
}
}
return obj
}其实还有一个问题就是当计算属性放入effect形成嵌套时，我们改变obj的值并不会触发外层的effect函数，即：
// 省略代码......
const sum = computed(() => obj.foo + obj.bar)
effect(() => {
console.log(sum.value)
})当改变obj.foo/obj.bar的值并不会输出sum.value的值。这是不符合应用场景的，在应用中当我们的计算属性改变的时候页面也会重新渲染。
整个问题分析一下就是effect嵌套的问题，当内层的响应式数据只和getter形成了联系，和外层的副作用函数并没有关系，而内部的value并不是响应式数据还是懒执行的，所以也就不会和外层的副作用函数产生联系了，这里解决的方案就是直接手动将计算属性的结果和外层副作用函数联系起来。
function computed(getter) {
let value
let dirty = true
const effectFn = effect(getter, {
lazy: true,
scheduler: () => {
dirty = true
// 计算属性依赖的响应式数据发生改变时，手动触发响应
trigger(obj, 'value')
}
})
const obj = {
get value() {
if(dirty) {
value = effectFn()
dirty = false
}
// 读取value时手动追踪
track(obj, 'value')
return value
}
}
return obj
}到此这篇关于Vue.js中的computed的设计的文章就介绍到这了,更多相关Vue.js computed内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要为大家详细介绍了Vue3中表单的使用的相关知识，文中的示例代码讲解详细，对我们掌握Vue3有一定的帮助，感兴趣的小伙伴可以跟随小编一起学习一下2022-12-12
今天小编就为大家分享一篇关于vue-router命名视图的使用讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
今天小编就为大家分享一篇解决vue的变量在settimeout内部效果失效的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
这篇文章主要介绍了vue中如何去掉input前后的空格问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要给大家介绍了关于Vue3中watch用法与最佳实践的相关资料,watch的作用可以监控一个值的变换,并调用因为变化需要执行的方法,可以通过watch动态改变关联的状态,需要的朋友可以参考下2021-07-07
本篇文章主要介绍了Vue过滤器的用法和自定义过滤器，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
vue中el-table两个表尾合计行联动同步滚动条实例代码
项目开发中遇到一个比较两个form差异的需求,但当item过多就需要滚动条,下面这篇文章主要给大家介绍了关于vue中el-table两个表尾合计行联动同步滚动条的相关资料,需要的朋友可以参考下2022-05-05
本篇文章主要介绍了vue项目实现记住密码到cookie功能示例(附源码)，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
Vue的transition-group与Virtual Dom Diff算法的使用
这篇文章主要介绍了Vue的transition-group与Virtual Dom Diff算法的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-12-12
这篇文章主要介绍了Vue 实例事件,结合简单示例形势分析了vue.js事件响应与页面元素相关操作技巧,需要的朋友可以参考下2019-09-09
最新评论