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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Element-UI中<el-cascader />回显失败问题的完美解决
我们在使用el-cascader控件往数据库保存的都是最后一级的数据,那如果再次编辑此条数据时,直接给el-cascader传入最后一级的数据,它是不会自动勾选的,下面这篇文章主要给大家介绍了关于Element-UI中<el-cascader />回显失败问题的完美解决办法,需要的朋友可以参考下2023-01-01
computed作为计算属性其作用是描述响应式数据的复杂逻辑计算，当所依赖的响应式数据发生改变时计算属性会重新计算，更新逻辑计算的结果，这篇文章主要介绍了Vue.js中的computed的功能设计,需要的朋友可以参考下2023-06-06
导入导出excel这是前端做管理系统最常用的功能了,下面这篇文章主要给大家介绍了基于Vue实现Excel解析与导出功能的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue实现腾讯云点播视频上传功能的实现代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-08-08
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
这篇文章主要介绍了解决VUE 在IE下出现ReferenceError: Promise未定义的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要为大家详细介绍了vue定义模态框的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
vue - vue.config.js中devServer配置方式
今天小编就为大家分享一篇vue - vue.config.js中devServer配置方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
这篇文章主要介绍了使用vant 自定义弹框全过程，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于v-model及其修饰符的相关资料,v-model指令有三个可以选用的修饰符：.lazy、.number以及.trim,本文通过示例代码介绍的非常详细,需要的朋友可以参考下2021-11-11
这篇文章主要介绍了聊聊vue生命周期钩子函数有哪些，分别什么时候触发？具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论