Vue 数据传递流程图指南

news2025/4/16 22:32:46

今天，我们探讨一下 Vue 中的组件传值问题。这不仅是我们在日常开发中经常遇到的核心问题，也是面试过程中经常被问到的重要知识点。无论你是初学者还是有一定经验的开发者，掌握这些传值方式都将帮助你更高效地构建和维护 Vue 应用

目录

1. 父子组件通信

2. 事件总线通信

3. 路由传参

 4. Vuex 状态管理

1. 父子组件通信

// 父组件
<child-component 
    :msg="parentMsg"
    @update="handleUpdate"
/>

// 子组件
props: ['msg'],
methods: {
    updateParent() {
        this.$emit('update', newValue)
    }
}

一、完整实现流程

1. 父组件传递数据

核心机制：通过 props 向下传递数据

<template>
  <!-- 绑定 props 与事件监听 -->
  <child-component 
    :msg="parentMsg" 
    @update="handleUpdate"
  />
</template>

<script>
export default {
  data() {
    return {
      parentMsg: "来自父组件的消息" // 初始数据
    }
  },
  methods: {
    handleUpdate(newValue) {
      this.parentMsg = newValue // 更新父组件数据
    }
  }
}
</script>

2. 子组件接收与响应

核心机制：通过 props 接收数据，通过 $emit 触发事件

<script>
export default {
  props: {
    msg: {
      type: String,    // 类型校验
      default: ''      // 默认值
    }
  },
  methods: {
    updateParent() {
      const newValue = "修改后的消息"
      this.$emit('update', newValue) // 触发自定义事件
    }
  }
}
</script>

3、数据流向示意图

父组件                    子组件
[parentMsg]  --props-->  (msg)
       ↑                     |
       |-- event update <----

4、关键特性说明

  1. ​单向数据流

  • 数据只能通过 props 从父级流向子级

  • 禁止在子组件中直接修改 props（需通过事件触发父级修改）

  1. ​事件触发规范

  • 推荐使用 kebab-case 事件名（如 update-data）

  • 可通过对象形式传递复杂数据

this.$emit('update', { 
  value: newValue,
  timestamp: Date.now()
})

  1. ​生命周期影响

  • 父组件的 data 更新会触发子组件的重新渲染

  • 可通过 watch 监听 props 变化

watch: {
  msg(newVal) {
    // 响应父组件数据更新
  }
}

二、进阶实现模式

1. 双向绑定简化（v-model）

<!-- 父组件 -->
<child-component v-model="parentMsg" />

<!-- 子组件 -->
<script>
export default {
  model: {
    prop: 'msg',
    event: 'update'
  },
  props: ['msg']
}
</script>

2. 跨层级通信

  • 使用 provide/inject（需谨慎设计）

  • 使用 Vuex/Pinia 状态管理（复杂场景推荐）

三、常见问题处理

1.Prop 验证失败

props: {
  msg: {
    type: String,
    required: true,
    validator: value => value.length > 5
  }
}

2.​异步更新处理

this.$nextTick(() => {
  this.$emit('update', asyncData)
})

3.​事件解绑建议

// 父组件销毁时自动解绑
// 需要手动解绑的特殊场景：
beforeDestroy() {
  this.$off('update')
}

四、最佳实践建议

  1. 保持 props 的纯净性（仅用于显示/基础逻辑）

  2. 复杂交互建议使用 Vuex 进行状态管理

  3. 大型项目推荐使用 TypeScript 定义 props 接口

  4. 使用自定义事件时添加命名空间（如 user:updated）

2. 事件总线通信

// 组件 A
this.$root.$emit('event-name', data)

// 组件 B
created() {
    this.$root.$on('event-name', this.handler)
}
beforeDestroy() {
    this.$root.$off('event-name', this.handler)
}

一、核心概念

事件总线：一个中央事件处理中心，用于组件间跨层级通信​（父子/兄弟/任意组件）。
通信原理：

