前端筆記-Vue3（上）

學習參考視頻：尚硅谷Vue3入門到實戰，最新版vue3+TypeScript前端開發教程_嗶哩嗶哩_bilibili

vue3學習目標：

VUE 31、Vue3架構與設計理念
2、組合式API（Composition API）
3、常用API：ref、reactive、watch、computed
4、Vue3的生命周期
5、組件間通信（props、emit、defineModel）
6、了解插槽

Vue3簡介

1. 核心特性

  • ?組合式 API (Composition API)??：替代Vue 2的選項式API，提供更靈活的代碼組織方式
  • ?性能提升?：比Vue 2快2倍，包體積小41%
  • ?更好的TypeScript支持?：完整的類型定義
  • ?新的響應式系統?：基于Proxy實現，性能更好
  • ?Fragment/Teleport/Suspense?：新增內置組件

2. 主要改進

特性Vue 2Vue 3
響應式系統Object.definePropertyProxy
代碼組織選項式API組合式API
虛擬DOM全量對比靜態標記+動態對比
打包體積完整版23kb最小10kb

創建Vue 3項目

具體可以查看一下官方文檔：快速上手 | Vue.js

1. 通過Vite創建（推薦）

基于vite構建（類似于webpack，比webpack還快），對TS，JSX，CSS支持開箱即用。

npm create vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

2. 通過Vue CLI創建

npm install -g @vue/cli
vue create my-vue-app
# 選擇Vue 3預設
cd my-vue-app
npm run serve

Vue 3生命周期對比

Vue 2選項Vue 3組合式API說明
beforeCreatesetup()組件初始化前
createdsetup()組件初始化后
beforeMountonBeforeMountDOM掛載前
mountedonMountedDOM掛載后
beforeUpdateonBeforeUpdate數據更新前
updatedonUpdated數據更新后
beforeUnmountonBeforeUnmount組件卸載前
unmountedonUnmounted組件卸載后

組合式API

特性選項式 API (Options API)組合式 API (Composition API)
?代碼組織方式?按選項類型分組按邏輯功能組織
?復用機制?Mixins/作用域插槽組合式函數
?響應式系統?自動響應式顯式聲明響應式
?this 使用?需要不需要
?TypeScript 支持?有限優秀
?學習曲線?平緩較陡
?適用場景?簡單組件/新手友好復雜組件/大型項目

1. 代碼組織方式

?選項式 API?：

export default {data() {return {count: 0,searchQuery: ''}},computed: {doubleCount() {return this.count * 2}},methods: {increment() {this.count++}},mounted() {console.log('組件已掛載')}
}

?組合式 API?：?

需要注意的是setup中的this是undefined

import { ref, computed, onMounted } from 'vue'export default {setup() {const count = ref(0)const searchQuery = ref('')const doubleCount = computed(() => count.value * 2)function increment() {count.value++}onMounted(() => {console.log('組件已掛載')})return {count,searchQuery,doubleCount,increment}}
}

2. 邏輯復用實現

略

3. 響應式系統差異

?選項式 API?：

  • 自動將?data()?返回的對象轉為響應式
  • 計算屬性和方法自動綁定?this?上下文

?組合式 API?：

  • 需要顯式使用?ref()?或?reactive()?創建響應式數據
  • 需要手動暴露給模板使用的變量和方法

同樣的例子使用vue2語法寫過之后無法在vue3里面實現響應式變化（還有后續）?

