Vue3中的组合式API的详细教程和介绍

news2024/11/18 23:23:54

文章目录

  • 前言
  • 介绍
  • 组合式 API 基础
    • setup 组件选项
  • 带 ref 的响应式变量
  • 生命周期钩子注册内部 setup
  • watch 响应式更改
  • 独立的 computed 属性
  • 后言

前言

hello world欢迎来到前端的新世界

😜当前文章系列专栏：vue.js
🐱‍👓博主在前端领域还有很多知识和技术需要掌握，正在不断努力填补技术短板。(如果出现错误，感谢大家指出)🌹
💖感谢大家支持！您的观看就是作者创作的动力

介绍

通过创建 Vue 组件，我们可以将接口的可重复部分及其功能提取到可重用的代码段中。仅此一项就可以使我们的应用程序在可维护性和灵活性方面走得更远。然而，我们的经验已经证明，光靠这一点可能是不够的，尤其是当你的应用程序变得非常大的时候——想想几百个组件。在处理如此大的应用程序时，共享和重用代码变得尤为重要。

假设在我们的应用程序中，我们有一个视图来显示某个用户的仓库列表。除此之外，我们还希望应用搜索和筛选功能。处理此视图的组件可能如下所示：

// src/components/UserRepositories.vue


export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  data () {
    return {
      repositories: [], // 1
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    getUserRepositories () {
      // 使用 `this.user` 获取用户仓库
    }, // 1
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

该组件有以下几个职责：

  • 从假定的外部 API 获取该用户名的仓库，并在用户更改时刷新它
  • 使用 searchQuery 字符串搜索存储库
  • 使用 filters 对象筛选仓库

用组件的选项 (data、computed、methods、watch) 组织逻辑在大多数情况下都有效。然而，当我们的组件变得更大时，逻辑关注点的列表也会增长。这可能会导致组件难以阅读和理解，尤其是对于那些一开始就没有编写这些组件的人来说。

在这里插入图片描述
一个大型组件的示例，其中逻辑关注点是按颜色分组。

这种碎片化使得理解和维护复杂组件变得困难。选项的分离掩盖了潜在的逻辑问题。此外，在处理单个逻辑关注点时，我们必须不断地“跳转”相关代码的选项块。

如果我们能够将与同一个逻辑关注点相关的代码配置在一起会更好。而这正是组合式 API 使我们能够做到的。

组合式 API 基础

既然我们知道了为什么，我们就可以知道怎么做。为了开始使用组合式 API，我们首先需要一个可以实际使用它的地方。在 Vue3 组件中，我们将此位置称为 setup。

setup 组件选项

新的 setup 组件选项在创建组件之前执行，一旦 props 被解析，并充当合成 API 的入口点。

WARNING

由于在执行setup时尚未创建组件实例，因此在 setup 选项中没有 this。这意味着，除了 props 之外，你将无法访问组件中声明的任何属性——本地状态、计算属性或方法。

setup 选项应该是一个接受 props 和context 的函数，我们将在稍后讨论。此外，我们从 setup 返回的所有内容都将暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板。

让我们添加 setup 到我们的组件中：

// src/components/UserRepositories.vue


export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    console.log(props) // { user: '' }


    return {} // 这里返回的任何内容都可以用于组件的其余部分
  }
  // 组件的“其余部分”
}

现在让我们从提取第一个逻辑关注点开始 (在原始代码段中标记为“1”)。

从假定的外部 API 获取该用户名的仓库，并在用户更改时刷新它

我们将从最明显的部分开始：

  • 仓库列表
  • 更新仓库列表的函数
  • 返回列表和函数，以便其他组件选项可以访问它们
// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'


// 在我们的组件内
setup (props) {
  let repositories = []
  const getUserRepositories = async () => {
    repositories = await fetchUserRepositories(props.user)
  }


  return {
    repositories,
    getUserRepositories // 返回的函数与方法的行为相同
  }
}

这是我们的出发点，但它还不能工作，因为我们的 repositories 变量是非响应式的。这意味着从用户的角度来看，仓库列表将保持为空。我们来解决这个问题！

带 ref 的响应式变量

在 Vue 3.0 中，我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用，如下所示：

import { ref } from 'vue'


const counter = ref(0)

ref 接受参数并返回它包装在具有 value property 的对象中，然后可以使用该 property 访问或更改响应式变量的值：

import { ref } from 'vue'


const counter = ref(0)


console.log(counter) // { value: 0 }
console.log(counter.value) // 0