组件A --emit()--> EventBus --on()--> 组件B

二、完整实现流程

1. 创建事件总线

// event-bus.js
import Vue from 'vue'
export const EventBus = new Vue()

2. 组件A发送事件

<!-- ComponentA.vue -->
<script>
import { EventBus } from './event-bus.js'

export default {
  methods: {
    sendData() {
      // 触发事件并传递数据
      EventBus.$emit('custom-event', {
        message: '来自组件A的数据',
        timestamp: Date.now()
      })
    }
  }
}
</script>

3. 组件B监听事件

<!-- ComponentB.vue -->
<script>
import { EventBus } from './event-bus.js'

export default {
  created() {
    // 注册事件监听
    EventBus.$on('custom-event', this.handleEvent)
  },
  beforeDestroy() {
    // 必须！销毁前移除监听
    EventBus.$off('custom-event', this.handleEvent)
  },
  methods: {
    handleEvent(payload) {
      console.log('收到数据:', payload)
      // 可在此处更新组件状态或触发其他操作
    }
  }
}
</script>

三、关键代码解析

方法

作用

参数说明

EventBus.$emit()

触发自定义事件

(事件名, 数据载荷)

EventBus.$on()

监听指定事件

(事件名, 回调函数)

EventBus.$off()

移除指定事件监听

(事件名, 回调函数)

四、高级用法

1. 一次性监听

EventBus.$once('one-time-event', this.handleOnce)

2. 全局事件总线（使用根实例）

// 组件内发送事件
this.$root.$emit('global-event', data)

// 组件内监听事件
this.$root.$on('global-event', callback)

3. 事件命名规范

// 推荐格式：领域/操作
EventBus.$emit('user/profile-updated', userData)

五、生命周期管理

  1. ​必须在beforeDestroy中移除监听，避免：

    • 内存泄漏

    • 重复触发僵尸监听器

  2. 自动移除方案：

// 使用 hook API 自动解绑
mounted() {
  this.$eventBus.$on('event', callback)
  this.$once('hook:beforeDestroy', () => {
    this.$eventBus.$off('event', callback)
  })
}

六、注意事项

1.数据不可变性

传递的数据应为副本而非引用：

EventBus.$emit('event', { ...originalObject })

2.调试技巧

查看所有事件监听：

console.log(EventBus._events)

3.性能优化

高频事件建议添加防抖：

import _ from 'lodash'
EventBus.$on('scroll', _.debounce(this.handleScroll, 200))

七、与Vuex的对比

EventBus

Vuex

​适用场景

简单通信/临时交互

复杂状态管理

​数据存储

无中心化存储

集中式状态存储

​调试支持

无Devtools集成

完整时间旅行调试

​推荐使用

小型项目/简单交互

中大型项目

八、完整代码示例

// 组件A：发送方
methods: {
  notify() {
    this.$root.$emit('notify', { 
      type: 'alert',
      content: '重要通知' 
    })
  }
}

// 组件B：接收方
created() {
  this.$root.$on('notify', this.showNotification)
},
beforeDestroy() {
  this.$root.$off('notify', this.showNotification)
},
methods: {
  showNotification(payload) {
    if(payload.type === 'alert') {
      alert(payload.content)
    }
  }
}

流程图解

组件A                           EventBus                           组件B
[点击按钮] --> $emit('event') --> 事件队列 --> 匹配监听器 --> $on('event') --> 执行回调
       ↖---------------------------数据载荷---------------------------↙

最佳实践

  1. 为事件总线创建独立模块

  2. 使用TypeScript定义事件类型 
    // event-types.d.ts
declare module 'vue/types/vue' {
  interface Vue {
    $eventBus: {
      $on(event: 'user-login', callback: (user: User) => void): void
      $emit(event: 'user-login', user: User): void
    }
  }
}

  3. 大型项目建议封装为可追踪的EventService

  4. 重要事件添加错误边界处理

