Vue3 之 动态组件和KeepAlive组件

news2024/11/17 16:25:39

一、动态组件

1、简介

​ 在某些业务场景下，页面的某模块具有多个组件但在同一时间只显示一个，需要在多个组件之间进行频繁的切换，如：tab切换等场景。除了可以使用v-if、v-show根据不同条件显示不同组件之外，还可以通过动态组件<component>来实现相同的效果。<component>虽然被称为动态组件，但其并非是内置组件，而是属于模板语法，在模板编译阶段会被编译。

​ 动态组件允许在同一挂载节点动态切换多个组件，可以根据具体条件，动态决定显示的组件。比起v-if/v-show的实现方式来说，无需创建多个挂载节点，且代码量更少。

​ 动态组件默认只保持当前组件存活，其余被切换掉的组件会被卸载，但可以结合<KeepAlive>组件实现被切换掉的组件保持存活状态。

2、基础用法

​ 动态组件的核心在于<component>标签和is属性，Vue会根据is属性的值来决定具体渲染在<component>标签位置上的是哪个组件。

<component :is="son1"></component>

​ 在通过is属性指定展示的子组件时，is属性的值可以是组件在引入到当前组件时定义的注册名称（String类型，常在选项式API中使用），也可以是组件本身的定义（Component类型，常在组合式API中使用）。

组合式API中使用组件本身的定义决定渲染组件：

​ 在组合式API中，如果我们需要使用变量存储导入的子组件实例，如果使用ref，则控制台会抛出warn。因为ref是将组件实例转换为响应式对象，可能会导致不必要的性能开销，建议使用markRaw（对象本身）或shallowRef（浅层响应式）来避免这种情况。

<template>
  <div>
    <h1>这就是动态组件</h1>
    <!-- 根据按钮点击切换组件 -->
    <button v-for="(item, index) in components" :key="index" @click="currentComponent = item">{{ index }}</button>
    <!-- 使用动态组件 -->
    <component :is="currentComponent" />
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
// 导入子组件
import son1 from '../components/dtzj-son1.vue'
import son2 from '../components/dtzj-son2.vue'
import son3 from '../components/dtzj-son3.vue'

// 定义当前展示的子组件 值为对子组件的引用
const currentComponent = shallowRef(son1)
// 定义子组件对象
const components = {
  son1,
  son2,
  son3
}

// 2秒后切换显示的子组件
setTimeout(() => {
  currentComponent.value = son3
}, 2000)
</script>
选项式API中使用组件注册名决定渲染组件：
<template>
  <component :is="view" />
</template>

<script>
import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>
3、渲染普通HTML元素

​ is属性的值还可以是普通的HTML标签名（不包含<>），但是要以字符串的形式设置。Vue会根据字符串的值渲染对应的HTML标签。<component>标签可以写成双标签的形式，内部包含其他内容。

<template>
  <div>
    <!-- 渲染普通HTML -->
    <component v-for="(item, index) in htmlList" :key="index" :is="item">
      {{ item+'标签' }}
    </component>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

// 定义要渲染的html标签
const htmlList = ref(['a','span','div','h5','p','i','aside'])
</script>
页面效果：

在这里插入图片描述

4、渲染内置组件

​ 动态组件还可以将内置组件（<Transition>、Teleport等）作为要渲染的内容，但实际上这种场景并不多见，因此就不展开叙述了。

<template>
  <div>
    <!-- 渲染内置组件 -->
    <component :is="Transition">
      <div v-show="show">这里是需要过渡的内容</div>
    </component>
    <!-- 等同于 -->
    <Transition>
      <div v-show="show">这里是需要过渡的内容</div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
// 导入内置组件
import { ref, Transition } from 'vue'
// 定义div的显/隐
const show = ref(false)


// 3秒后切换div的显隐状态
setTimeout(() => {
  show.value = true
}, 3000)

</script>

<style scoped>
/* 定义过渡样式 */
.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
  opacity: 0;
}
</style>
5、v-model的特殊性