counter.value++
console.log(counter.value) // 1

在对象中包装值似乎不必要，但在 JavaScript 中保持不同数据类型的行为统一是必需的。这是因为在 JavaScript 中，Number 或 String 等基本类型是通过值传递的，而不是通过引用传递的：

在这里插入图片描述
在任何值周围都有一个包装器对象，这样我们就可以在整个应用程序中安全地传递它，而不必担心在某个地方失去它的响应性。

提示

换句话说，ref 对我们的值创建了一个响应式引用。使用引用的概念将在整个组合式 API 中经常使用。

回到我们的例子，让我们创建一个响应式的 repositories 变量：

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'


// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }


  return {
    repositories,
    getUserRepositories
  }
}

完成！现在，每当我们调用 getUserRepositories 时，repositories 都将发生变化，视图将更新以反映更改。我们的组件现在应该如下所示：

// src/components/UserRepositories.vue
import { fetchUserRepositories } from '@/api/repositories'
import { ref } from 'vue'


export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup (props) {
    const repositories = ref([])
    const getUserRepositories = async () => {
      repositories.value = await fetchUserRepositories(props.user)
    }


    return {
      repositories,
      getUserRepositories
    }
  },
  data () {
    return {
      filters: { ... }, // 3
      searchQuery: '' // 2
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
    repositoriesMatchingSearchQuery () { ... }, // 2
  },
  watch: {
    user: 'getUserRepositories' // 1
  },
  methods: {
    updateFilters () { ... }, // 3
  },
  mounted () {
    this.getUserRepositories() // 1
  }
}

我们已经将第一个逻辑关注点中的几个部分移到了 setup 方法中，它们彼此非常接近。剩下的就是在 mounted 钩子中调用 getUserRepositories，并设置一个监听器，以便在 user prop 发生变化时执行此操作。

我们将从生命周期钩子开始。

生命周期钩子注册内部 setup

为了使组合式 API 的特性与选项式 API 相比更加完整，我们还需要一种在 setup 中注册生命周期钩子的方法。这要归功于从 Vue 导出的几个新函数。组合式API上的生命周期钩子与选项式 API 的名称相同，但前缀为 on：即 mounted 看起来像 onMounted。

这些函数接受在组件调用钩子时将执行的回调。

让我们将其添加到 setup 函数中：

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted } from 'vue'