3. 路由传参

// 路由跳转
this.$router.push({
    name: 'User',
    params: { id: 123 },
    query: { page: 1 }
})

// 组件中获取
created() {
    const userId = this.$route.params.id
    const page = this.$route.query.page
}

一、完整实现流程

1. 路由配置（核心配置）

// router/index.js
{
  path: "/user/:id",      // 动态路由参数（注意冒号语法）
  name: "UserDetail",     // 推荐使用命名路由（非图片中的"I','user"错误写法）
  component: UserComponent
}

2. 路由跳转

// 正确写法（修正图片中的符号错误和拼写错误）
this.$router.push({
  name: 'UserDetail',     // 使用路由名称更安全（而非图片中的"I','user"错误写法）
  params: { id: 123 },    // 路径参数（对应:id）
  query: { page: 1 }      // 查询参数（URL显示为?page=1）
})

3. 组件参数获取

created() {
  // 正确获取方式（修正图片中的符号错误）
  const userId = this.$route.params.id  // 获取路径参数（非图片中的"parc�名"错误）
  const page = this.$route.query.page   // 获取查询参数（非图片中的".php"错误）
  
  console.log(`用户ID: ${userId}, 当前页: ${page}`)
}

二、核心概念解析

1. 参数类型对比

params

query

​URL显示

/user/123

/user?page=1

​参数位置

路径中

URL问号后

​路由配置

需要预定义:id

无需预先声明

​参数类型

自动转为字符串

自动转为字符串

​刷新保留

是（需配合命名路由使用）

是

2. 生命周期响应

watch: {
  // 监听路由参数变化（图片未展示的重要功能）
  '$route'(to, from) {
    if (to.params.id !== from.params.id) {
      this.loadUserData(to.params.id)
    }
  }
}

三、代码优化建议

1. 类型转换处理

// 将字符串参数转为数字（图片未展示）
created() {
  this.userId = parseInt(this.$route.params.id)
  this.page = Number(this.$route.query.page) || 1
}

2. 使用Props接收参数（推荐方式

// 路由配置增加（图片未展示）
props: true

// 组件接收（更规范的写法）
props: {
  id: {
    type: [Number, String],
    required: true
  }
}

四、常见问题处理

1. params失效问题

// 错误写法（图片中写法会导致params丢失）
this.$router.push({
  path: '/user/123',     // 使用path时params会失效
  params: { id: 456 }    // 此参数不会被传递
})

// 正确写法（必须使用name）
this.$router.push({
  name: 'UserDetail',
  params: { id: 456 }
})

2. 参数继承方案

// 保持现有查询参数（图片未展示）
this.$router.push({
  params: { id: 789 },
  query: { ...this.$route.query } // 保留原有查询参数
})

五、完整代码示例

路由配置

// router/index.js
{
  path: '/user/:id',
  name: 'UserDetail',
  component: () => import('./views/UserDetail.vue'),
  props: true  // 启用props接收参数
}

路由跳转

methods: {
  navigate() {
    this.$router.push({
      name: 'UserDetail',
      params: { id: 2023 },
      query: { 
        page: 2,
        sort: 'desc'
      }
    })
  }
}

组件实现

<template>
  <div>
    <h2>用户ID: {{ formattedId }}</h2>
    <p>当前页码: {{ page }}</p>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: Number,
      required: true
    }
  },
  computed: {
    formattedId() {
      return `UID-${this.id.toString().padStart(6, '0')}`
    },
    page() {
      return Number(this.$route.query.page) || 1
    }
  },
  watch: {
    id(newVal) {
      this.loadUserData(newVal)
    }
  },
  methods: {
    loadUserData(id) {
      // 加载用户数据...
    }
  }
}
</script>

六、最佳实践建议

  1. ​参数验证：

// 路由配置添加正则约束
path: '/user/:id(\\d+)'  // 只接受数字ID