​ 在<component> 标签上使用 v-model时，模板编辑器会将其扩展为modelValue的prop和update:modelValue的事件监听器，而并非原始的v-model双向绑定功能。

​ 如果渲染的普通自定义子组件，内部可以接收prop和使用事件监听器，或者使用defineModel()宏方法，进行相应操作。

父组件：
<template>
  <div>
    <!-- 使用的动态组件 并使用v-mode -->
    <component :is="currentComponent" v-model="test" />
    <h3>{{ test }}</h3>
  </div>
</template>

<script setup lang="ts">
import { shallowRef } from 'vue'
// 导入子组件
import son1 from '../components/dtzj-son1.vue'

// 定义当前展示的子组件 值为对子组件的引用
const currentComponent = shallowRef(son1)
// 定义一个变量
const test = ref('test')
</script>
子组件：
<template>
  <div>
    <h5>{{ modelVar }}</h5>
  </div>
</template>

<script setup lang="ts">
import { onMounted } from 'vue'


const  modelVar = defineModel();

onMounted(() => {
  setTimeout(() => {
    modelVar.value = '子组件更改了modelVar';
  }, 1000)
})
</script>

​ 但如果渲染的是普通HTML元素，且是input、textarea、select等本身可以使用v-model的元素，则v-model的双向绑定功能不会起作用。如果需要实现双向绑定，则可以手动通过对应的attribute和事件来实现。

<script setup>
import { ref } from 'vue'

const tag = ref('input')
const username = ref('')
</script>

<template>
  <!-- 由于 'input' 是原生 HTML 元素，因此这个 v-model 不起作用 -->
  <component :is="tag" v-model="username" />
</template>

二、KeepAlive

1、简介

​ 在上面的内容中，讲解了动态组件的相关知识，但是在默认情况下，通过动态组件被切走的组件，会被卸载后被销毁，其内部的所有变动过的状态会丢失，等再次切换回该组件时，则会重新创建该组件的组件实例。但在某些场景下，我们不希望被切走的组件被销毁，并且保留其内部状态，那此时就需要借助KeepAlive内置组件。

​ 将KeepAlive组件包裹在动态组件的外层，当动态组件发生切换时，默认会将所有被切走的非活跃组件进行缓存，而不是销毁，并且组件内部的状态也会被保留。

​ 在需要频繁反复切换动态组件的业务场景中，如：tab切换、路由转换等，使用KeepAlive组件可以减少组件实例的销毁和创建过程，从而优化页面的性能。

2、基础用法

​ KeepAlive组件内部可以包裹动态组件，也可以包裹普通组件。但KeepAlive组件在任何时间节点，只能有一个活跃组件作为其直接子节点，不允许多个组件共存作为直接子节点。

动态组件：

​ 当KeepAlive组件内部包裹动态组件时，如果动态组件发生的切换，那被切走的组件默认会被缓存，当再次切换回该组件时，将从缓存中将组件取出，重新显示。

<template>
  <div>
    <KeepAlive>
      <component :is="currentComponent" />
    </KeepAlive>
  </div>
</template>

<script setup lang="ts">
import { shallowRef, KeepAlive } from 'vue'
import son1 from '../components/keepalive-son1.vue'
import son2 from '../components/keepalive-son2.vue'

// 定义当前展示的子组件 值为对子组件的引用
const currentComponent = shallowRef(son1)

// 3秒切换显示的子组件
setTimeout(() => {
  currentComponent.value = son2
}, 3000)
</script>
普通组件：

​ 当KeepAlive组件内部包裹普通组件时，通常与v-if/v-else-if/v-else指令结合使用，保证组件内部在同一时间节点只能有一个组件作为直接子节点。

<template>
  <div>
    <KeepAlive>
       <son1 v-if="show === 1"></son1>
        <son2 v-else></son2>
    </KeepAlive>
  </div>
</template>

<script setup lang="ts">
import { ref, KeepAlive } from 'vue'
import son1 from '../components/keepalive-son1.vue'
import son2 from '../components/keepalive-son2.vue'

// 决定显示的组件
const show = ref(1)


