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

相关文章

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服

SpringBoot基于配置实现短信服务策略的动态切换

《SpringBoot基于配置实现短信服务策略的动态切换》这篇文章主要为大家详细介绍了SpringBoot在接入多个短信服务商(如阿里云、腾讯云、华为云)后,如何根据配置或环境切换使用不同的服务商,需... 目录目标功能示例配置(application.yml)配置类绑定短信发送策略接口示例:阿里云 & 腾

python实现svg图片转换为png和gif

《python实现svg图片转换为png和gif》这篇文章主要为大家详细介绍了python如何实现将svg图片格式转换为png和gif,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录python实现svg图片转换为png和gifpython实现图片格式之间的相互转换延展:基于Py

Python利用ElementTree实现快速解析XML文件

《Python利用ElementTree实现快速解析XML文件》ElementTree是Python标准库的一部分,而且是Python标准库中用于解析和操作XML数据的模块,下面小编就来和大家详细讲讲... 目录一、XML文件解析到底有多重要二、ElementTree快速入门1. 加载XML的两种方式2.

Java的栈与队列实现代码解析

《Java的栈与队列实现代码解析》栈是常见的线性数据结构,栈的特点是以先进后出的形式,后进先出,先进后出,分为栈底和栈顶,栈应用于内存的分配,表达式求值,存储临时的数据和方法的调用等,本文给大家介绍J... 目录栈的概念(Stack)栈的实现代码队列(Queue)模拟实现队列(双链表实现)循环队列(循环数组

C++如何通过Qt反射机制实现数据类序列化

《C++如何通过Qt反射机制实现数据类序列化》在C++工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作,所以本文就来聊聊C++如何通过Qt反射机制实现数据类序列化吧... 目录设计预期设计思路代码实现使用方法在 C++ 工程中经常需要使用数据类,并对数据类进行存储、打印、调试等操作。由于数据类

Python实现图片分割的多种方法总结

《Python实现图片分割的多种方法总结》图片分割是图像处理中的一个重要任务,它的目标是将图像划分为多个区域或者对象,本文为大家整理了一些常用的分割方法,大家可以根据需求自行选择... 目录1. 基于传统图像处理的分割方法(1) 使用固定阈值分割图片(2) 自适应阈值分割(3) 使用图像边缘检测分割(4)

Android实现在线预览office文档的示例详解

《Android实现在线预览office文档的示例详解》在移动端展示在线Office文档(如Word、Excel、PPT)是一项常见需求,这篇文章为大家重点介绍了两种方案的实现方法,希望对大家有一定的... 目录一、项目概述二、相关技术知识三、实现思路3.1 方案一:WebView + Office Onl

C# foreach 循环中获取索引的实现方式

《C#foreach循环中获取索引的实现方式》:本文主要介绍C#foreach循环中获取索引的实现方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录一、手动维护索引变量二、LINQ Select + 元组解构三、扩展方法封装索引四、使用 for 循环替代

Spring Security+JWT如何实现前后端分离权限控制

《SpringSecurity+JWT如何实现前后端分离权限控制》本篇将手把手教你用SpringSecurity+JWT搭建一套完整的登录认证与权限控制体系,具有很好的参考价值,希望对大家... 目录Spring Security+JWT实现前后端分离权限控制实战一、为什么要用 JWT?二、JWT 基本结构