// 组件内验证
beforeRouteEnter(to, from, next) {
  if (!/^\d+$/.test(to.params.id)) {
    next({ name: 'ErrorPage' })
  } else {
    next()
  }
}

  1. ​编码规范：

  • 始终使用命名路由（避免路径硬编码）

  • 敏感参数使用params传递（不在URL暴露）

  • 复杂参数使用JSON序列化：

this.$router.push({
  name: 'Search',
  query: {
    filters: JSON.stringify({ 
      status: ['active', 'pending'],
      dateRange: '2023-01/2023-12'
    })
  }
})

流程图解

[路由跳转]
  │
  ├── params → /user/:id
  │        └──→ 组件通过 $route.params 或 props 接收
  │
  └── query → ?key=value
           └──→ 组件通过 $route.query 接收

常见错误排查表

现象

原因

解决方案

params参数未传递

使用了path而非name进行跳转

改用命名路由

参数丢失

未处理路由守卫中的中断

添加路由守卫参数验证

参数类型错误

未进行类型转换

使用Number()或parseInt转换

组件未响应参数变化

缺少watch监听

添加$route监听

 4. Vuex 状态管理

// 组件中使用
export default {
    computed: {
        ...mapState(['data']),
        ...mapGetters(['processedData'])
    },
    methods: {
        updateData() {
            this.$store.dispatch('updateAction', payload)
        }
    }
}

一、完整实现流程

1. 安装与配置

npm install vuex --save
// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { 
    offers: [], 
    data: [] 
  },
  mutations: { /* 同步修改方法 */ },
  actions: { /* 异步操作方法 */ },
  getters: { /* 计算属性方法 */ },
  modules: { /* 模块划分 */ }
})

2. 核心流程

组件 → dispatch → Actions → commit → Mutations → 修改 State → 触发视图更新

二、核心概念详解

1. State（应用状态）

state: {
  offers: [],
  data: []
}

// 组件访问
this.$store.state.offers

2. Mutations（同步修改）

mutations: {
  SET_OFFERS(state, payload) {
    state.offers = payload
  }
}

// 组件触发（禁止直接调用）
this.$store.commit('SET_OFFERS', newData)

3. Actions（异步操作）

actions: {
  async fetchOffers({ commit }) {
    const res = await axios.get('/api/offers')
    commit('SET_OFFERS', res.data)
  }
}

// 组件触发
this.$store.dispatch('fetchOffers')

4. Getters（计算属性）

getters: {
  processedData: state => {
    return state.data.filter(item => item.status === 1)
  }
}

// 组件访问
this.$store.getters.processedData

三、组件集成方案

1. mapState/mapGetters

import { mapState, mapGetters } from 'vuex'

export default {
  computed: {
    ...mapState({
      data: state => state.data
    }),
    ...mapGetters(['processedData'])
  }
}

2. Action分发

methods: {
  updateData() {
    // 修正原图片中的拼写错误
    this.$store.dispatch('updateAction', payload)
  }
}

四、模块化实现

// store/modules/user.js
export default {
  namespaced: true,
  state: { profile: null },
  mutations: { SET_PROFILE(state, val) {...} },
  actions: { fetchProfile({ commit }) {...} }
}

// 组件访问
this.$store.dispatch('user/fetchProfile')

五、完整代码示例

// 组件完整实现
export default {
  computed: {
    ...mapState({
      offers: state => state.offers
    }),
    ...mapGetters(['filteredOffers'])
  },
  methods: {
    refreshData() {
      this.$store.dispatch('fetchOffers')
    },
    updateOffer(payload) {
      this.$store.commit('UPDATE_OFFER', payload)
    }
  }
}

六、数据流向示意图

Component → dispatch → Action → commit → Mutation → State → Getter → Component
    ↑                                     ↓
    └─────── API 请求/异步操作 ────────────┘

七、高级特性

1. 严格模式

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production'
})

2. 插件开发