// 3秒后切换显示的子组件
setTimeout(() => {
  // currentComponent.value = son2
  show.value = 2;
}, 3000)
</script>

​ 注意： 不能使用v-show指令，因为其仅仅是通过设置display属性实现的元素显隐，其节点依旧保留在DOM中，实际上会让KeepAlive组件内部同时存在多个直接子节点，从而引发报错。

3、组件属性

​ KeepAlive组件有三个可以指定的属性，分别为：include、exclude和max。

interface KeepAliveProps {
  /**
   * 如果指定，则只有与 `include` 名称
   * 匹配的组件才会被缓存。
   */
  include?: MatchPattern
  /**
   * 任何名称与 `exclude`
   * 匹配的组件都不会被缓存。
   */
  exclude?: MatchPattern
  /**
   * 最多可以缓存多少组件实例。
   */
  max?: number | string
}

type MatchPattern = string | RegExp | (string | RegExp)[]
include：

​ KeepAlive组件默认会缓存内部所有非活跃组件实例，但缓存过多的组件实例也会占用过多的内存资源，因此可以通过include属性显式的指定要被缓存的组件，未被指定的组件则不会被缓存。

​ include属性的值可以是英文逗号分割的字符串，或者一个正则表达式，以及包含两种类型的数组。如果属性值为后两者，则需要使用v-bind进行绑定。

<!-- 属性值为字符串 如果要缓存多个组件 需要以英文逗号分割的 注意分隔符前后不加空格 -->
<KeepAlive include="keepalive-son1,keepalive-son2">
	<component :is="currentComponent" />
</KeepAlive>
<!--属性值为数组形式 指定多个组件 -->
<KeepAlive :include="['keepalive-son1', 'keepalive-son2']">
	<component :is="currentComponent" />
</KeepAlive>
<!-- 属性值为正则表达式 符合匹配条件的组件会被缓存 -->
<KeepAlive :include="/^keepalive-son/">
	<component :is="currentComponent" />
</KeepAlive>

<script setup lang="ts">
import { ref, shallowRef, KeepAlive } from 'vue'
// 注意这里的 son1 是在当前组件内的注册名称 组件本身生成的name属性为 keepalive-son1
import son1 from '../components/keepalive-son1.vue'
import son2 from '../components/keepalive-son2.vue'

// 定义当前展示的子组件 值为对子组件的引用
const currentComponent = shallowRef(son1)

// 3秒后切换显示的子组件
setInterval(() => {
  currentComponent.value === son1
    ? (currentComponent.value = son2)
    : currentComponent.value = son1
}, 3000)
</script>

​ 该属性的属性值会与子组件的name选项进行匹配，在选项式API中必须显示的声明name选项，在组合式API中使用<script setup>的组件会根据文件名称隐式的生成完全相同的name选项，无需手动声明。

使用<script setup>的组件keepalive-son1.vue：

<template>
  <div>
    <p>这是子组件1中的count：{{ count }}</p>
    <button @click="count++">add</button>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const count = ref(1111)

// 此时组件没有显式指定name属性 则会隐式的设置name的值为 keepalive-son1
// KeepAlive 会根据 keepalive-son1 进行识别
</script>

非使用<script setup>的组件keepalive-son2.vue：

<template>
  <div>
    <p>这是子组件2中的count：{{ count }}</p>
    <button @click="count++">add</button>
  </div>
</template>

<script>
export default {
  // 显式的指定name属性
  name: 'KeepaliveSon2',
  data() {
    return {
      count: 2222
    };
  },

};
</script>

​ 如果在使用<script setup>的单文件组件中，想要显式的指定组件的name属性，可以通过defineOptions()宏方法或者export default语法来指定：

<!-- 方法一： 通过新的script + export default 定义组件的name属性 -->
<!-- 注意两个 script 的 lang 属性要一致 -->
<script lang="ts">
export default {
  name: 'KeepaliveSon1',
}
</script>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const count = ref(1111)
// 方法二： 通过 defineOptions 定义组件的name属性
defineOptions({
 name: 'KeepaliveSon1',
})
</script>
exclude：

