vue.js的设计与实现(响应系统 计算属性computed和lazy)

本文主要是介绍vue.js的设计与实现(响应系统 计算属性computed和lazy),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 概要
    • computed和lazy
    • 小结

概要

前面我们写完了effect(依赖收集)函数。这一章我们就通过之前写完的effect来实现computed(计算属性)

computed和lazy

在vue3中,computed是经常使用的,现在我们就来用effect来实现它,在此之前,我们先来实现关于懒执行的effect,我们先来举一个例子:

effect(()=>{ //这个函数会立即执行console.log(obj.foo)
})

我们可以在options里面添加一个lazy,来让它达到目的,如下:

effect(()=>{ //这个函数会立即执行console.log(obj.foo)
},{lazy:true,
})

我们在前面并没有对effect的options的lazy参数的处理,既然是懒执行,就是不立即执行effect的参数函数,那我们要什么时候去执行呢?我们可以回想一下 在vue3中的computed的用法:const sum = computed(()=>obj.foo + obj.bar),我们先看,是不是我们还缺少一个computed函数,我们先来定义一个:

function computed (fn){effect(fn,{lazy:true})
}

这样写有没有问题呢?肯定是有的,我们之前写的effect是没有返回值的,所以我们在effect中,当lazy为true时,需要添加一个返回值,我们在上面也说了时懒执行,那就是不立即执行没所以我们可以在effect中把需要执行的函数返回回来,在computed中去执行,如下 :

function effect(fn,options={}){const effectFn = ()=>{cleanup(effectFn)effectStack.push(effectFn) activeEffect = effectFnfn()effectStack.pop()activeEffect = effectStack[effectStack.length -1]}effectFn.options = optionseffectFn.deps = []if(!options.lazy){effectFn()}return effectFn
}

以上代码,我们可以看到,我们值返回了一个函数,并没有返回副作用函数所执行的结果,我们需要的时副作用函数执行的结果,所以我们在effectFn里面需要返回fn()执行的结果,所以我们需要再次修改一下:

function effect(fn,options={}){const effectFn = ()=>{cleanup(effectFn)effectStack.push(effectFn) activeEffect = effectFnconst res = fn()effectStack.pop()activeEffect = effectStack[effectStack.length -1]return res }effectFn.options = optionseffectFn.deps = []if(!options.lazy){effectFn()}return effectFn
}

这样就可以拿到副作用函数的返回结果了,我们再来看下computed函数应该怎么写,我们先来理一下思路:

  1. 我们在computed里面调用effect,options带lazy参数,
  2. 知道了当options里面有lazy的时候,返回的一个函数,所以我们需要定义一个参数来接受它,比如我们可以定为effectFn
  3. 我们知道在vue3中,访问computed的值的时候我们是使用.value的方式,所以我们也需要定义一个对象,当访问这个对象的value的时候,返回effectFn副作用函数的执行结果,
  4. 很重的一定,我们知道computed是具有缓存的,也就是说,我们不是每次获取computed的value值的时候都需要去重新执行副作用函数

先说下1、2、3的代码,这个比较简单,如下:

function computed (fn){cosnt effectFn = effect(fn,{lazy:true})const obj = {get value(){return effectFn()}}return obj
}

重点说下缓存这个点,上面的代码每次访问value值的时候都会重新运行effectFn,如果我们不想重新运行effectFn,是不是需要添加两个参数,一个是判断是否需要重新执行,另一个是保存上次effectFn的执行结果。当判断不需要重新执行的时候,我们只需要返回上次保存的结果就可以了,那我们就修改一下computed函数:

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{lazy:true})const obj = {get value(){if(!dirty){value = effectFn()dirty = false}return value}}return obj
}

看上面的代码,我们又发现了一个问题,当我修改obj.foo或者obj.bar的值的时候,dirty还是false,并不会去执行effectFn,到账拿到的值还是上次的值,这个要怎么办呢?很简单,就是需要用到我们的调度器(scheduler),如下:

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{lazy:true,scheduler(){dirty = true}})const obj = {get value(){if(!dirty){value = effectFn()dirty = false}return value}}return obj
}

到这里,我们的computed以及趋近完美了,但是还有一个问题,当我们在effect函数中去获取computed的值的时候,当改变了obj.foo的值的时候,并不会重新执行副作用函数,这个是为什么?看一下代码:

const sum = computed(()=>{obj.foo + obj.bar})
effect(()=>{console.log(sum.value)
})

因为当我们使用effect函数去获取computed的value值的时候,这里就是典型的effect嵌套问题,我们的computed又是懒执行,只有当我们去访问value值的时候才会真正的执行,我们再看下computed的函数,当obj.foo或者obj.bar发生变化的时候,我们只是把dirty的值改变,当我们再次去获取computed的value的值的时候才会去重新执行副作用函数,所以看上面的代码,effect(()=>{console.log(sum.value)}),这里依赖搜集的只是 sum->value->effect函数,当我们的sum.value没有变化的时候,是不会重新执行effect函数的。
computed只有读取value的时候才会执行副作用函数,在上面的代码只是打印了sum.value的值,当obj.foo或者obj.bar发送改变的时候。没有重新去获取sum.value的值,所以不能触发effect函数。如下代码

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{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
}