// 状态快照插件
const snapshotPlugin = store => {
  let prevState = JSON.parse(JSON.stringify(store.state))
  store.subscribe((mutation, state) => {
    console.log('状态变化:', mutation.type)
    console.log('旧状态:', prevState)
    console.log('新状态:', state)
    prevState = JSON.parse(JSON.stringify(state))
  })
}

八、常见问题处理

1. 异步操作错误处理

actions: {
  async fetchData({ commit }) {
    try {
      const res = await api.getData()
      commit('SET_DATA', res.data)
    } catch (error) {
      commit('SET_ERROR', error.message)
    }
  }
}

2. 动态模块注册

store.registerModule('dynamicModule', {
  state: {...},
  mutations: {...}
})

九、最佳实践建议

  1. ​命名规范：

    • Mutation类型使用全大写（SET_DATA）

    • Action名称使用驼峰命名（fetchUserInfo）

  2. ​模块组织：

    /store
  ├── index.js
  ├── modules
  │    ├── user.js
  │    └── product.js
  └── plugins

  3. ​TypeScript集成：

// store/types.ts
interface RootState {
  user: UserState
  products: ProductState
}

// 组件使用
@Action
public async updateProfile(payload: UserProfile) {
  this.context.commit('SET_PROFILE', payload)
}

  1. ​性能优化：

    • 避免在getter中进行重计算

    • 使用Vuex的持久化插件（vuex-persistedstate）

十、调试技巧

  1. ​DevTools时间旅行：

    • 查看状态快照

    • 回退/重做mutation

  2. ​状态快照输出：

console.log(JSON.stringify(this.$store.state, null, 2))

完整流程图解

[Component] 
   │ dispatch(action) 
   ↓
[Action] → 发起API请求 → commit(mutation)
   │                      ↓
   └─────────────→ [Mutation] → 修改State
                              ↓
                          [Getter] → 派生状态
                              ↓
                          [Component] 响应式更新

好了这一期就到这里，希望能够帮助到大家，咱们下下期见！

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

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

相关文章

【C语言】strstr查找字符串函数

【C语言】strstr查找字符串函数

一、函数介绍 strstr 是 C 语言标准库 <string.h> 中的字符串查找函数&#xff0c;用于在主字符串中查找子字符串的首次出现位置。若找到子串&#xff0c;返回其首次出现的地址&#xff1b;否则返回 NULL。它是处理字符串匹配问题的核心工具之一。 二、函数原型 char …
阅读更多...
机器学习、深度学习和神经网络

机器学习、深度学习和神经网络

机器学习、深度学习和神经网络 术语及相关概念 在深入了解人工智能&#xff08;AI&#xff09;的工作原理以及它的各种应用之前&#xff0c;让我们先区分一下与AI密切相关的一些术语和概念&#xff1a;人工智能、机器学习、深度学习和神经网络。这些术语有时会被交替使用&#…
阅读更多...
数字孪生在智慧城市中的前端呈现与 UI 设计思路

数字孪生在智慧城市中的前端呈现与 UI 设计思路

一、数字孪生技术在智慧城市中的应用与前端呈现 数字孪生技术通过创建城市的虚拟副本&#xff0c;实现了对城市运行状态的实时监控、分析与预测。在智慧城市中&#xff0c;数字孪生技术的应用包括交通流量监测、环境质量分析、基础设施管理等。其前端呈现主要依赖于Web3D技术、…
阅读更多...
Android OpenGLES 360全景图片渲染(球体内部)

Android OpenGLES 360全景图片渲染(球体内部)

概述 360度全景图是一种虚拟现实技术&#xff0c;它通过对现实场景进行多角度拍摄后&#xff0c;利用计算机软件将这些照片拼接成一个完整的全景图像。这种技术能够让观看者在虚拟环境中以交互的方式查看整个周围环境&#xff0c;就好像他们真的站在那个位置一样。在Android设备…
阅读更多...
LETTERS(DFS)