​ exclude属性与include属性正好相反，用于指定哪些组件不会被缓存。属性值类型也相同，可以是英文逗号分割的字符串，或者一个正则表达式，以及包含两种类型的数组。

<!-- 属性值为字符串 如果要指定不缓存多个组件 需要以英文逗号分割的 注意分隔符前后不加空格 -->
<KeepAlive exclude="KeepaliveSon1,KeepaliveSon2">
	<component :is="currentComponent" />
</KeepAlive>
<!--属性值为数组形式 指定多个组件不缓存 -->
<KeepAlive :exclude="['keepalive-son1', 'keepalive-son2']">
	<component :is="currentComponent" />
</KeepAlive>
<!-- 属性值为正则表达式 符合匹配条件的组件不会被缓存 -->
<KeepAlive :exclude="/^keepalive-son/">
	<component :is="currentComponent" />
</KeepAlive>

​ 属性值会与子组件的name选项进行匹配，在选项式API中必须显示的声明name选项，在组合式API中使用<script setup>的组件会根据文件名称隐式的生成完全相同的name选项，无需手动声明。如果想要显式的指定name属性，可以通过defineOptions()宏方法或者export default语法来指定。

max：

​ 该属性用于指定KeepAlive能缓存的组件实例数量，属性值为一个非负整数。当切换的组件数量大于max属性值时，会自动将最先缓存的组件实例销毁，只保留最近缓存的max个组件实例，避免过渡占用内存资源。

<!-- 属性值为2 只会缓存最近切换的两个组件实例 -->
<KeepAlive max="2">
	<component :is="currentComponent" />
</KeepAlive>
4、生命周期

​ 当<KeepAlive>内部组件初始挂载时，挂载的组件会进入活跃状态，如果发生组件切换，组件实例会从DOM上移除，但组件会被<KeepAlive>缓存，组件状态变为不活跃状态，当组件重新被激活，挂载到DOM中时，组件状态会再次变为活跃状态。

​ 针对被缓存组件的这两种状态变化，Vue提供了对应的生命周期钩子函数供开发者调用：

使用<script setup>的组件：
<script setup>
import { onActivated, onDeactivated } from 'vue'

onActivated(() => {
  // 调用时机为首次挂载
  // 以及每次从缓存中被激活时调用
})

onDeactivated(() => {
  // 在及组件卸载时
  // 以每次进入缓存时调用
})
</script>
未使用<script setup>的组件：
<script>
export default {
  name: 'KeepaliveSon2',
  activated() {
    // 调用时机为首次挂载
    // 以及每次从缓存中被激活时调用
    console.log('子组件2被挂载/激活了');
  },
  deactivated() {
    // 在及组件卸载时
    // 以每次进入缓存时调用
    console.log('子组件2被缓存/卸载了');
  },
};
</script>

​ <KeepAlive>内部发生组件切换时，会先触发被缓存组件的Deactivated钩子函数，再触发要激活组件的Activated钩子函数。但如果项目使用了服务端渲染，则这两个钩子函数在服务器端渲染期间不会被触发。

​ 如果<KeepAlive>缓存的组件内部还嵌套有其他后代组件，则后代组件也可以使用这两个生命周期钩子函数。在被激活时，后代组件的Activated钩子函数先触发，再触发根组件的Activated钩子函数；在被卸载时也是一样，后代组件的Deactivated钩子函数先触发，再触发根组件的Deactivated钩子函数。

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

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

相关文章

Element-Plus中表格及分页功能

Element-Plus中表格及分页功能

导入Element-Plus 具体步骤如下&#xff1a;&#xff08;内容参照官网&#xff1a;安装 | Element Plus&#xff09; # 选择一个你喜欢的包管理器# NPM $ npm install element-plus --save# Yarn $ yarn add element-plus# pnpm $ pnpm install element-plus 在main.js文件的…
阅读更多...
【论文阅读笔记】The Google File System

【论文阅读笔记】The Google File System