<template><div class="student"><h2>學生姓名：{{studentName}}</h2><h2>學生年齡：{{studentAge}}</h2><h2>數學成績：{{mathScore}}</h2><button @click="updateName">修改姓名</button><button @click="increaseAge">增加年齡</button><button @click="improveScore">提高成績</button></div>
</template><script>
export default {name: 'Student',setup() {// 普通變量（非響應式）let studentName = '李四'let studentAge = 16let mathScore = 85// 方法function updateName() {studentName = 'Li Si' // 修改不會反映到視圖中console.log('姓名已改為:', studentName)}function increaseAge() {studentAge++ // 修改不會反映到視圖中console.log('年齡已增加至:', studentAge)}function improveScore() {mathScore += 5 // 修改不會反映到視圖中console.log('數學成績已提高至:', mathScore)}// 返回這些變量和方法return {studentName,studentAge,mathScore,updateName,increaseAge,improveScore}}
}
</script><style scoped>
.student {background-color: #f5f5f5;padding: 20px;margin: 20px;border-radius: 8px;
}
button {margin: 0 10px;padding: 5px 10px;
}
</style>

4. 生命周期對應關系

選項式 API組合式 API
beforeCreatesetup()
createdsetup()
beforeMountonBeforeMount
mountedonMounted
beforeUpdateon

5.setup 的返回值

  • 若返回一個對象：則對象中的：屬性、方法等，在模板中均可以直接使用
  • 若返回一個函數：則可以自定義渲染內容，代碼如下：（因為沒有this）
setup(){return ()=> 'Hello World'
}

6. setup與Options API 的關系

  • Vue2?的配置（data、methos......）中可以訪問到?setup中的屬性、方法。
  • 但在setup中不能訪問到Vue2的配置（data、methos......）。
  • 如果與Vue2沖突，則setup優先。

7.setup 語法糖

使用setup語法糖，可以使我們使用vue3編寫腳本時更加方便：

<template><div class="student"><h2>學生姓名：{{studentName}}</h2><h2>學生年齡：{{studentAge}}</h2><h2>數學成績：{{mathScore}}</h2><button @click="updateName">修改姓名</button><button @click="increaseAge">增加年齡</button><button @click="improveScore">提高成績</button></div>
</template><script setup>
// 普通變量（非響應式）
let studentName = '李四'
let studentAge = 16
let mathScore = 85// 方法
function updateName() {studentName = 'Li Si' // 修改不會反映到視圖中console.log('姓名已改為:', studentName)
}function increaseAge() {studentAge++ // 修改不會反映到視圖中console.log('年齡已增加至:', studentAge)
}function improveScore() {mathScore += 5 // 修改不會反映到視圖中console.log('數學成績已提高至:', mathScore)
}
</script><style scoped>
.student {background-color: #f5f5f5;padding: 20px;margin: 20px;border-radius: 8px;
}
button {margin: 0 10px;padding: 5px 10px;
}
</style>

我們現在只需要寫數據和方法即可，

這時候<script setup>和export default{}不能再共用，但是可以同時存在兩個script(一個是用來配置名字，一個是關鍵配置文件)

當然還可以再簡單一點，

?上述代碼，還需要編寫一個不寫setup的script標簽，去指定組件名字，比較麻煩，我們可以借助vite中的插件簡化

  1. 第一步：npm i vite-plugin-vue-setup-extend -D
  2. 第二步：vite.config.ts
import { defineConfig } from 'vite'
import VueSetupExtend from 'vite-plugin-vue-setup-extend'export default defineConfig({plugins: [ VueSetupExtend() ]
})
  1. 第三步：<script setup lang="ts" name="Person">

ref 創建：基本類型的響應式數據

要使數據呈現響應式變化，可以引入ref創建響應式數據

關鍵區別對比

特性非響應式版本響應式版本 (setup語法糖)
?語法?傳統 setup 函數<script setup>?語法糖
?響應式?? 數據變化不更新視圖?? 數據變化自動更新視圖
?變量聲明?普通變量 (let)ref()?響應式引用
?數據訪問?直接訪問 (studentName)通過?.value?訪問 (studentName.value)
?代碼簡潔度?需要顯式 return自動暴露頂層綁定，無需 return
?TypeScript支持?有限更好的類型推斷
?組件選項?可以混合使用其他選項純組合式API風格

還是之前的例子，我們加入ref實現響應式基本類型的響應式變化

<template><div class="student"><h2>學生姓名：{{studentName}}</h2><h2>學生年齡：{{studentAge}}</h2><h2>數學成績：{{mathScore}}</h2><button @click="updateName">修改姓名</button><button @click="increaseAge">增加年齡</button><button @click="improveScore">提高成績</button></div>
</template><script setup>
import { ref } from 'vue'// 響應式變量
const studentName = ref('李四')
const studentAge = ref(16)
const mathScore = ref(85)// 方法
function updateName() {studentName.value = 'Li Si' // 修改會實時反映到視圖console.log('姓名已改為:', studentName.value)
}function increaseAge() {studentAge.value++ // 修改會實時反映到視圖console.log('年齡已增加至:', studentAge.value)
}function improveScore() {mathScore.value += 5 // 修改會實時反映到視圖console.log('數學成績已提高至:', mathScore.value)
}
</script><style scoped>
.student {background-color: #f5f5f5;padding: 20px;margin: 20px;border-radius: 8px;
}
button {margin: 0 10px;padding: 5px 10px;
}
</style>

?點擊按鈕，數據變化成功。

在這個背后，ref 通過?.value?屬性實現響應式追蹤：

  • 創建時：ref(16)?→?{ value: 16?}
  • 修改時：檢測?.value?變化觸發更新
  • 模板中：自動解包?.value

另外， 基本類型優先使用ref，對于對象類型我們還可以選擇reactive。

?reactive 創建：對象類型的響應式數據

當你把一個普通 JavaScript 對象傳入?reactive()，它會返回該對象的響應式代理。

  • 專為對象/數組設計
  • ?深度響應式?（嵌套對象也是響應式的）
  • 修改屬性時自動觸發視圖更新?
  • 比?ref?更適合處理復雜對象結構

使用reactive的組合式API版本

<template><div class="user-card"><h2>{{ user.name }}</h2><p>年齡: {{ user.age }}</p><p>城市: {{ user.address.city }}</p><button @click="growOlder">長大一歲</button><button @click="moveCity">搬到上海</button></div>
</template><script setup>
import { reactive } from 'vue'// 響應式對象
const user = reactive({name: '張三',age: 25,address: {city: '北京'}
})function growOlder() {user.age++ // 自動更新視圖
}function moveCity() {user.address.city = '上海' // 自動更新視圖（深度響應式）
}
</script>

reactive深度響應式特性

顧名思義，不管數據藏得有多深，只要用reative包裹起來，就會實現響應式的改變。

<template><div class="cart"><h2>購物車 ({{ cart.items.length }}件)</h2><ul><li v-for="(item, index) in cart.items" :key="index">{{ item.name }} - ￥{{ item.price }}<button @click="removeItem(index)">刪除</button></li></ul><p>總價: ￥{{ cart.total }}</p><button @click="addRandomItem">添加隨機商品</button></div>
</template><script setup>
import { reactive, computed } from 'vue'// 購物車狀態
const cart = reactive({items: [{ name: '商品1', price: 100 },{ name: '商品2', price: 200 }],// 計算屬性get total() {return this.items.reduce((sum, item) => sum + item.price, 0)}
})// 添加商品
function addRandomItem() {const randomId = Math.floor(Math.random() * 1000)cart.items.push({name: `商品${randomId}`,price: Math.floor(Math.random() * 500)})
}// 刪除商品
function removeItem(index) {cart.items.splice(index, 1)
}
</script>

同樣，ref也能處理對象數據類型的響應式變化

<template><div class="cart"><h2>購物車 ({{ cart.items.length }}件)</h2><ul><li v-for="(item, index) in cart.items" :key="index">{{ item.name }} - ￥{{ item.price }}<button @click="removeItem(index)">刪除</button></li></ul><p>總價: ￥{{ total }}</p><button @click="addRandomItem">添加隨機商品</button></div>
</template><script setup>
import { ref, computed } from 'vue'// 使用 ref 創建購物車狀態
const cart = ref({items: [{ name: '商品1', price: 100 },{ name: '商品2', price: 200 }]
})// 計算總價（使用獨立的計算屬性）
const total = computed(() => {return cart.value.items.reduce((sum, item) => sum + item.price, 0)
})// 添加商品
function addRandomItem() {const randomId = Math.floor(Math.random() * 1000)cart.value.items.push({name: `商品${randomId}`,price: Math.floor(Math.random() * 500)})
}// 刪除商品
function removeItem(index) {cart.value.items.splice(index, 1)
}
</script>

ref?與?reactive?關鍵對比

特性reactive?實現ref?實現
?創建方式?const cart = reactive({...})const cart = ref({...})
?數據訪問?直接訪問屬性：cart.items需要通過?.value?訪問：cart.value.items
?計算屬性?可以定義在對象內部作為 getter需要單獨定義計算屬性
?模板使用?直接使用對象屬性：{{ cart.total }}直接使用 ref 對象（自動解包）：{{ cart.items }}
?修改數據?直接修改屬性：cart.items.push()需要通過?.value?修改：cart.value.items.push()
?類型支持?對復雜對象類型推斷更友好對基本類型更友好，對象類型需要額外處理
?適用場景?適合管理復雜的、嵌套的對象狀態適合管理單個值或需要替換整個對象的情況

關鍵差異詳解

1. 數據訪問方式不同
// 創建
const cart = reactive({ items: [...] })// 訪問
cart.items.push(item) // 直接訪問

?ref：?

// 創建
const cart = ref({ items: [...] })// 訪問
cart.value.items.push(item) // 需要通過 .value
2. 計算屬性的處理

?reactive?可以在對象內部定義：?

const cart = reactive({items: [...],get total() {return this.items.reduce(...)}
})

?ref?需要單獨定義：?

const cart = ref({ items: [...] })
const total = computed(() => cart.value.items.reduce(...))
3. 模板中的使用差異

雖然模板中都可以直接使用，但原理不同：

  • reactive?對象的屬性直接暴露
  • ref?在模板中會自動解包，不需要寫?.value

4. 整體替換的區別

?reactive?的限制：?

const state = reactive({ count: 0 })
state = { count: 1 } // ? 會失去響應式

?ref?的優勢：?

const state = ref({ count: 0 })
state.value = { count: 1 } // ? 可以整體替換

這里擴展一下，在settings里面找到Extension（擴展）里面可以設置自動帶上.value

?

更新reactive不可以整體改變，可以借助assign，但是ref可以直接在function里面更新（當然要帶上value）。

補充：ToRef和ToRefs

直接解構 vs?toRefs?解構對比?

?1. 直接解構（失去響應式）?

let { name, gender } = person

?特點?：

  • ?失去響應式?：解構出來的?name?和?gender?是普通變量，?不再是響應式數據。
  • ?修改無效?：即使修改?name?或?gender，?不會觸發 Vue 的更新機制，界面不會自動刷新。
  • ?不影響原對象?：修改解構后的變量不會影響??person?的原始數據。

?示例?：

let { name, gender } = person
name = "李四"  // 修改無效，不會更新界面，也不會影響 person.name
console.log(person.name) // 仍然是 "張三"
?2.?toRefs?解構（保持響應式）?
let { name, gender } = toRefs(person)

?特點?：

  • ?保持響應式?：解構出來的?name?和?gender?是?ref?對象，?仍然是響應式數據。
  • ?修改有效?：修改?name.value?或?gender.value，?會觸發 Vue 的更新機制，界面會自動刷新。
  • ?雙向綁定?：修改解構后的變量會影響??person?的原始數據，反之亦然。

?示例?：

let { name, gender } = toRefs(person)
name.value = "李四"  // 修改有效，界面會更新，person.name 也會變成 "李四"
console.log(person.name) // "李四"

?對比總結?

?特性??直接解構?let {name} = person?toRefs?解構?let {name} = toRefs(person)?
?響應式?? 失去響應式? 保持響應式
?修改方式?name = "新值"（普通賦值）name.value = "新值"（ref?語法）
?是否影響原對象? 不影響? 雙向綁定，影響原對象
?適用場景?僅需讀取數據，不修改需要修改數據并保持響應式

toRefs?的使用

  1. ?批量解構響應式屬性

    let {name, gender} = toRefs(person)
    • 從?reactive?對象?person?中批量解構出?name?和?gender?屬性
    • 解構后的變量仍然保持響應式
    • 每個解構出來的屬性都是一個?ref?對象，需要通過?.value?訪問/修改

  2. ?使用場景?

    • 當需要從?reactive?對象中解構多個屬性時
    • 保持解構后的變量仍然是響應式的

toRef?的使用

  1. ?單個屬性解構

    let age = toRef(person, 'age')
    • 從?reactive?對象?person?中單獨解構出?age?屬性
    • 解構后的變量仍然保持響應式
    • 需要通過?.value?訪問/修改

  2. ?使用場景?

    • 當只需要從?reactive?對象中解構單個屬性時
    • 比?toRefs?更精確地控制要解構的屬性

重要注意事項

  1. ?value?訪問

    name.value += '~'  // 正確
name += '~'        // 錯誤，會失去響應式

  2. ?與直接解構的區別

    // 錯誤方式 - 會失去響應式
let {name} = person// 正確方式 - 保持響應式
let {name} = toRefs(person)

  3. ?模板中使用?

    • 在模板中可以直接使用，不需要?.value
    <h2>姓名：{{name}}</h2>  <!-- 正確，自動解包 -->

  4. ?修改原始對象?

    • 通過?toRef/toRefs?解構的屬性和原對象屬性是雙向綁定的
    • 修改解構后的變量會影響原對象，反之亦然

總結對比

函數作用適用場景
toRef為 reactive 對象的單個屬性創建 ref只需要解構單個屬性時
toRefs為 reactive 對象的所有屬性創建 ref需要解構多個或所有屬性時

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/76691.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/76691.shtml
英文地址，請注明出處：http://en.pswp.cn/web/76691.shtml

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

相關文章

如何增加 Elasticsearch 中的 primary shard 數量

如何增加 Elasticsearch 中的 primary shard 數量

作者&#xff1a;來自 Elastic Kofi Bartlett 探索增加 Elasticsearch 中 primary shard 數量的方法。 更多閱讀&#xff1a; Elasticsearch&#xff1a;Split index API - 把一個大的索引分拆成更多分片 Elasticsearch&#xff1a;通過 shrink API 減少 shard 數量來縮小 El…
閱讀更多...
基于SA模擬退火算法的車間調度優化matlab仿真,輸出甘特圖和優化收斂曲線

基于SA模擬退火算法的車間調度優化matlab仿真,輸出甘特圖和優化收斂曲線

目錄 1.程序功能描述 2.測試軟件版本以及運行結果展示 3.核心程序 4.本算法原理 5.完整程序 1.程序功能描述 基于SA模擬退火算法的車間調度優化matlab仿真,輸出甘特圖和優化收斂曲線。輸出指標包括最小平均流動時間&#xff0c;最大完工時間&#xff0c;最小間隙時間。 2…
閱讀更多...
Spring_MVC 快速入門指南

Spring_MVC 快速入門指南

Spring_MVC 快速入門指南 一、Spring_MVC 簡介 1. 什么是 Spring_MVC&#xff1f; Spring_MVC 是 Spring 框架的一個模塊&#xff0c;用于構建 Web 應用程序。它基于 MVC&#xff08;Model-View-Controller&#xff09;設計模式&#xff0c;將應用程序分為模型&#xff08;M…
閱讀更多...
爬蟲獲取sku信息需要哪些庫

爬蟲獲取sku信息需要哪些庫

在使用 Python 爬蟲獲取淘寶商品的 SKU 詳細信息時&#xff0c;通常需要以下幾種庫來完成任務。這些庫各有其用途&#xff0c;可以幫助你更高效地實現爬蟲功能。 1. requests 用途&#xff1a;用于發送 HTTP 請求&#xff0c;獲取網頁內容。 安裝&#xff1a; bash pip insta…
閱讀更多...
賽靈思Xilinx FPGa XCKU15P?2FFVA1156I AMD Kintex UltraScale+

賽靈思Xilinx FPGa XCKU15P?2FFVA1156I AMD Kintex UltraScale+

XCKU15P?2FFVA1156I 是 AMD Kintex UltraScale 系列中的高性能 FPGA&#xff0c;基于 16 nm FinFET UltraScale 架構 制造&#xff0c;兼顧卓越的性能與功耗比&#xff0c;該器件集成 1,143,450 個邏輯單元和 82,329,600 位片上 RAM&#xff0c;配備 1,968 個 DSP 切片&#…
閱讀更多...
從規則到大模型：知識圖譜信息抽取實體NER與關系RE任務近10年演進發展詳解

從規則到大模型：知識圖譜信息抽取實體NER與關系RE任務近10年演進發展詳解

摘要： 本文回顧了關系抽取與實體抽取領域的經典與新興模型，清晰地梳理了它們的出現時間與核心創新，并給出在 2025 年不同資源與場景下的最佳實踐推薦。文章引用了 BiLSTM?CRF、BiLSTM?CNN?CRF、SpanBERT、LUKE、KnowBERT、CasRel、REBEL、UIE，大模型抽取 等模型的原始論…
閱讀更多...
基于Django實現農業生產可視化系統

基于Django實現農業生產可視化系統

基于Django實現農業生產可視化系統 項目截圖 登錄 注冊 首頁 農業數據-某一指標表格展示 農業數據-某一指標柱狀圖展示 農業數據-某一指標餅狀圖展示 氣候數據-平均氣溫地圖展示 氣候數據-降水量合并圖展示 后臺管理 一、系統簡介 農業生產可視化系統是一款基于DjangoMVTMyS…
閱讀更多...
【無人機】無人機的電調校準，ESC Calibration，PX4使用手冊電調校準詳細步驟

【無人機】無人機的電調校準，ESC Calibration，PX4使用手冊電調校準詳細步驟

目錄 1、前提 條件? 2、詳細步驟? 3、故障 排除? 無人機的電調校準&#xff0c;ESC Calibration&#xff0c;PX4使用手冊電調校準詳細步驟 參考&#xff1a;ESC 校準 |PX4 指南 &#xff08;v1.15&#xff09; ?信息 這些說明僅與 PWM ESC 和 OneShot ESC 相關。DShot…
閱讀更多...
區塊鏈預言機（Oracle）詳解：如何打通鏈上與現實世界的關鍵橋梁？

區塊鏈預言機（Oracle）詳解：如何打通鏈上與現實世界的關鍵橋梁？

文章目錄 一、什么是區塊鏈預言機&#xff1f;1.1 區塊鏈的封閉性問題1.2 預言機的定義與作用舉個例子&#xff1a; 1.3 為什么預言機是 Web3 的關鍵基礎設施&#xff1f; 二、預言機的基本分類與工作模式2.1 輸入型與輸出型預言機&#xff08;1&#xff09;輸入型預言機&#…
閱讀更多...
工具：下載vscode .vsix擴展文件及安裝的方法

工具：下載vscode .vsix擴展文件及安裝的方法

1 背景 vscode的使用環境無法連接互聯網訪問Extensions for Visual Studio family of products | Visual Studio Marketplace&#xff0c;導致無法直接在vscode里面下載并安裝所需擴展 所以需要先在有網的環境下載插件文件&#xff0c;然后在沒網的環境安裝插件 2 下載方式 …
閱讀更多...
Oracle 23ai Vector Search 系列之6 向量相似性搜索（Similarity Search）

Oracle 23ai Vector Search 系列之6 向量相似性搜索（Similarity Search）

文章目錄 Oracle 23ai Vector Search 系列之6 向量相似性搜索&#xff08;Similarity Search&#xff09;向量相似性搜索&#xff08;Similarity Search&#xff09;概述向量距離度量歐式距離&#xff08;Euclidean Distances&#xff09;歐式平方距離&#xff08;Euclidean Sq…
閱讀更多...
NLP與社區檢測算法的結合：文本中的社區發現

NLP與社區檢測算法的結合：文本中的社區發現

NLP與社區檢測算法的結合&#xff1a;文本中的社區發現 在自然語言處理&#xff08;NLP&#xff09;領域&#xff0c;社區檢測算法被廣泛應用于從大規模文本數據中識別出具有相似主題或興趣的不同群體。這種結合不僅能夠幫助我們理解文本內容的結構&#xff0c;還能揭示隱藏在…
閱讀更多...
解鎖古籍中的氣候密碼，探索GPT/BERT在歷史災害研究中的前沿應用；氣候史 文本挖掘 防災減災；臺風案例、干旱案例、暴雨案例

解鎖古籍中的氣候密碼，探索GPT/BERT在歷史災害研究中的前沿應用；氣候史 文本挖掘 防災減災；臺風案例、干旱案例、暴雨案例

歷史災害文獻分析方法論的研究&#xff0c;是連接過去與未來的關鍵橋梁。通過對古籍、方志、檔案等非結構化文本的系統性挖掘與量化分析&#xff0c;不僅能夠重建千年尺度的災害事件序列&#xff08;如臺風、洪旱等&#xff09;&#xff0c;彌補儀器觀測數據的時空局限性&#…
閱讀更多...
超級桌面 TV 版下載：安卓電視版官方正版與刷機固件深度剖析

超級桌面 TV 版下載：安卓電視版官方正版與刷機固件深度剖析

在智能電視領域&#xff0c;一款出色的桌面應用能極大提升用戶的使用體驗。超級桌面 TV 版作為備受矚目的選擇&#xff0c;以其獨特的功能和優勢脫穎而出。今天&#xff0c;我們就來深入探討安卓電視版官方正版超級桌面 TV 版的下載方法&#xff0c;以及刷機固件的奧秘&#xf…
閱讀更多...
金融圖QCPFinancial

金融圖QCPFinancial

QCPFinancial 是 QCustomPlot 中用于繪制金融圖表&#xff08;如蠟燭圖/K線圖&#xff09;的核心類。以下是其關鍵特性的詳細說明&#xff1a; 一、主要屬性 屬性類型說明dataQSharedPointer<QCPFinancialDataContainer>存儲金融數據的數據容器chartStyleQCPFinancial:…
閱讀更多...
Linux學習筆記|入門指令

Linux學習筆記|入門指令

man 指令 用法&#xff1a;man [指令名稱] &#xff0c;用于查看指定指令的幫助手冊&#xff0c;獲取指令的詳細語法、選項及使用示例等信息 。示例&#xff1a;想了解 ls 指令的用法&#xff0c;執行 man ls &#xff0c;會進入 man 手冊頁面展示 ls 相關信息。按 q 鍵可退出。…
閱讀更多...
PD分離：優化大語言模型推理效率

PD分離：優化大語言模型推理效率

PD分離&#xff1a;優化大語言模型推理效率 在大語言模型的推理過程中&#xff0c;Prefill 和 Decode 是兩個關鍵階段。隨著模型規模的不斷擴大&#xff0c;如何高效地處理這兩個階段的計算任務&#xff0c;成為了一個亟待解決的問題。 一、什么是 Prefill 和 Decode&#xf…
閱讀更多...
【MATLAB例程】AOA定位、AOA與TOA混合定位，二維環境下的對比，基站（錨點數量）自適應調整，附代碼下載鏈接

【MATLAB例程】AOA定位、AOA與TOA混合定位，二維環境下的對比，基站（錨點數量）自適應調整，附代碼下載鏈接

該代碼實現了一個 A O A AOA AOA&#xff08;到達角&#xff09;與 T O A TOA TOA&#xff08;到達時間&#xff09;混合定位的例程&#xff0c;適用于二維平面&#xff0c;并支持自適應基站數量。訂閱專欄后可直接獲取完整的源代碼&#xff0c;粘貼到MATLAB空腳本中即可運行 文…
閱讀更多...
uCOS3實時操作系統（系統架構和中斷管理）

uCOS3實時操作系統（系統架構和中斷管理）

文章目錄 系統架構中斷管理ARM中斷寄存器相關知識ucos中斷機制 系統架構 ucos主要包含三個部分的源碼&#xff1a; 1、OS核心源碼及其配置文件&#xff08;ucos源碼&#xff09; 2、LIB庫文件源碼及其配置文件&#xff08;庫文件&#xff0c;比如字符處理、內存管理&#xff0…
閱讀更多...
前端api（請求后端）簡易template

前端api（請求后端）簡易template

微信小程序 API 模塊模板 基本 API 模塊結構 /*** 示例API模塊*/ const api require(../api); const config require(../../config/index);// 示例API對象 const exampleApi {// API方法定義... };// 導出模塊 module.exports exampleApi;標準 RESTful 請求方法 獲取列表…
閱讀更多...
最新文章

Copyright @ 2022~2023