当前位置: 首页 > news >正文

深入探索Vue 3组合式API

深入探索Vue 3组合式API

  • 深入探索Vue 3组合式API
    • 一、组合式API诞生背景
      • 1.1 Options API的局限性
      • 1.2 设计目标
      • 二、核心概念解析
        • 2.1 setup() 函数:组合式API的基石
        • 2.2 响应式系统:重新定义数据驱动
        • 2.3 生命周期:全新的接入方式
        • 2.4 响应式原理探秘
        • 2.5 组合式API中的上下文处理
    • 三、核心API深度解析
      • 3.1 响应式工具
      • 3.2 计算属性
      • 3.3 副作用管理
    • 四、逻辑复用模式
      • 4.1 自定义组合函数
      • 4.2 异步状态管理
    • 五、最佳实践
      • 5.1 代码组织模式
      • 5.2 TypeScript集成
    • 六、与Options API对比
      • 6.1 逻辑组织对比

深入探索Vue 3组合式API

一、组合式API诞生背景

1.1 Options API的局限性

  • 代码组织碎片化
  • 逻辑复用困难(mixins缺陷)
  • 类型支持不足

1.2 设计目标

  • 更好的逻辑复用
  • 更灵活的组织方式
  • 更好的类型推导
  • 渐进式采用策略

二、核心概念解析

2.1 setup() 函数:组合式API的基石

(1)函数特性与执行时机

