Vue 數據傳遞流程圖指南

今天，我們探討一下 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.idconst 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: UserStateproducts: 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.pswp.cn/news/900018.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/900018.shtml
英文地址，請注明出處：http://en.pswp.cn/news/900018.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

Git Restore 命令詳解與實用示例

Git Restore 命令詳解與實用示例

文章目錄 Git Restore 命令詳解與實用示例1. 恢復工作區文件到最后一次提交的狀態基本命令示例恢復所有更改 2. 恢復某個文件到特定提交的狀態基本命令示例 3. 恢復暫存區的文件基本命令示例恢復所有暫存的文件 git restore 的常見選項git restore 與 git checkout 比較總結 Gi…
閱讀更多...
AI 防口誤指南_LLM 輸出安全實踐

AI 防口誤指南_LLM 輸出安全實踐

在數字化轉型的浪潮中&#xff0c;大語言模型(以下統稱LLM)已成為企業技術棧中不可或缺的智能組件&#xff0c;這種強大的AI技術同時也帶來了前所未有的安全挑戰。它輸出的內容如同雙面刃&#xff0c;一面閃耀著效率與創新的光芒&#xff0c;另一面卻隱藏著"幻覺"與不…
閱讀更多...
程序化廣告行業（55/89）：DMP與DSP對接及數據統計原理剖析

程序化廣告行業（55/89）：DMP與DSP對接及數據統計原理剖析

程序化廣告行業&#xff08;55/89&#xff09;&#xff1a;DMP與DSP對接及數據統計原理剖析 大家好呀&#xff01;在數字化營銷的大趨勢下&#xff0c;程序化廣告已經成為眾多企業實現精準營銷的關鍵手段。上一篇博客我們一起學習了程序化廣告中的人群標簽和Look Alike原理等知…
閱讀更多...
運維之 Centos7 防火墻（CentOS 7 Firewall for Operations and Maintenance）

運維之 Centos7 防火墻（CentOS 7 Firewall for Operations and Maintenance）

運維之 Centos7 防火墻 1.介紹 Linux CentOS 7 防火墻/端口設置&#xff1a; 基礎概念&#xff1a; 防火墻是一種網絡安全設備&#xff0c;用于監控和控制網絡流量&#xff0c;以保護計算機系統免受未經授權的訪問和惡意攻擊。Linux CentOS 7操作系統自帶了一個名為iptables的…
閱讀更多...
第十五屆藍橋杯大賽軟件賽省賽Python 大學 C 組題目試做（下）【本期題目：砍柴，回文字符串】

第十五屆藍橋杯大賽軟件賽省賽Python 大學 C 組題目試做（下）【本期題目：砍柴，回文字符串】

okk&#xff0c;大伙&#xff0c;這一期我們就把C組的題目刷完。 本期題目&#xff1a;砍柴&#xff0c;回文字符串 文章目錄 砍柴題目思路分析舉個栗子思路總結 代碼 回文字符串題目思路分析代碼 感謝大伙觀看&#xff0c;別忘了三連支持一下大家也可以關注一下我的其它專欄&a…
閱讀更多...
Design Compiler：庫特征分析(ALIB)

Design Compiler：庫特征分析(ALIB)

相關閱讀 Design Compilerhttps://blog.csdn.net/weixin_45791458/category_12738116.html?spm1001.2014.3001.5482 簡介 在使用Design Compiler時&#xff0c;可以對目標邏輯庫進行特征分析&#xff0c;并創建一個稱為ALIB的偽庫&#xff08;可以被認為是緩存&#xff09;&…
閱讀更多...
MySQL索引原理：從B+樹手繪到EXPLAIN

MySQL索引原理：從B+樹手繪到EXPLAIN

最近在學后端&#xff0c;學到了這里做個記錄 一、為什么索引像書的目錄&#xff1f; 類比&#xff1a;500頁的技術書籍 vs 10頁的目錄缺點&#xff1a;全表掃描就像逐頁翻找內容優點&#xff1a;索引將查詢速度從O(n)提升到O(log n) 二、B樹手繪課堂 1. 結構解剖&#xff0…
閱讀更多...
全連接RNN反向傳播梯度計算

全連接RNN反向傳播梯度計算

全連接RNN反向傳播梯度計算 RNN數學表達式BPTT(隨時間的反向傳播算法)參數關系網絡圖L對V的梯度L對U的梯度L對W和b的梯度 RNN數學表達式 BPTT(隨時間的反向傳播算法) 參數關系網絡圖 L對V的梯度 L對U的梯度 L對W和b的梯度
閱讀更多...
C++高效讀取大規模文本格式點云（windows）

C++高效讀取大規模文本格式點云（windows）

需使用VS2017及以上版本&#xff0c;C語言標準選擇C17&#xff0c;支持OpenMP。 執行效率明顯優于ifstream stof。 // 點云數據結構 struct PointXYZ {std::array<float, 3> coord; };float string_to_float_fast(const std::string& str) {float value;auto [p…
閱讀更多...
【Linux】進程信號的捕捉處理

【Linux】進程信號的捕捉處理

個人主頁~ 進程信號的捕捉處理 一、信號捕捉處理的概述1、信號捕捉處理全過程2、用戶態和內核態的區別&#xff08;一&#xff09;用戶態&#xff08;二&#xff09;內核態&#xff08;三&#xff09;用戶態與內核態的切換&#xff08;四&#xff09;硬件條件 二、再談進程地址…
閱讀更多...
Nyquist內置函數-概述