1 简介 Google File System (GFS) 是一个可扩展的分布式文件系统&#xff0c;专为快速增长的Google数据处理需求而设计。这篇论文发表于2003年&#xff0c;此前已在Google内部大规模应用。 GFS不仅追求性能、可伸缩性、可靠性和可用性等传统分布式文件系统的设计目标&#xf…
阅读更多...
超市进销存|基于SprinBoot+vue的超市进销存系统(源码+数据库+文档)

超市进销存|基于SprinBoot+vue的超市进销存系统(源码+数据库+文档)

超市进销存系统 目录 基于SprinBootvue的超市进销存系统 一、前言 二、系统设计 三、系统功能设计 1 登录注册 2 管理员功能模块 3员工功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主介绍&#x…
阅读更多...
leetcode 1264页面推荐(postgresql)

leetcode 1264页面推荐(postgresql)

需求 朋友关系列表&#xff1a; Friendship ---------------------- | Column Name | Type | ---------------------- | user1_id | int | | user2_id | int | ---------------------- 这张表的主键是 (user1_id, user2_id)。 这张表的每一行代表着 user1_id 和 user2_id 之间…
阅读更多...
URL跳转

URL跳转

1.URL介绍 开放重定向&#xff08;Open Redirect&#xff09;&#xff0c;也叫URL跳转漏洞&#xff0c;是指服务端未对传入的跳转url变量进行检查和控制&#xff0c;导致诱导用户跳转到恶意网站&#xff0c;由于是从可信的站点跳转出去的&#xff0c;用户会比较信任。 2.URL跳…
阅读更多...
【最新区块链论文录用资讯】CCF A—INFOCOM 2024 共17篇

【最新区块链论文录用资讯】CCF A—INFOCOM 2024 共17篇

Conference&#xff1a;IEEE International Conference on Computer Communications CCF level&#xff1a;CCF A Categories&#xff1a;计算机网络 Year&#xff1a;2024 Num&#xff1a;17 A Generic Blockchain-based Steganography Framework with High Capacity via …
阅读更多...
员工管理和激励怎么做？试试场景化激励解决方案！

员工管理和激励怎么做？试试场景化激励解决方案！

截止到2020年底&#xff0c;中国企业主体数量达3858.3万&#xff0c;同比增速达11.1%。如何留住人才、激励人才以强化人才与企业“黏性”&#xff0c;最大化提升员工的忠诚度与敬业度&#xff0c;成为企业未来人才发展战略的主要方向之一。 一、传统激励方式存在哪些不足 传统的…
阅读更多...
【加密与解密（第四版）】第十三章笔记

【加密与解密（第四版）】第十三章笔记

第十三章 HOOK技术 13.1 Hook概述 IAT HOOK&#xff08;改地址&#xff09; BOOL IAT_InstallHook(){BOOL bResult FALSE ;HMODULE hCurExe GetModuleHandle(NULL);PULONG_PTR pt ;ULONG_PTR OrginalAddr;bResult InstallModuleIATHook(hCurExe,"user32.dll",&qu…
阅读更多...
若依启动run-modules-system.bat报错问题解决方案

若依启动run-modules-system.bat报错问题解决方案

在启动run-modules-system.bat时遇到了一些问题,在网上搜索无果后,排查解决完毕 1.启动nacos时,报错如下 Error creating bean with name grpcClusterServer: Invocation of init method failed; nested exception is java.io.IOException: Failed to bind to address 0.0.0.0…
阅读更多...
CSS精灵图

CSS精灵图

详细内容见B站黑马程序员网课&#xff1a; 【前端Web开发HTML5CSS3移动web视频教程&#xff0c;前端web入门首选黑马程序员】https://www.bilibili.com/video/BV1kM4y127Li?p99&vd_source06e5549bf018e111f4275c259292d0da
阅读更多...
智慧林业云巡平台 客户端和移动端（支持语音和视频）自动定位巡护，后端离线路线监测

智慧林业云巡平台 客户端和移动端（支持语音和视频）自动定位巡护，后端离线路线监测