export default {setup(props, context) {// 在beforeCreate之前执行// 无法访问this// 返回对象将暴露给模板和其他选项}
}
  • 执行顺序:在组件实例创建之前同步执行,位于beforeCreatecreated生命周期之间
  • 参数解析
    • props:响应式的props对象,结构会失去响应性
    • context:包含attrs、slots、emit的非响应式对象
  • 返回值
    • 返回对象属性将合并到模板渲染上下文
    • 可返回渲染函数直接控制视图输出

(2)props处理规范

import { defineComponent } from 'vue'interface Props {title: stringcount?: number
}export default defineComponent({props: {title: String,count: {type: Number,default: 0}},setup(props: Props) {// 使用watch监听props变化watch(() => props.count, (newVal) => {console.log('count changed:', newVal)})}
})
  • 类型安全:配合TypeScript实现严格类型校验
  • 不可解构:直接解构props会导致响应性丢失,需使用toRefs
  • 默认值处理:当父组件未传值时自动应用默认值

(3)上下文对象解析

setup(props, { attrs, slots, emit, expose }) {// 访问非响应式属性:console.log(attrs.class)// 检查插槽内容:const hasFooter = slots.footer// 事件触发:emit('submit', payload)// 暴露公共属性:expose({ publicMethod })
}
  • attrs:包含未在props中声明的属性
  • slots:访问通过插槽分发的内容(v-slot语法)
  • emit:替代this.$emit的事件触发方式
  • expose:控制组件实例对外暴露的公共方法

(4)响应式状态管理

const state = reactive({user: {name: 'Alice',posts: []},loading: false
})// 嵌套对象自动响应化
watchEffect(() => {console.log('User name changed:', state.user.name)
})
  • 深层响应性:reactive会递归转换对象属性
  • 数组处理:支持数组索引修改和length变更检测
  • 自动解包:在模板中访问ref无需.value,但JS环境中需要

2.2 响应式系统:重新定义数据驱动

(1)响应式核心原理

const targetMap = new WeakMap()function track(target, key) {// 收集依赖
}function trigger(target, key) {// 通知更新
}const handler = {get(target, key, receiver) {track(target, key)return Reflect.get(...arguments)},set(target, key, value, receiver) {const result = Reflect.set(...arguments)trigger(target, key)return result}
}
  • Proxy代理:基于ES6 Proxy实现属性访问拦截
  • 依赖追踪:通过WeakMap建立目标对象->属性->依赖的映射关系
  • 批量更新:Vue的调度机制确保多次状态变更合并为单次更新

(2)ref的进阶用法

// DOM元素引用
const inputRef = ref<HTMLInputElement | null>(null)// 组件挂载后访问
onMounted(() => {inputRef.value?.focus()
})// 模板引用
<template><input ref="inputRef">
</template>// 复杂类型处理
const state = ref({user: {name: 'Bob'}
})// 自动解包
state.value.user.name = 'Charlie'
  • 模板引用:替代this.$refs的声明方式
  • 类型标注:在TypeScript中明确指定引用类型
  • 对象嵌套:ref可以包裹复杂对象结构

(3)reactive的边界情况

// 响应式丢失场景
const state = reactive({ x: 0 })
let { x } = state // 值拷贝,失去响应性// 正确解构方式
const { x } = toRefs(state)// 数组处理特例
const list = reactive([1, 2, 3])
list = reactive([4,5,6]) // 错误!需要修改现有引用
list.push(4) // 正确方式// 使用readonly保护
const protectedState = readonly(state)
protectedState.x++ // 控制台警告
  • 引用替换限制:必须保持对象引用不变
  • 数组变异方法:push/pop等标准方法可触发更新
  • 只读保护:防止意外修改共享状态

(4)响应式工具函数对比

方法作用典型场景
toRef为源响应式对象属性创建refprops解构时保持响应性
toRefs转换整个响应式对象为普通对象从组合函数返回响应式状态
isProxy检查是否为代理对象调试响应式系统
isReactive检查reactive创建的代理类型判断
isReadonly检查只读代理安全校验
markRaw标记对象永不转为响应式性能优化/集成第三方库
shallowRef创建浅层ref大型对象性能优化
triggerRef手动触发shallowRef更新强制刷新界面

2.3 生命周期:全新的接入方式

(1)完整生命周期映射表

Options APIComposition API触发时机
beforeCreate-被setup替代
created-被setup替代
beforeMountonBeforeMountDOM挂载开始前
mountedonMountedDOM挂载完成后
beforeUpdateonBeforeUpdate响应式数据变更导致更新前
updatedonUpdated虚拟DOM重新渲染后
beforeUnmountonBeforeUnmount组件卸载前(vue2的beforeDestroy别名)
unmountedonUnmounted组件卸载后(vue2的destroyed别名)
errorCapturedonErrorCaptured捕获后代组件错误时
renderTrackedonRenderTracked响应式依赖被追踪时(开发模式)
renderTriggeredonRenderTriggered响应式依赖触发更新时(开发模式)

(2)组合式生命周期示例

import { onMounted,onUpdated,onUnmounted 
} from 'vue'export default {setup() {// 同步调用保证正确注册onMounted(async () => {const data = await fetchData()// 异步操作不会阻塞生命周期})// 支持多次注册相同钩子onMounted(() => console.log('第一个mounted回调'))onMounted(() => console.log('第二个mounted回调'))// 清理副作用示例const timer = ref()onMounted(() => {timer.value = setInterval(() => {/* 定时任务 */}, 1000)})onUnmounted(() => {clearInterval(timer.value)})}
}

(3)生命周期使用原则

  1. 同步注册:必须在setup同步调用生命周期钩子
    // 错误示例
    setTimeout(() => {onMounted(() => {}) // 将不会执行
    }, 100)
    
  2. 执行顺序:按照注册顺序同步执行
  3. 异步操作:钩子函数本身可以包含异步代码,但不会延迟生命周期进度
  4. 组件树顺序:父组件onBeforeMount先于子组件onBeforeMount

(4)调试钩子实践

onRenderTracked((event) => {console.log('依赖追踪:', event)
})onRenderTriggered((event) => {console.log('依赖触发更新:', event)
})
  • 开发模式专用:帮助分析组件渲染行为
  • 事件对象:包含target(响应式对象)、key(触发属性)、type(操作类型)等信息
  • 性能优化:识别不必要的渲染触发源

2.4 响应式原理探秘

(1)依赖收集流程

// 伪代码实现
function reactive(obj) {return new Proxy(obj, {get(target, key) {track(target, key)return Reflect.get(target, key)},set(target, key, value) {const result = Reflect.set(target, key, value)trigger(target, key)return result}})
}// 副作用函数注册
let activeEffect
class ReactiveEffect {constructor(fn) {this.fn = fn}run() {activeEffect = thisreturn this.fn()}
}function watchEffect(fn) {const effect = new ReactiveEffect(fn)effect.run()
}

(2)响应式类型对比

refreactiveshallowRef
创建方式ref(value)reactive(object)shallowRef(value)
访问方式.value直接访问属性.value
嵌套响应自动展开递归响应非递归
类型支持基础类型/对象仅对象任意类型
模板自动解包支持不需要支持
适用场景独立基本值、模板引用复杂对象结构大型对象性能优化

(3)响应式转换规则

const raw = {}
const observed = reactive(raw)console.log(observed === raw) // false
console.log(reactive(observed) === observed) // trueconst refVal = ref(0)
console.log(ref(refVal) === refVal) // true
  • 代理唯一性:对同一原始对象多次调用reactive返回相同代理
  • ref保护机制:如果传入ref给ref构造函数,直接返回原ref
  • 原始对象保护:Vue不会代理Vue实例或代理对象

2.5 组合式API中的上下文处理

(1)跨层级访问示例

// 祖先组件
import { provide } from 'vue'setup() {const theme = ref('dark')provide('theme', theme)
}// 后代组件
import { inject } from 'vue'setup() {const theme = inject('theme', 'light') // 默认值return { theme }
}

(2)模板引用转发

// 子组件
import { defineExpose } from 'vue'setup() {const publicMethod = () => { /* ... */ }defineExpose({ publicMethod })
}// 父组件
const childRef = ref()onMounted(() => {childRef.value.publicMethod()
})

三、核心API深度解析

3.1 响应式工具

// 解构响应式对象
import { reactive, toRefs } from 'vue'const state = reactive({x: 0,y: 0
})const { x, y } = toRefs(state)

3.2 计算属性

const doubleCount = computed(() => count.value * 2)

3.3 副作用管理

// watchEffect自动追踪依赖
const stop = watchEffect(() => {console.log(`count变化: ${count.value}`)
})// 精确控制的watch
watch(count, (newVal, oldVal) => {// 执行特定操作
})

四、逻辑复用模式

4.1 自定义组合函数

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'export function useMouse() {const x = ref(0)const y = ref(0)function update(e) {x.value = e.pageXy.value = e.pageY}onMounted(() => window.addEventListener('mousemove', update))onUnmounted(() => window.removeEventListener('mousemove', update))return { x, y }
}// 组件使用
import { useMouse } from './useMouse'export default {setup() {const { x, y } = useMouse()return { x, y }}
}

4.2 异步状态管理

// useFetch.js
import { ref } from 'vue'export function useFetch(url) {const data = ref(null)const error = ref(null)const loading = ref(false)async function fetchData() {try {loading.value = trueconst response = await fetch(url)data.value = await response.json()} catch (err) {error.value = err} finally {loading.value = false}}return {data,error,loading,fetchData}
}

五、最佳实践

5.1 代码组织模式

export default {setup() {// 数据逻辑const { x, y } = useMouse()// 业务逻辑const { data, fetch } = useFetch('/api')// 其他逻辑const count = useCounter()return { x, y, data, fetch, count }}
}

5.2 TypeScript集成

interface User {id: numbername: string
}const users = ref<User[]>([])

六、与Options API对比

6.1 逻辑组织对比

// Options API
export default {data() {return { count: 0 }},methods: {increment() { this.count++ }},mounted() {console.log('挂载完成')}
}// Composition API
export default {setup() {const count = ref(0)const increment = () => count.value++onMounted(() => console.log('挂载完成'))return { count, increment }}
}

相关文章:

深入探索Vue 3组合式API

深入探索Vue 3组合式API 深入探索Vue 3组合式API一、组合式API诞生背景1.1 Options API的局限性1.2 设计目标二、核心概念解析2.1 setup() 函数&#xff1a;组合式API的基石2.2 响应式系统&#xff1a;重新定义数据驱动2.3 生命周期&#xff1a;全新的接入方式2.4 响应式原理探…...

获取 ARM Cortex - M 系列处理器中 PRIMASK 寄存器的值

第一种实现&#xff08;纯汇编形式&#xff09; __ASM uint32_t __get_PRIMASK(void) {mrs r0, primaskbx lr }代码分析 __ASM 关键字&#xff1a;这通常是特定编译器&#xff08;如 ARM GCC 等&#xff09;用于嵌入汇编代码的指示符。它告诉编译器下面的代码是汇编代码。mrs …...

使用deepseek写一个单击,双击和长按的检测函数

DeepSeek好火&#xff0c;注册试用一下&#xff0c;感觉和chatgpt o1差别不大&#xff0c;唯一的问题就是追多几次就崩溃了&#xff0c;再问不下去了。以下是测试结果。 提问&#xff1a; 请使用c语言写一个函数&#xff0c;输入参数是是为&#xff1a; A为当前的输入量&am…...

MySQL面经

1.范式 第一范式&#xff1a;每一列都不能再拆分 第二范式&#xff1a;在第一范式的基础上&#xff0c;非主键列完全依赖于主键&#xff0c;而不是主键的一部分 第三范式&#xff1a;在第二范式的基础上&#xff0c;非主键列只依赖于主键列&#xff0c;而不依赖于其他非主键…...

【C++】P1765 手机

博客主页&#xff1a; [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 &#x1f4af;前言&#x1f4af;问题描述题目内容示例&#xff1a; 键盘布局 &#x1f4af;我的做法思路问题与优化我的代码实现分析与问题 &#x1f4af;老师的做法思路老师的代码实现分析优点 &#x1f…...

MyBatis-Plus速成指南:简化你的数据库操作流程

简介&#xff1a; MyBatis-Plus 是一个 MyBatis 的增强工具&#xff0c;在 MyBatis 的基础上只做增强不做改变&#xff0c;为简化开发、提高效率而生。MyBatsi-Plus 提供了通用的 Mapper 和 Service&#xff0c;可以不编写任何 SQL 语句的前提下&#xff0c;快速的实现单表的增…...

DeepSeek超越ChatGPT的能力及部分核心原理

DeepSeek超越ChatGPT的能力及部分核心原理 目录 DeepSeek超越ChatGPT的能力及部分核心原理超越ChatGPT的能力核心原理超越ChatGPT的能力 推理计算能力更强:在复杂的数学计算、法律文件审查等任务中,DeepSeek的推理能力可媲美甚至超越部分国际顶尖AI模型,包括ChatGPT。例如在…...

优选算法的灵动之章:双指针专题(一)

个人主页&#xff1a;手握风云 专栏&#xff1a;算法 目录 一、双指针算法思想 二、算法题精讲 2.1. 查找总价格为目标值的两个商品 2.2. 盛最多水的容器 ​编辑 2.3. 移动零 2.4. 有效的三角形个数 一、双指针算法思想 双指针算法主要用于处理数组、链表等线性数据结构…...

作业day4

请实现一个终端的功能&#xff0c;注意需要带有cd功能 typedef struct sockaddr_in addr_in_t; typedef struct sockaddr addr_t; typedef struct sockaddr_un addr_un_t; char *mygets(char* s,int size){char* res fgets(s,size,stdin);int len strlen(s);if(s[len-1] \n)…...

python日志处理logging

python日志处理logging 在项目开发中&#xff0c;日志信息是程序中必不可少的组成部分。每一种语言都有相应的日志模块&#xff0c;如java中log4j&#xff0c;而python中是通过logging模块来提供日志功能。 日志要哪些本质功能&#xff1f; 在分享日志logging模块之前&#…...

开发板目录 /usr/lib/fonts/ 中的字体文件 msyh.ttc 的介绍【微软雅黑(Microsoft YaHei)】

本文是博文 https://blog.csdn.net/wenhao_ir/article/details/145433648 的延伸扩展。 本文是博文 https://blog.csdn.net/wenhao_ir/article/details/145433648 的延伸扩展。 问&#xff1a;运行 ls /usr/lib/fonts/ 发现有一个名叫 msyh.ttc 的字体文件&#xff0c;能介绍…...

浅谈《图解HTTP》

感悟 滑至尾页的那一刻&#xff0c;内心突兀的涌来一阵畅快的感觉。如果说从前对互联网只是懵懵懂懂&#xff0c;但此刻却觉得她是如此清晰而可爱的呈现在哪里。 介绍中说&#xff0c;《图解HTTP》适合作为第一本网络协议书。确实&#xff0c;它就像一座桥梁&#xff0c;连接…...

为什么在网站上复制的图片不能直接粘贴到本地的原因及解决方法

一、图片的来源与格式 ①图片链接:许多网站展示的图片并不是直接嵌入在页面中的,而是通过URL链接到远程服务器上的图片。当你复制网站上的图片时,实际上复制的是图片的URL地址,而不是图片的本地文件。 ②动态加载:有些网站使用JavaScript或其他技术动态加载图片,可能通…...

conda配置channel

你收到 CondaKeyError: channels: value https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main not present in config 错误是因为该镜像源&#xff08;https://mirrors.tuna.tsinghua.edu.cn/anaconda/pkgs/main&#xff09;可能没有被正确添加到 Conda 的配置文件中&…...

Javaweb学习之Mysql(Day5)

(一)Mysql概述 (1)MYSQL通用语法 SQL语句可以单行或多行书写,以分号结尾。 SQL语句可以使用空格/缩进来增强语句的可读性(即,空格和缩进不影响代码的执行)。 MySQL数据库的SQL语句不区分大小写。 注释: 1. 单行注释: -- 注释内容 或 # 注释内容 (MySQL 特有 …...

61.异步编程1 C#例子 WPF例子

和普通的任务绑定不太相同的部分如下&#xff1a; public MainWindowViewModel(){FetchUserInfoCommand new RelayCommand(async (param) > await FetchUserInfoAsync());}private async Task FetchUserInfoAsync(){// 模拟异步操作&#xff0c;比如网络请求await Task.Del…...

自定义数据集 使用scikit-learn中svm的包实现svm分类

引入必要的库 import numpy as np from sklearn.datasets import make_classification from sklearn.model_selection import train_test_split from sklearn.svm import SVC from sklearn.metrics import accuracy_score, classification_report 生成自定义数据集 X, y ma…...

Qt跨屏窗口的一个Bug及解决方案

如果我们希望一个窗口覆盖用户的整个桌面&#xff0c;此时就要考虑用户有多个屏幕的场景&#xff08;此窗口要横跨多个屏幕&#xff09;&#xff0c;由于每个屏幕的分辨率和缩放比例可能是不同的&#xff0c;Qt底层在为此窗口设置缩放比例&#xff08;DevicePixelRatio&#xf…...

Python零基础快速入门课程,自带在线运行环境

Python零基础入门教程 编译器地址: Python在线编译器 课程目录: Python简介 Python是一种简单易学、功能强大的编程语言。它具有高效的数据结构,能够简单有效地实现面向对象编程。 Python的优点: 简单易学,所有人都可以零基础入门开源免费,有丰富的免费学习课程跨平台…...

Java 数据库连接池:HikariCP 与 Druid 的对比

Java 数据库连接池&#xff1a;HikariCP 与 Druid 的对比 数据库连接池&#xff1a;HikariCP 1. 卓越的性能表现 HikariCP 在数据库连接池领域以其卓越的性能脱颖而出。 其字节码经过精心优化&#xff0c;减少了不必要的开销&#xff0c;使得连接获取和释放的速度极快。 在…...

51单片机 04 编程

一、模块化编程 .c文件&#xff1a;函数、变量的定义 .h文件&#xff1a;可被外部调用的函数、变量的声明 函数在调用前必须有定义或者声明。 预编译&#xff1a;以#开头&#xff0c;作用是在真正的编译开始之前&#xff0c;对代码做一些处理&#xff08;预编译&#xff09…...

基于Springboot框架的学术期刊遴选服务-项目演示

项目介绍 本课程演示的是一款 基于Javaweb的水果超市管理系统&#xff0c;主要针对计算机相关专业的正在做毕设的学生与需要项目实战练习的 Java 学习者。 1.包含&#xff1a;项目源码、项目文档、数据库脚本、软件工具等所有资料 2.带你从零开始部署运行本套系统 3.该项目附…...

Vite:现代前端开发的利器

Vite&#xff1a;现代前端开发的利器 随着前端技术的快速发展&#xff0c;开发工具也在不断迭代和优化。Vite 是近年来备受关注的一款前端构建工具&#xff0c;它以极快的冷启动速度和高效的开发体验赢得了开发者的青睐。本文将详细介绍 Vite 的特点、工作原理以及它为何成为现…...

[蓝桥杯 2024 省 B] 好数

[蓝桥杯 2024 省 B] 好数 题目描述 一个整数如果按从低位到高位的顺序&#xff0c;奇数位&#xff08;个位、百位、万位……&#xff09;上的数字是奇数&#xff0c;偶数位&#xff08;十位、千位、十万位……&#xff09;上的数字是偶数&#xff0c;我们就称之为“好数”。 …...

基于Flask的全国星巴克门店可视化分析系统的设计与实现

【FLask】基于Flask的全国星巴克门店可视化分析系统的设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统采用Python作为主要开发语言&#xff0c;结合Flask框架进行后端开发&…...

2502,索界面3

原文 SonicUI,你从未见过的方便GUI引擎-源码 介绍 SonicUI是基于原生GDIAPI的GUI引擎.它提供了几个简单的UI组件来实现高效的UI效果,如自绘按钮,不规则窗口,动画,窗口中的网径和图像操作方法. 主要目的是用最少的代码来达到最佳效果. 背景 周知,UI开发一般重复用无趣.因此…...

基础笔记|splice()的用法

一、三种用法 splice(index, 0, element) 插入 元素&#xff0c;不删除任何元素。splice(index, deleteCount) 删除 deleteCount 个元素。splice(index, deleteCount, element1, element2, ...) 替换 元素&#xff0c;即删除 deleteCount 个元素&#xff0c;同时插入新的元素。…...

电商项目高级篇09-检索服务

电商项目高级篇09-检索服务 1、环境搭建1.1、前端静态文件准备1.2、search服务引入模版引擎1.3、index.html页面复制到templates文件夹下1.4、模仿product项目&#xff0c;引入名称空间1.5、动静分离&#xff0c;静态资源路径位置替换1.6、将1.1的静态资源放到nginx目录下1.7、…...

如何使用 DeepSeek 和 Dexscreener 构建免费的 AI 加密交易机器人?

我使用DeepSeek AI和Dexscreener API构建的一个简单的 AI 加密交易机器人实现了这一目标。在本文中&#xff0c;我将逐步指导您如何构建像我一样的机器人。 DeepSeek 最近发布了R1&#xff0c;这是一种先进的 AI 模型。您可以将其视为 ChatGPT 的免费开源版本&#xff0c;但增加…...

Meta财报解读:营收超预期,用户增长放缓,AI与元宇宙仍是烧钱重点

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…...

2024美团秋招硬件开发笔试真题及答案解析

目录 一、单选题 1、C语言中变量有一系列的命名规则,下列选项中,属于错误的C语言变量命名规则的是() 2、以下 C 代码的运行结果是什么() 3、执行下面程序,正确的输出是() 4、以下不正确的定义语句是() 5、执行语句for (i = 2; i++ < 7;);后, i 的值变为()…...

利用Vue编写一个“计数器”

目录 一、利用Vue编写一个“计数器”的操作方法&#xff1a;二、html文件相关源代码三、CSS文件相关源代码四、代码执行效果展示如下 一、利用Vue编写一个“计数器”的操作方法&#xff1a; 1、data中定义计数器的相关数据&#xff0c;如num、min、max。 2、methods中添加计数…...

vscode搭建git

vscode搭建git 一、安装git二、vscode上搭建git(1) 先创建本地仓库再上传到远程仓库&#xff0c;远程仓库名是根据本地仓库名一致(2) 先创建远程仓库&#xff0c;再将本地仓库上传到指定远程仓库 一、安装git 网络教程很多&#xff0c;在此就不赘述了 参考&#xff1a;git安装…...

Dijkstra算法解析

Dijkstra算法&#xff0c;用于求解图中从一个起点到其他所有节点的最短路径。解决单源最短路径问题的有效方法。 条件 有向 带权路径 时间复杂度 O&#xff08;n平方&#xff09; 方法步骤 1 把图上的点分为两个集合 要求的起点 和除了起点之外的点 。能直达的写上权值 不…...

本地部署DeepSeek教程(Mac版本)

第一步、下载 Ollama 官网地址&#xff1a;Ollama 点击 Download 下载 我这里是 macOS 环境 以 macOS 环境为主 下载完成后是一个压缩包&#xff0c;双击解压之后移到应用程序&#xff1a; 打开后会提示你到命令行中运行一下命令&#xff0c;附上截图&#xff1a; 若遇…...

蓝桥杯算法笔记|差分学习

&#xff01;前情回顾 前缀和18437蓝桥账户中心 练习代码&#xff1a; #include <iostream> using namespace std; int main() {// 请在此输入您的代码int n,q;cin>>n>>q;int a[n];for(int i0;i<n;i){cin>>a[i];}int sum[n];sum[0]a[0];for(int …...

一文速览DeepSeek-R1的本地部署——可联网、可实现本地知识库问答:包括671B满血版和各个蒸馏版的部署

前言 自从deepseek R1发布之后「详见《一文速览DeepSeek R1&#xff1a;如何通过纯RL训练大模型的推理能力以比肩甚至超越OpenAI o1(含Kimi K1.5的解读)》」&#xff0c;deepseek便爆火 爆火以后便应了“人红是非多”那句话&#xff0c;不但遭受各种大规模攻击&#xff0c;即便…...

【Redis】主从模式,哨兵,集群

主从复制 单点问题&#xff1a; 在分布式系统中&#xff0c;如果某个服务器程序&#xff0c;只有一个节点&#xff08;也就是一个物理服务器&#xff09;来部署这个服务器程序的话&#xff0c;那么可能会出现以下问题&#xff1a; 1.可用性问题&#xff1a;如果这个机器挂了…...

结构体排序 C++ 蓝桥杯

成绩排序 #include<iostream> #include<algorithm> using namespace std; struct stu {string name;//名字int grade;//成绩 }; stu a[30]; bool cmp(stu l, stu r) {if (l.grade ! r.grade) return l.grade > r.grade;return l.name < r.name; } int main()…...

【通俗易懂说模型】线性回归(附深度学习、机器学习发展史)

&#x1f308; 个人主页&#xff1a;十二月的猫-CSDN博客 &#x1f525; 系列专栏&#xff1a; &#x1f3c0;深度学习_十二月的猫的博客-CSDN博客 &#x1f4aa;&#x1f3fb; 十二月的寒冬阻挡不了春天的脚步&#xff0c;十二点的黑夜遮蔽不住黎明的曙光 目录 1. 前言 2. …...

Haproxy+keepalived高可用集群,haproxy宕机的解决方案

Haproxykeepalived高可用集群&#xff0c;允许keepalived宕机&#xff0c;允许后端真实服务器宕机&#xff0c;但是不允许haproxy宕机&#xff0c; 所以下面就是解决方案 keepalived配置高可用检测脚本 &#xff0c;master和backup都要添加 配置脚本 # vim /etc/keepalived…...

python学opencv|读取图像(五十六)使用cv2.GaussianBlur()函数实现图像像素高斯滤波处理

【1】引言 前序学习了均值滤波和中值滤波&#xff0c;对图像的滤波处理有了基础认知&#xff0c;相关文章链接为&#xff1a; python学opencv|读取图像&#xff08;五十四&#xff09;使用cv2.blur()函数实现图像像素均值处理-CSDN博客 python学opencv|读取图像&#xff08;…...

电梯系统的UML文档13

5.2.6 CarPositionControl 的状态图 图 24: CarPositionControl 的状态图 5.2.7 Dispatcher 的状态图 图 25: Dispatcher 的状态图 5.3 填补从需求到状态图鸿沟的实用方法 状态图能对类的行为&#xff0c;一个用例&#xff0c;或系统整体建模。在本文中&#xff0c;状态图…...

CSDN原力值提升秘籍:解锁社区活跃新姿势

在 CSDN 这个技术交流的大舞台上&#xff0c;原力值不仅是个人活跃度的象征&#xff0c;更是开启更多权益与福利的钥匙。最近&#xff0c;我出于自身需求&#xff0c;一头扎进了提升原力值的研究中&#xff0c;经过多方探索与资料整理&#xff0c;现在就迫不及待地把这些干货分…...

互联网行业常用12个数据分析指标和八大模型

本文目录 前言 一、互联网线上业务数据分析的12个指标 1. 用户数据&#xff08;4个&#xff09; (1) 存量&#xff08;DAU/MAU&#xff09; (2) 新增用户 (3) 健康程度&#xff08;留存率&#xff09; (4) 渠道来源 2. 用户行为数据&#xff08;4个&#xff09; (1) 次数/频率…...

gltf工具

gltf 在线工具 ONLINE 3D VIEWER 3dviewer.netgltf-viewer cos.3dzhanting.cnviewer www.niushifu.topglTF Viewer gltf-viewer.donmccurdy.comGLTF 在线编辑器 gltf.nsdt.cloudgltfeditor...

车载软件架构 --- 基于AUTOSAR软件架构的ECU开发流程小白篇

我是穿拖鞋的汉子&#xff0c;魔都中坚持长期主义的汽车电子工程师。 老规矩&#xff0c;分享一段喜欢的文字&#xff0c;避免自己成为高知识低文化的工程师&#xff1a; 简单&#xff0c;单纯&#xff0c;喜欢独处&#xff0c;独来独往&#xff0c;不易合同频过着接地气的生活…...

Vue.js 如何选择合适的组件库

Vue.js 如何选择合适的组件库 大家在开发 Vue.js 项目的时候&#xff0c;都会面临一个问题&#xff1a;我该选择哪个组件库&#xff1f; 市面上有很多优秀的 Vue 组件库&#xff0c;比如 Element Plus、Vuetify、Quasar 等&#xff0c;它们各有特点。选择合适的组件库&#xf…...

JavaScript系列(58)--性能监控系统详解

JavaScript性能监控系统详解 &#x1f4ca; 今天&#xff0c;让我们深入探讨JavaScript的性能监控系统。性能监控对于保证应用的稳定性和用户体验至关重要。 性能监控基础概念 &#x1f31f; &#x1f4a1; 小知识&#xff1a;JavaScript性能监控是指通过收集和分析各种性能指…...

Flutter 与 React 前端框架对比:深入分析与实战示例

Flutter 与 React 前端框架对比&#xff1a;深入分析与实战示例 在现代前端开发中&#xff0c;Flutter 和 React 是两个非常流行的框架。Flutter 是 Google 推出的跨平台开发框架&#xff0c;支持从一个代码库生成 iOS、Android、Web 和桌面应用&#xff1b;React 则是 Facebo…...