LETTERS(DFS)

【题目描述】 给出一个rowcolrowcol的大写字母矩阵&#xff0c;一开始的位置为左上角&#xff0c;你可以向上下左右四个方向移动&#xff0c;并且不能移向曾经经过的字母。问最多可以经过几个字母。 【输入】 第一行&#xff0c;输入字母矩阵行数RR和列数SS&#xff0c;1≤R,S≤…
阅读更多...
NVM 多版本Node.js 管理全指南（Windows系统）

NVM 多版本Node.js 管理全指南（Windows系统）

&#x1f9d1; 博主简介&#xff1a;CSDN博客专家、全栈领域优质创作者、高级开发工程师、高级信息系统项目管理师、系统架构师&#xff0c;数学与应用数学专业&#xff0c;10年以上多种混合语言开发经验&#xff0c;从事DICOM医学影像开发领域多年&#xff0c;熟悉DICOM协议及…
阅读更多...
C，C++语言缓冲区溢出的产生和预防

C，C++语言缓冲区溢出的产生和预防

缓冲区溢出的定义 缓冲区是内存中用于存储数据的一块连续区域&#xff0c;在 C 和 C 里&#xff0c;常使用数组、指针等方式来操作缓冲区。而缓冲区溢出指的是当程序向缓冲区写入的数据量超出了该缓冲区本身能够容纳的最大数据量时&#xff0c;额外的数据就会覆盖相邻的内存区…
阅读更多...
《Linux内存管理：实验驱动的深度探索》【附录】【实验环境搭建 2】【vscode搭建调试内核环境】

《Linux内存管理：实验驱动的深度探索》【附录】【实验环境搭建 2】【vscode搭建调试内核环境】

1. 如何调试我们的内核 1. GDB调试 安装gdb sudo apt-get install gdb-multiarchgdb-multiarch是多架构版本&#xff0c;可以通过set architecture aarch64指定架构 QEMU参数修改添加-s -S #!/usr/bin/shqemu-7.2.0-rc1/build/aarch64-softmmu/qemu-system-aarch64 \-nogr…
阅读更多...
Flutter项目之登录注册功能实现

Flutter项目之登录注册功能实现

目录&#xff1a; 1、页面效果2、登录两种状态界面3、中间按钮部分4、广告区域5、最新资讯6、登录注册页联调6.1、网络请求工具类6.2、注册页联调6.3、登录问题分析6.4、本地缓存6.5、共享token6.6、登录页联调6.7、退出登录 1、页面效果 import package:flutter/material.dart…
阅读更多...
ctfshow VIP题目限免 源码泄露

ctfshow VIP题目限免 源码泄露

根据题目提示是源代码泄露&#xff0c;右键查看页面源代码发现了 flag
阅读更多...
移动神器RAX3000M路由器变身家庭云之七：增加打印服务，电脑手机无线打印

移动神器RAX3000M路由器变身家庭云之七：增加打印服务，电脑手机无线打印

系列文章目录&#xff1a; 移动神器RAX3000M路由器变身家庭云之一&#xff1a;开通SSH&#xff0c;安装新软件包 移动神器RAX3000M路由器变身家庭云之二&#xff1a;安装vsftpd 移动神器RAX3000M路由器变身家庭云之三&#xff1a;外网访问家庭云 移动神器RAX3000M路由器不刷固…
阅读更多...
《函数基础与内存机制深度剖析：从 return 语句到各类经典编程题详解》

《函数基础与内存机制深度剖析：从 return 语句到各类经典编程题详解》

一、问答题 &#xff08;1&#xff09;使用函数的好处是什么&#xff1f; 1.提升代码的复用性 2.提升代码的可维护性 3.增强代码的可读性 4.提高代码的灵活性 5.方便进行单元测试 &#xff08;2&#xff09;如何定义一个函数&#xff1f;如何调用一个函数&#xff1f; 在Pytho…
阅读更多...
Python | 使用Matplotlib绘制Swarm Plot（蜂群图）

