vue学习笔记7
打包发布
目标:明确打包的作用
说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了 => 脚手架不参与上线
打包的作用:
将多个文件压缩合并成一个文件,语法降级,less sass ts 语法解析
打包命令

打包后,可以生成,浏览器能够直接运行的网页 => 就是需要上线的源码!
命令:yarn build
结果:在项目的根目录会自动创建一个文件夹`dist`, dist中的文件就是打包后的文件,只需要放到服务器中即可。
配置:默认情况下,需要放到服务器根目录打开,如果希望双击运行,需要配置publicPath 配成相对路径
打包优化:路由懒加载
目标:配置路由懒加载,实现打包优化
说明:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
步骤1: 异步组件改造

步骤2: 路由中应用

Vue3的优势

Vue2 选项式 API vs Vue3 组合式API

需求:点击按钮,让数字 +1

高级软件
setup选项的写法和执行时机
高级软件人才培训专家

<script setup> 语法糖
原始复杂写法

语法糖写法


reactive()
作用:接受对象类型数据的参数传入并返回一个响应式的对象
核心步骤
1. 从 vue 包中导入 reactive 函数
2. 在 <script setup> 中执行 reactive 函数并传入类型为对象的初始值,并使用变量接收返回值

ref()
作用:接收简单类型或者对象类型的数据传入并返回一个响应式的对象
核心步骤:
1. 从 vue 包中导入 ref 函数
2. 在 <script setup> 中执行 ref 函数并传入初始值,使用变量接收 ref 函数的返回值

computed计算属性函数
计算属性基本思想和Vue2的完全一致,组合式API下的计算属性只是修改了写法
核心步骤:1. 导入computed函数
2. 执行函数 在回调参数中return基于响应式数据做计算的值,用变量接收

watch函数
作用: 侦听一个或者多个数据的变化,数据变化时执行回调函数
俩个额外参数:1. immediate(立即执行) 2. deep(深度侦听)
基础使用 - 侦听单个数据
1. 导入watch函数
2. 执行watch函数传入要侦听的响应式数据(ref对象)和回调函数


immediate
说明:在侦听器创建时立即触发回调, 响应式数据变化之后继续执行回调

deep
默认机制:通过watch监听的ref对象默认是浅层侦听的,直接修改嵌套的对象属性不会触发回调执行,需要开启deep选项

Vue3的生命周期API (选项式 VS 组合式)

生命周期函数基本使用
1. 导入生命周期函数
2. 执行生命周期函数 传入回调

执行多次
生命周期函数是可以执行多次的,多次执行时传入的回调会在时机成熟时依次执行

组合式API下的父传子
基本思想
1. 父组件中给子组件绑定属性
2. 子组件内部通过props选项接收

defineProps 原理:就是编译阶段的一个标识,实际编译器解析时,遇到后会进行编译转换

defineExpose()
默认情况下在<script setup>语法糖下组件内部的属性和方法是不开放给父组件访问的,
可以通过defineExpose编译宏指定哪些属性和方法允许访问

Vue3.3新特性-defineOptions
在 Vue 3.3 中新引入了 defineOptions 宏。顾名思义,主要是用来定义 Options API 的选项。可以用
defineOptions 定义任意的选项, props, emits, expose, slots 除外(因为这些可以使用 defineXXX 来做到)

Vue3 中的 v-model 和 defineModel
在Vue3中,自定义组件上使用v-model, 相当于传递一个modelValue属性,同时触发 update:modelValue 事件
我们需要先定义 props,再定义 emits 。其中有许多重复的代码。如果需要修改此值,还需要手动调用 emit 函数。


