前端笔记-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.mzph.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