这样就可以了

小结

这里就是vue3中的computed了,我在解释一下上面的代码:effect嵌套computed的时候,我们收集到的是这样的:computed->value->effect,当该白computed里面的计算属性依赖的时候,并不会重新计算computed的value值,因为computed是懒执行的,每次重新获取computed的value值时候才会重新去获取,所以我们需要在第一次去获取computed的value值的时候,就需要手动去追踪,当计算属性依赖响应式数据发生变化的时候,手动去调用追踪到的依赖,这里追踪到的依赖就是()=>{console.log(sum.value)},就会重新去执行这个函数
下一篇,我们来看看watch的实现原理

这篇关于vue.js的设计与实现(响应系统 计算属性computed和lazy)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1114388

相关文章

Springboot处理跨域的实现方式(附Demo)

《Springboot处理跨域的实现方式(附Demo)》:本文主要介绍Springboot处理跨域的实现方式(附Demo),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不... 目录Springboot处理跨域的方式1. 基本知识2. @CrossOrigin3. 全局跨域设置4.

Spring Boot 3.4.3 基于 Spring WebFlux 实现 SSE 功能(代码示例)

《SpringBoot3.4.3基于SpringWebFlux实现SSE功能(代码示例)》SpringBoot3.4.3结合SpringWebFlux实现SSE功能,为实时数据推送提供... 目录1. SSE 简介1.1 什么是 SSE?1.2 SSE 的优点1.3 适用场景2. Spring WebFlu

基于SpringBoot实现文件秒传功能

《基于SpringBoot实现文件秒传功能》在开发Web应用时,文件上传是一个常见需求,然而,当用户需要上传大文件或相同文件多次时,会造成带宽浪费和服务器存储冗余,此时可以使用文件秒传技术通过识别重复... 目录前言文件秒传原理代码实现1. 创建项目基础结构2. 创建上传存储代码3. 创建Result类4.

SpringBoot日志配置SLF4J和Logback的方法实现

《SpringBoot日志配置SLF4J和Logback的方法实现》日志记录是不可或缺的一部分,本文主要介绍了SpringBoot日志配置SLF4J和Logback的方法实现,文中通过示例代码介绍的非... 目录一、前言二、案例一:初识日志三、案例二:使用Lombok输出日志四、案例三:配置Logback一

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景:内存吃得满满的类__slots__:你的内存管理小助手举个大概的例子:看看效果如何?1.

Python+PyQt5实现多屏幕协同播放功能

《Python+PyQt5实现多屏幕协同播放功能》在现代会议展示、数字广告、展览展示等场景中,多屏幕协同播放已成为刚需,下面我们就来看看如何利用Python和PyQt5开发一套功能强大的跨屏播控系统吧... 目录一、项目概述:突破传统播放限制二、核心技术解析2.1 多屏管理机制2.2 播放引擎设计2.3 专

一文详解SpringBoot响应压缩功能的配置与优化

《一文详解SpringBoot响应压缩功能的配置与优化》SpringBoot的响应压缩功能基于智能协商机制,需同时满足很多条件,本文主要为大家详细介绍了SpringBoot响应压缩功能的配置与优化,需... 目录一、核心工作机制1.1 自动协商触发条件1.2 压缩处理流程二、配置方案详解2.1 基础YAML

Python实现无痛修改第三方库源码的方法详解

《Python实现无痛修改第三方库源码的方法详解》很多时候,我们下载的第三方库是不会有需求不满足的情况,但也有极少的情况,第三方库没有兼顾到需求,本文将介绍几个修改源码的操作,大家可以根据需求进行选择... 目录需求不符合模拟示例 1. 修改源文件2. 继承修改3. 猴子补丁4. 追踪局部变量需求不符合很

idea中创建新类时自动添加注释的实现

《idea中创建新类时自动添加注释的实现》在每次使用idea创建一个新类时,过了一段时间发现看不懂这个类是用来干嘛的,为了解决这个问题,我们可以设置在创建一个新类时自动添加注释,帮助我们理解这个类的用... 目录前言:详细操作:步骤一:点击上方的 文件(File),点击&nbmyHIgsp;设置(Setti

SpringBoot实现MD5加盐算法的示例代码

《SpringBoot实现MD5加盐算法的示例代码》加盐算法是一种用于增强密码安全性的技术,本文主要介绍了SpringBoot实现MD5加盐算法的示例代码,文中通过示例代码介绍的非常详细,对大家的学习... 目录一、什么是加盐算法二、如何实现加盐算法2.1 加盐算法代码实现2.2 注册页面中进行密码加盐2.