相关文章:
vue学习笔记7
打包发布 目标:明确打包的作用 说明:vue脚手架只是开发过程中,协助开发的工具,当真正开发完了 > 脚手架不参与上线 打包的作用: 将多个文件压缩合并成一个文件,语法降级,less sass ts 语法…...
Unity 增量打包AssetBundle
背景 打包太慢了,想要没改动的资源不重新打包浪费时间。 来源 官方文章:https://forum.unity.com/threads/about-incremental-build-and-asset-bundle-hashes.1436032/ 官网AB介绍:https://learn.unity.com/tutorial/assets-resources-and…...
嵌入式八股文面试题(二)C语言算法
相关概念请查看文章:C语言概念。 1. 如何实现一个简单的内存池? 简单实现: #include <stdio.h> #include <stdlib.h>//内存块 typedef struct MemoryBlock {void *data; // 内存块起始地址struct MemoryBlock *next; // 下一个内…...
尚硅谷爬虫note005
一、编解码 1.get请求的quote方法 将汉字转为Unicode字符 # _*_ coding : utf-8 _*_ # Time : 2025/2/12 16:33 # Author : 20250206-里奥 # File : demo19_get请求的quote方法 # Project : PythonProject10-14# 景甜page # https://www.baidu.com/s?ieutf-8&f8&rsv…...
xml 和json互转工具
工具1 有个问题会导致springboot返回捕获的异常编程xml格式 import com.fasterxml.jackson.databind.ObjectMapper; import com.fasterxml.jackson.dataformat.xml.XmlMapper; import org.json.JSONObject; import org.json.XML; import org.w3c.dom.Document;import javax.xm…...
ElementUI 抽屉组件高度封装
在前端开发中,ElementUI 的el-drawer组件虽实用,但为满足复杂业务需求,如统一样式、特定交互和灵活使用,常需二次封装。下面将带你实现一个高度封装的 ElementUI 抽屉组件。 创建基础封装组件 创建MyDrawer.vue,引入e…...
深入解析:如何在C#和C/C++之间安全高效地通过P/Invoke传递多维数组
在工业控制、机器人编程和物联网等领域,我们经常需要让C#这样的托管语言与C/C编写的底层库进行交互。在这个过程中,遇到需要传递多维数组的场景时,许多开发者会意外遭遇System.Runtime.InteropServices.MarshalDirectiveException异常。本文将…...
轻量级在线ETL数据集成工具架构设计与技术实现深度剖析
在当今数字化时代,企业面临着海量异构数据的整合挑战。ETL(Extract, Transform, Load)工具作为数据集成的核心,负责将分散在不同数据源中的数据进行抽取、转换和加载,以构建统一的数据视图。本文将深入剖析一款基于诺依框架开发的在线ETL数据集成工具,重点阐述其架构设计…...
二、k8s项目的生命周期
项目的生命周期 创建-----------》发布-----------》更新--------》回滚----------》删除 kubectl create deployment nginx1 --imagenginx:1.22 --replicas3 基于deployment控制器创建pod 控制器的名称是nginx1 pod使用的镜像:nginx:1.22 --replicas3 pod的数量有多少 3个…...
GPT 系列模型发展史:从 GPT 到 ChatGPT 的演进与技术细节
从 GPT 到 ChatGPT,OpenAI 用短短几年时间,彻底改变了自然语言处理(NLP)的格局。让我们一起回顾这段激动人心的技术演进史!🚀 🔹 GPT(2018): 划时代的起点&a…...
C#语言的云计算
C#语言在云计算中的应用 引言 随着信息技术的飞速发展,云计算已经成为了现代计算架构的重要组成部分。传统的本地计算方式逐渐被云计算所取代,使得企业与开发者能够更高效地处理数据、部署应用程序以及进行资源管理。在众多编程语言中,C#以…...
金仓数据库-KingbaseES-学习-01-单机部署(非图形化安装)
目录 一、环境信息 二、介绍 三、下载地址 四、安装步骤 1、配置内核参数 (1)文件系统相关 (2)共享内存与信号量(IPC) (3)网络与端口配置 (4)关键场…...
海外服务器都有什么作用?
海外服务器具体就是指部署在中国大陆以外地区的服务器,企业选择租用海外服务器能够显著提高不同国家和地区用户的访问速度,当网站的服务器部署在目标用户所在地附近时,数据信息所传输的距离就会缩短,大大降低了网络访问的延迟度&a…...
git bash在github的库中上传或更新本地文件
一、将本地文件上传到 GitHub 仓库 1. 创建 GitHub 仓库 如果你还没有在 GitHub 上创建仓库,首先需要创建一个新的仓库: 登录到 GitHub。点击右上角的 按钮,选择 New repository。给你的仓库起个名字,并选择 Public 或 Privat…...
vue2中 computed 计算属性
文章目录 vue2中 computed 计算属性1. 什么是计算属性?2. 基本用法1. 定义计算属性2. 计算属性的缓存特性 3. 计算属性的高级用法1. 计算属性的 Getter 和 Setter 方法2. 计算属性的依赖追踪 4. 计算属性与方法的区别5. 实际应用案例1. 格式化数据2. 计算总价3. 动态…...
自定义基座实时采集uniapp日志
自定义基座实时采集uniapp日志 打测试包给远端现场(测试/客户)实际测试时也能实时看到日志了,也有代码行数显示。 流程设计 #mermaid-svg-1I5W9r1DU4xUsaTF {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid…...
基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真
目录 1.课题概述 2.系统仿真结果 3.核心程序与模型 4.系统原理简介 4.1 系统建模 4.2 YALMIP工具箱 4.3 CPLEX工具箱 5.完整工程文件 1.课题概述 基于YALMIP和cplex工具箱的微电网最优调度算法matlab仿真。通过YALMIP和cplex这两个工具箱,完成微电网的最优调…...
Effective Objective-C 2.0 读书笔记——内存管理(上)
Effective Objective-C 2.0 读书笔记——内存管理(上) 文章目录 Effective Objective-C 2.0 读书笔记——内存管理(上)引用计数属性存取方法中的内存管理autorelease保留环 ARCARC必须遵循的方法命名原则ARC 的自动优化࿱…...
蓝桥杯-洛谷刷题-day5(C++)(为未完成)
1.P1328 [NOIP2014 提高组] 生活大爆炸版石头剪刀布 i.题目 ii.代码 #include <iostream> #include <string> using namespace std;int N, Na, Nb; //0-"剪刀", 1-"石头", 2-"布", 3-"蜥", 4-"斯"࿱…...
conda 修复 libstdc++.so.6: version `GLIBCXX_3.4.30‘ not found 简便方法
ImportError: /data/home/hum/anaconda3/envs/ipc/bin/../lib/libstdc.so.6: version GLIBCXX_3.4.30 not found (required by /home/hum/anaconda3/envs/ipc/lib/python3.11/site-packages/paddle/base/libpaddle.so) 1. 检查版本 strings /data/home/hum/anaconda3/envs/ipc/…...
浅谈 React Hooks
React Hooks 是 React 16.8 引入的一组 API,用于在函数组件中使用 state 和其他 React 特性(例如生命周期方法、context 等)。Hooks 通过简洁的函数接口,解决了状态与 UI 的高度解耦,通过函数式编程范式实现更灵活 Rea…...
华为云AI开发平台ModelArts
华为云ModelArts:重塑AI开发流程的“智能引擎”与“创新加速器”! 在人工智能浪潮席卷全球的2025年,企业拥抱AI的意愿空前高涨,但技术门槛高、流程复杂、资源投入巨大的现实,却让许多创新构想止步于实验室。数据科学家…...
超短脉冲激光自聚焦效应
前言与目录 强激光引起自聚焦效应机理 超短脉冲激光在脆性材料内部加工时引起的自聚焦效应,这是一种非线性光学现象,主要涉及光学克尔效应和材料的非线性光学特性。 自聚焦效应可以产生局部的强光场,对材料产生非线性响应,可能…...
椭圆曲线密码学(ECC)
一、ECC算法概述 椭圆曲线密码学(Elliptic Curve Cryptography)是基于椭圆曲线数学理论的公钥密码系统,由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA,ECC在相同安全强度下密钥更短(256位ECC ≈ 3072位RSA…...
Admin.Net中的消息通信SignalR解释
定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...
ESP32读取DHT11温湿度数据
芯片:ESP32 环境:Arduino 一、安装DHT11传感器库 红框的库,别安装错了 二、代码 注意,DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...
【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力
引言: 在人工智能快速发展的浪潮中,快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型(LLM)。该模型代表着该领域的重大突破,通过独特方式融合思考与非思考…...
OkHttp 中实现断点续传 demo
在 OkHttp 中实现断点续传主要通过以下步骤完成,核心是利用 HTTP 协议的 Range 请求头指定下载范围: 实现原理 Range 请求头:向服务器请求文件的特定字节范围(如 Range: bytes1024-) 本地文件记录:保存已…...
视频字幕质量评估的大规模细粒度基准
大家读完觉得有帮助记得关注和点赞!!! 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用,因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型(VLMs)在字幕生成方面…...
从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)
设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile,新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...