目前现状 无法客观、方便地掌握护林员的到位情况&#xff0c;因而无法有效地保证巡护人员按计划要求&#xff0c;按时按周期对所负责的林区开展巡护&#xff0c;使巡护工作的质量得不到保证。遇到火情、乱砍滥伐等灾情时无法及时上报处理&#xff0c;现场状况、位置等信息描述…
阅读更多...
代码随想录——左叶子之和（Leetcode404）

代码随想录——左叶子之和（Leetcode404）

题目链接 BFS 队列 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right)…
阅读更多...
小程序使用vant组件库

小程序使用vant组件库

一:下载组件库 在小程序内npm下载的包 vant组件库官网:快速上手 - Vant Weapp (youzan.github.io) 1)首先有有package.json文件,没有的话则先初始化 即使通过package.json去下载包,也需要有,可以观察下载的包. 2)下载包 3)构建npm包 下载包之后存储在node_modules内,但是我们…
阅读更多...
ChatGPT原创指令大全(持续更新)

ChatGPT原创指令大全(持续更新)

随着ChatGPT在互联网上的使用越来越多&#xff0c;但很多人在使用ChatGPT的过程中会觉得得到的答案并不是很精准。究其原因其实是你给它的命令不够准确、不够到位。实际现在网上已经很多关于ChatGPT的网站&#xff0c;可以快速生成带有快捷键的ChatGPT指令。但是对于不熟悉Chat…
阅读更多...
Leetcode3161. 物块放置查询(Go语言的红黑树 + 线段树）

Leetcode3161. 物块放置查询(Go语言的红黑树 + 线段树）

题目截图 题目分析 每次1操作将会分裂成两块区间长度&#xff0c;以最近右端点记录左侧区间的长度即可 因此涉及到单点更新和区间查询 然后左右侧最近端点则使用redBlackTree&#xff0c;也就是python中的sortedlist ac code type seg []int// 把 i 处的值改成 val func (t …
阅读更多...
44、Flink 的 Interval Join 详解

44、Flink 的 Interval Join 详解

Interval Join Interval join 组合元素的条件为&#xff1a;两个流&#xff08;暂时称为 A 和 B&#xff09;中 key 相同且 B 中元素的 timestamp 处于 A 中元素 timestamp 的一定范围内&#xff0c;即 b.timestamp ∈ [a.timestamp lowerBound; a.timestamp upperBound] 或…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)

HTML静态网页成品作业(HTML+CSS)——动漫熊出没介绍网页(3个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示三、代码目录四、网站代码HTML部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0c;未使用Javacsript代码&#xff0c;共有3个页面。 二、作品演示 三、代…
阅读更多...
美股重大变化，结算周期将从T+2变成T+1

美股重大变化，结算周期将从T+2变成T+1

KlipC报道&#xff1a;当地时间5月28日&#xff0c;美国证券交易结算时间将从“T2”改为“T1”。美股迎来历史性时刻。 目前&#xff0c;美股实行的是T0交易制度&#xff0c;T2结算交割制度。即投资者买入一只股票&#xff0c;当天可以卖出&#xff0c;但是交易的结算并不是立…
阅读更多...
【国信华源：以专业服务，协助水利厅抵御强暴雨】

【国信华源：以专业服务，协助水利厅抵御强暴雨】

5月18日-19日&#xff0c;广西出现入汛以来最强暴雨天气过程&#xff0c;钦州、防城港、北海、南宁等地出现特大暴雨&#xff0c;多地打破降雨量极值。国信华源技术团队积极行动驻守一线&#xff0c;为打好山洪灾害防御的提前战、主动战提供了技术支撑。 5月17日18时&#xff0…
阅读更多...
简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪（Python）

简单的利用有限脉冲响应(FIR)滤波器对心电信号进行降噪（Python）

代码很简单。 import numpy as np import matplotlib.pyplot as plt#------------------------Bandstop Filter Function------------------------ def bandstop(M,low,high,Fs):#50Hz removalk1 int( (low/Fs)*M) # index 22k2 int( (high/Fs)*M) # index 27#DC removalk0 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023