// in our component
setup (props) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(props.user)
  }


  onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`


  return {
    repositories,
    getUserRepositories
  }
}

现在我们需要对 user prop 所做的更改做出反应。为此，我们将使用独立的 watch 函数。

watch 响应式更改

就像我们如何使用 watch 选项在组件内的 user property 上设置侦听器一样，我们也可以使用从 Vue 导入的 watch 函数执行相同的操作。它接受 3 个参数：

  • 一个响应式引用或我们想要侦听的 getter 函数
  • 一个回调
  • 可选的配置选项

下面让我们快速了解一下它是如何工作的

import { ref, watch } from 'vue'


const counter = ref(0)
watch(counter, (newValue, oldValue) => {
  console.log('The new counter value is: ' + counter.value)
})

例如，每当 counter 被修改时 counter.value=5,watch 将触发并执行回调 (第二个参数)，在本例中，它将把 'The new counter value is:5' 记录到我们的控制台中。

以下是等效的选项式 API：

export default {
  data() {
    return {
      counter: 0
    }
  },
  watch: {
    counter(newValue, oldValue) {
      console.log('The new counter value is: ' + this.counter)
    }
  }
}

现在我们将其应用到我们的示例中：

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs } from 'vue'


// 在我们组件中
setup (props) {
  // 使用 `toRefs` 创建对prop的 `user` property 的响应式引用
  const { user } = toRefs(props)


  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `prop.user` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }


  onMounted(getUserRepositories)


  // 在用户 prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)


  return {
    repositories,
    getUserRepositories
  }
}

你可能已经注意到在我们的 setup 的顶部使用了 toRefs。这是为了确保我们的侦听器能够对 user prop 所做的更改做出反应。

有了这些变化，我们就把第一个逻辑关注点移到了一个地方。我们现在可以对第二个关注点执行相同的操作——基于 searchQuery 进行过滤，这次是使用计算属性。

独立的 computed 属性

与 ref 和 watch 类似，也可以使用从 Vue 导入的 computed 函数在 Vue 组件外部创建计算属性。让我们回到我们的 counter 例子：

import { ref, computed } from 'vue'


const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)


counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2

在这里，computed 函数返回一个作为 computed 的第一个参数传递的 getter 类回调的输出的一个只读的响应式引用。为了访问新创建的计算变量的 value，我们需要像使用 ref 一样使用 .value property。

让我们将搜索功能移到 setup 中：

// src/components/UserRepositories.vue `setup` function
import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch, toRefs, computed } from 'vue'


// in our component
setup (props) {
  // 使用 `toRefs` 创建对 props 的 `user` property 的响应式引用
  const { user } = toRefs(props)


  const repositories = ref([])
  const getUserRepositories = async () => {
    // 更新 `props.user ` 到 `user.value` 访问引用值
    repositories.value = await fetchUserRepositories(user.value)
  }


  onMounted(getUserRepositories)


  // 在用户 prop 的响应式引用上设置一个侦听器
  watch(user, getUserRepositories)


  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(
      repository => repository.name.includes(searchQuery.value)
    )
  })


  return {
    repositories,
    getUserRepositories,
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}

对于其他的逻辑关注点我们也可以这样做，但是你可能已经在问这个问题了——这不就是把代码移到 setup 选项并使它变得非常大吗？嗯，那是真的。这就是为什么在继续其他任务之前，我们将首先将上述代码提取到一个独立的组合式函数。让我们从创建 useUserRepositories 开始：

// src/composables/useUserRepositories.js


import { fetchUserRepositories } from '@/api/repositories'
import { ref, onMounted, watch } from 'vue'


export default function useUserRepositories(user) {
  const repositories = ref([])
  const getUserRepositories = async () => {
    repositories.value = await fetchUserRepositories(user.value)
  }


  onMounted(getUserRepositories)
  watch(user, getUserRepositories)


  return {
    repositories,
    getUserRepositories
  }
}

然后是搜索功能：

// src/composables/useRepositoryNameSearch.js


import { ref, computed } from 'vue'


export default function useRepositoryNameSearch(repositories) {
  const searchQuery = ref('')
  const repositoriesMatchingSearchQuery = computed(() => {
    return repositories.value.filter(repository => {
      return repository.name.includes(searchQuery.value)
    })
  })


  return {
    searchQuery,
    repositoriesMatchingSearchQuery
  }
}

现在在单独的文件中有了这两个功能，我们就可以开始在组件中使用它们了。以下是如何做到这一点：

// src/components/UserRepositories.vue
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import { toRefs } from 'vue'


export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup (props) {
    const { user } = toRefs(props)


    const { repositories, getUserRepositories } = useUserRepositories(user)


    const {
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)


    return {
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: repositoriesMatchingSearchQuery,
      getUserRepositories,
      searchQuery,
    }
  },
  data () {
    return {
      filters: { ... }, // 3
    }
  },
  computed: {
    filteredRepositories () { ... }, // 3
  },
  methods: {
    updateFilters () { ... }, // 3
  }
}

此时，你可能已经知道了这个练习，所以让我们跳到最后，迁移剩余的过滤功能。我们不需要深入了解实现细节，因为这不是本指南的重点。

// src/components/UserRepositories.vue
import { toRefs } from 'vue'
import useUserRepositories from '@/composables/useUserRepositories'
import useRepositoryNameSearch from '@/composables/useRepositoryNameSearch'
import useRepositoryFilters from '@/composables/useRepositoryFilters'


export default {
  components: { RepositoriesFilters, RepositoriesSortBy, RepositoriesList },
  props: {
    user: { type: String }
  },
  setup(props) {
    const { user } = toRefs(props)


    const { repositories, getUserRepositories } = useUserRepositories(user)


    const {
      searchQuery,
      repositoriesMatchingSearchQuery
    } = useRepositoryNameSearch(repositories)


    const {
      filters,
      updateFilters,
      filteredRepositories
    } = useRepositoryFilters(repositoriesMatchingSearchQuery)


    return {
      // 因为我们并不关心未经过滤的仓库
      // 我们可以在 `repositories` 名称下暴露过滤后的结果
      repositories: filteredRepositories,
      getUserRepositories,
      searchQuery,
      filters,
      updateFilters
    }
  }
}

后言

创作不易，要是本文章对广大读者有那么一点点帮助 不妨三连支持一下，您的鼓励就是博主创作的动力

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1276149.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

探索创意无限的Photoshop CC 2020Mac/Win版

探索创意无限的Photoshop CC 2020Mac/Win版

作为一款功能强大的图像处理软件，Photoshop CC 2020（简称PS 2020）在全球范围内备受设计师、摄影师和艺术家的喜爱和推崇。它不仅为用户提供了丰富多样的工具和功能，还不断推出新的创意特效和改进的功能，让用户的创意无…
阅读更多...
链式栈的结构与基本操作的实现（初始化，入栈，出栈，获取元素个数，判空，清空，销毁）

链式栈的结构与基本操作的实现（初始化，入栈，出栈，获取元素个数，判空，清空，销毁）

目录 一.链式栈的栈顶在哪里? 二.链栈的结构: 三.链式栈的实现: 四.链式栈的总结: 一.链式栈的栈顶在哪里? 二.链栈的结构: typedef struct LSNode{int data;struct LSNode* next;}LSNode ,*PLStack; //链栈的节点.由于栈顶在第一个数据节点,所以不需要top指针 三.链式…
阅读更多...
细粒度视觉分类的注意内核编码网络

细粒度视觉分类的注意内核编码网络

Attentional Kernel Encoding Networks for Fine-Grained Visual Categorization 1、介绍2、方法2.1 卷积模块2.2 级联注意力模块2.3 内核编码模块2.4 整体 3、结论 在本文中，我们提出了一种用于细粒度视觉分类的注意核编码网络(AKEN)。具体来说，AKEN聚合…
阅读更多...
【性能测试】性能分析和调优——步骤及案例

【性能测试】性能分析和调优——步骤及案例

文章目录 性能测试瓶颈分析常见的性能瓶颈分析性能调优性能调优步骤 性能调优案例案例一——CPU案例二——网络案例三——SQL查询案例四——JVM内存溢出 阅读前建议先了解前一篇文章：【性能测试】性能测试监控关键指标 性能测试瓶颈分析 常见的性能瓶颈分析 1、服…
阅读更多...
qemu网络通信

qemu网络通信

TAP（官网参考地址） TAP，即Tunneling traffic access point，是一种在Linux上使用的虚拟网卡技术，它可以为应用程序提供安全的网络连接。可以利用TAP搭建桥接网络，bridge两端分别为host和qemu虚拟机。 安装…
阅读更多...
带删除的并查集

带删除的并查集

Almost Union-Find 支持三种操作 合并 x x x和 y y y所在的集合把 x x x移到 y y y所在的集合求 x x x所在的集合的元素个数和元素之和 操作1和3是基本的并查集的操作. 关键在于操作 2 2 2: 若使用朴素的并查集，把节点 1 1 1合并到 3 3 3所在的集合，会…
阅读更多...
人机协同

人机协同

人机协同是指人和机器之间进行合作和协同工作的方式，人机协同是人工智能技术发展的一个重要方向，通过人机协同的方式，可以充分利用机器的智能和人的智慧，共同实现更高效、更智能的工作和生活方式。人机协同可以应用于各种领域和场…
阅读更多...
CGAL中2D三角剖分的数据结构

CGAL中2D三角剖分的数据结构

1、定义 三角剖分数据结构是一种设计用于处理二维三角剖分表示的数据结构。三角剖分数据结构的概念主要是设计用作CGAL2D三角剖分类的数据结构，这些类是嵌入平面中的三角剖分。然而，这个概念似乎更一般，可以用于任何可定向的无边界三角剖分曲…
阅读更多...
Robotframework自动化常见问题总结

Robotframework自动化常见问题总结

Robotframework自动化新手常见问题总结 1. 经常有人问这个元素找不到，一般先排除这两个地方，再自己找找 A：是否等待了足够的时间让元素加载 (增加sleep xx, wait Until xxx) B: 仔细查查，这个元素是否进入到另一个frame了 (sel…
阅读更多...
从订阅式需求发展，透视凌雄科技DaaS模式增长潜力

从订阅式需求发展，透视凌雄科技DaaS模式增长潜力

订阅制，C端消费者早已耳熟能详，如今也凭借灵活、服务更新稳定的特点，逐渐成为B端企业服务的新热点。 比如对中小企业而言，办公IT设备等配套支出都必不可少，但收入本身并不稳定，购置大堆固定资产&#xff0…
阅读更多...
uniapp实现文件预览过程

uniapp实现文件预览过程

H5实现预览 <template><iframe :src"_url" style"width:100vw; height: 100vh;" frameborder"0"></iframe> </template> <script lang"ts"> export default {data() {return {_url: ,}},onLoad(option…
阅读更多...
激光SLAM：Faster-Lio 算法编译与测试

激光SLAM：Faster-Lio 算法编译与测试

激光SLAM&#xff1a;Faster-Lio 算法编译与测试 前言编译测试离线测试在线测试 前言 Faster-LIO是基于FastLIO2开发的。FastLIO2是开源LIO中比较优秀的一个&#xff0c;前端用了增量的kdtree&#xff08;ikd-tree&#xff09;&#xff0c;后端用了迭代ESKF&#xff08;IEKF&a…
阅读更多...
7、单片机与W25Q128(FLASH)的通讯(SPI)实验(STM32F407)

7、单片机与W25Q128(FLASH)的通讯(SPI)实验(STM32F407)

SPI接口简介 SPI 是英语Serial Peripheral interface的缩写&#xff0c;顾名思义就是串行外围设备接口。是Motorola首先在其MC68HCXX系列处理器上定义的。 SPI&#xff0c;是一种高速的&#xff0c;全双工&#xff0c;同步的通信总线&#xff0c;并且在芯片的管脚上只占用四根…
阅读更多...
【学习记录】从0开始的Linux学习之旅——应用开发（helloworld）

【学习记录】从0开始的Linux学习之旅——应用开发（helloworld）

一、概述 Linux操作系统通常是基于Linux内核&#xff0c;并结合GNU项目中的工具和应用程序而成。Linux操作系统支持多用户、多任务和多线程&#xff0c;具有强大的网络功能和良好的兼容性。本文主要讲述如何在linux系统上进行应用开发。 二、概念及原理 应用程序通过系统调用与…
阅读更多...
理解BatchNormalization层的作用

理解BatchNormalization层的作用

深度学习 文章目录 深度学习前言一、“Internal Covariate Shift”问题二、BatchNorm的本质思想三、训练阶段如何做BatchNorm四、BatchNorm的推理(Inference)过程五、BatchNorm的好处六、机器学习中mini-batch和batch有什么区别 前言 Batch Normalization作为最近一年来DL的重…
阅读更多...
漏洞复现--Tenda路由器DownloadCfg信息泄露

漏洞复现--Tenda路由器DownloadCfg信息泄露

免责声明&#xff1a; 文章中涉及的漏洞均已修复&#xff0c;敏感信息均已做打码处理&#xff0c;文章仅做经验分享用途&#xff0c;切勿当真&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。传播、利用本文章所提供的信息而造成的任何直…
阅读更多...
IntelliJ IDEA创建springboot项目时不能选择java8的问题解决方案

IntelliJ IDEA创建springboot项目时不能选择java8的问题解决方案

最近博主也有创建springboot项目&#xff0c;发现了IntelliJ IDEA在通过Spring Initilizer初始化项目的时候已经没有java8版本的选项了。 基于这个问题&#xff0c;有了这篇文章的分享&#xff0c;希望能够帮助大家克服这个困难。 如图&#xff0c;现在创建springboot项目的时…
阅读更多...
BLIoTLink工业协议转换软件功能和使用教程

BLIoTLink工业协议转换软件功能和使用教程

1.功能简介 BLIoTLink 是一款各种 PLC 协议、Modbus RTU 、Modbus TCP、DL/T645 等多 种协议转换为 Modbus TCP、OPC UA、MQTT、BACnet IP、华为云 IoT、亚 马逊云 IoT、阿里云 IoT、ThingsBoard、钡铼云 IoT 等协议的软件。 BLIoTLink 下行支持&#xff1a;各种 PLC 协议、Mod…
阅读更多...
ES6知识

ES6知识

作用域 局部作用域 局部作用域分为函数作用域和块作用域 函数作用域 在函数内部声明的变量只能在函数内部被访问&#xff0c;外部无法直接访问。函数的参数也是函数内部的局部变量。不同函数内部声明的变量无法互相访问。函数执行完毕后&#xff0c;函数内部的变量实际被清空…
阅读更多...
【代码】考虑差异性充电模式的电动汽车充放电优化调度matlab-yalmip-cplex/gurobi

【代码】考虑差异性充电模式的电动汽车充放电优化调度matlab-yalmip-cplex/gurobi

程序名称&#xff1a;考虑差异性充电模式的电动汽车充放电优化调度 实现平台&#xff1a;matlab-yalmip-cplex/gurobi 代码简介&#xff1a;提出了一种微电网中电动汽车的协调充电调度方法&#xff0c;以将负荷需求从高峰期转移到低谷期。在所提出的方法中&#xff0c;基于充…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023