Python | 使用Matplotlib绘制Swarm Plot（蜂群图）

Swarm Plot&#xff08;蜂群图&#xff09;是一种数据可视化图表&#xff0c;它用于展示分类数据的分布情况。这种图表通过将数据点沿着一个或多个分类变量轻微地分散&#xff0c;以避免它们之间的重叠&#xff0c;从而更好地显示数据的分布密度和分布趋势。Swarm Plot特别适用…
阅读更多...
新版本Xmind结合DeepSeek快速生成美丽的思维导图

新版本Xmind结合DeepSeek快速生成美丽的思维导图

前言 我的上一篇博客&#xff08;https://quickrubber.blog.csdn.net/article/details/146518898&#xff09;中讲到采用Python编程可以实现和Xmind的互动&#xff0c;并让DeepSeek来生成相应的代码从而实现对内容的任意修改。但是&#xff0c;那篇博客中提到的Xmind有版本的限…
阅读更多...
set和map封装

set和map封装

目录 set和map区别 set和map的插入 set和map的实现 修改红黑树的模板参数 修改比较时使用的变量 迭代器的实现 迭代器的定义 *解引用重载 ->成员访问重载 自增重载 重载 封装迭代器 RBTree迭代器封装 封装set迭代器 对set迭代器进行修改 封装map迭代器 修改…
阅读更多...
【Linux】Orin NX + Ubuntu22.04配置国内源

【Linux】Orin NX + Ubuntu22.04配置国内源

1、获取源 清华源 arm 系统的源，可以在如下地址获取到 https://mirror.tuna.tsinghua.edu.cn/help/ubuntu-ports/ 选择HTTPS，否则可能报错： 明文签署文件不可用，结果为‘NOSPLIT’（您的网络需要认证吗？）查看Orin NX系统版本 选择jammy的源 2、更新源 1）备份原配…
阅读更多...
Open-Sora：开源AI视频生成的新星

Open-Sora：开源AI视频生成的新星

一.引言 近年来&#xff0c;AI视频生成技术快速发展&#xff0c;从文本生成图像&#xff08;如Stable Diffusion、DALLE&#xff09;到文本生成视频&#xff08;如Runway、Pika&#xff09;&#xff0c;AI在多媒体创作领域的应用日益广泛。近期&#xff0c;Open-Sora作为一款开…
阅读更多...
【堆】《深入剖析优先级队列（堆）：数据结构与算法的高效搭档》

【堆】《深入剖析优先级队列（堆）：数据结构与算法的高效搭档》

文章目录 前言例题一、最后一块石头的重量二、数据流中的第 K 大元素三、前K个高频单词四、数据流的中位数 结语 前言 什么是优先级队列算法呢&#xff1f;它的算法原理又该怎么解释&#xff1f; 优先级队列&#xff08;堆&#xff09;算法是一种特殊的数据结构和算法&#xf…
阅读更多...
【CMOS输出缓冲器驱动强度】

【CMOS输出缓冲器驱动强度】

一 、学习笔记 原始资料&#xff1a;https://www.ti.com.cn/cn/lit/an/zhcae18/zhcae18.pdf?ts1743589394832 Q1、电平转换芯片的其中一个关键指标是转换速率&#xff0c;转换速率跟什么因素有关系呢&#xff1f; 1、瞬态驱动强度 上升或下降时间用于评估瞬态驱动强度。需要…
阅读更多...
【C++】Cplusplus进阶

【C++】Cplusplus进阶

模板的进阶&#xff1a; 非类型模板参数 是C模板中允许使用具体值&#xff08;而非类型&#xff09;作为模板参数的特性。它们必须是编译时常量&#xff0c;且类型仅限于整型、枚举、指针、引用。&#xff08;char也行&#xff09; STL标准库里面也使用了非类型的模板参数。 …
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023