Nyquist內置函數-概述

1 Nyquist內置函數-概述 本章提供奈奎斯特&#xff08;Nyquist&#xff09;語言參考。操作按功能和抽象級別分類。奈奎斯特在兩個重要級別上實現&#xff1a;“高級”級別支持行為抽象&#xff0c;這意味著像 stretch 和 at 這樣的操作可以應用。這些函數是典型用戶期望使用的…
閱讀更多...
數據驅動防災：AI 大模型在地質災害應急決策中的關鍵作用。基于DeepSeek/ChatGPT的AI智能體開發

數據驅動防災：AI 大模型在地質災害應急決策中的關鍵作用。基于DeepSeek/ChatGPT的AI智能體開發

全球氣候變化加劇了滑坡、泥石流等地質災害的發生頻率與不確定性&#xff0c;傳統基于統計與物理模型的預測方法常受限于?數據稀疏性?與?動態耦合復雜性?。近年來&#xff0c;AI智能體&#xff08;AI Agents&#xff09;與大型語言模型&#xff08;LLMs&#xff09;的突破為…
閱讀更多...
光譜相機在工業中的應用

光譜相機在工業中的應用

光譜相機&#xff08;多光譜、高光譜、超光譜成像技術&#xff09;在工業領域通過捕捉物質的光譜特征&#xff08;反射、透射、輻射等&#xff09;&#xff0c;結合化學計量學與人工智能算法&#xff0c;為工業檢測、質量控制和工藝優化提供高精度、非接觸式的解決方案。以下是…
閱讀更多...
Dify工作流中如何去除deepseek-r1思考內容

Dify工作流中如何去除deepseek-r1思考內容

在工作流中deepseek-r1的think標簽內部的內容&#xff0c;很容易讓工作流其他的llm產生幻覺&#xff0c;導致不能良好的生成目標效果。 我們通過代碼的方式讓deepseek-r1既有think思考鏈的效果&#xff0c;又不傳遞思考鏈。 工作流的邏輯為上圖 去除think中的代碼為 import re…
閱讀更多...
容器的CPU

容器的CPU

1、限制進程的CPU 通過Cgroup來限制進程資源的使用&#xff0c;CPU Cgroup 是 Cgroups 其中的一個 Cgroups 子系統&#xff0c;它是用來限制進程的 CPU 使用的。 cpu.cfs_period_us&#xff0c;它是 CFS 算法的一個調度周期&#xff0c;一般它的值是 100000&#xff0c;以 mic…
閱讀更多...
【系統分析師-第二篇】

【系統分析師-第二篇】

學習目標 通過參加考試&#xff0c;訓練學習能力&#xff0c;而非單純以拿證為目的。 1.在復習過程中&#xff0c;訓練快速閱讀能力、掌握三遍讀書法、運用番茄工作法。 2.從底層邏輯角度理解知識點&#xff0c;避免死記硬背。 3.通過考試驗證學習效果。 學習方法 第二遍快速…
閱讀更多...
【再探圖論】深入理解圖論經典算法

【再探圖論】深入理解圖論經典算法

一、bellman_ford 1. 是什么松弛 在《算法四》中&#xff0c;對松弛的解釋是&#xff1a;relax the edge&#xff0c;看起來比較抽象&#xff0c;不過如果我們從生活中的實例去理解&#xff0c;就簡單多了&#xff1a; 試想一根繩索&#xff0c;當你握著繩索的兩頭使勁用力拉…
閱讀更多...
基于pycharm的YOLOv11模型訓練方法

基于pycharm的YOLOv11模型訓練方法

提示&#xff1a;文章寫完后&#xff0c;目錄可以自動生成&#xff0c;如何生成可參考右邊的幫助文檔 文章目錄 前言一、前期準備1.1 軟件環境配置1.2 訓練集參考 二、訓練步驟2.1 打開文件夾2.2 打開文件2.3 data.yaml最終代碼 三、train.py四、最終結果五、detect.py六、 拓展…
閱讀更多...
用nodejs連接mongodb數據庫對標題和內容的全文本搜索，mogogdb對文檔的全文本索引的設置以及用node-rs/jieba對標題和內容的分詞

用nodejs連接mongodb數據庫對標題和內容的全文本搜索，mogogdb對文檔的全文本索引的設置以及用node-rs/jieba對標題和內容的分詞

//首先我們要在Nodejs中安裝 我們的分詞庫node-rs/jieba,這個分詞不像jieba安裝時會踩非常多的雷&#xff0c;而且一半的機率都是安裝失敗&#xff0c;node-rs/jieba比jieba庫要快20-30%&#xff1b;安裝分詞庫是為了更好達到搜索的效果 這個庫直接npm install node-rs/jieba即…
閱讀更多...
水下聲吶探測儀，應急救援中的高效水下定位技術|深圳鼎躍

水下聲吶探測儀，應急救援中的高效水下定位技術|深圳鼎躍

近年來&#xff0c;隨著水域活動增多及自然災害頻發&#xff0c;水下救援需求日益增長。傳統人工打撈方法在復雜水域中效率低、風險高&#xff0c;尤其在能見度差、水流湍急或深水區域中&#xff0c;救援難度倍增。 在此背景下&#xff0c;水下聲吶探測儀憑借其聲波定位與視頻…
閱讀更多...
最新文章

Copyright @ 2022~2023