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

VUE3-01

1.选项式和组合式

        选项式API:按照作用组织代码

        组合式API:按照功能组织代码

2.<script setup>

<template><div class="about"><h1>{{name}}</h1><button @click="sayHello">测试</button></div>
</template><script setup lang="ts">
const name: string = "天亮教育"function sayHello() {alert("hello")
}
</script>

        2.1 VUE3默认的数据是非响应式的

                响应式:数据变化后,界面会刷新

                非响应式:数据变化后,界面不会刷新

        2.2 VUE3提供了api,可以把非响应式数据转成响应式

                ref-----针对基础数据类型,可以操作基础数据类型,也可以操作引用数据类型,但读写

        数据时需要加 ‘.value’

                        写法:const xxx = ref(initValue) 

                                 js中操作数据: xxx.value

                                 模板中操作数据:不需要.value

                        原理:响应式依靠Object.defineProperty()getset完成

const data={name:"张三"
}
const dataProxy={name:"张三"
}
Object.defineProperty(data,'name',{get(){console.log("获取name")return dataProxy.name},set(value){dataProxy.name=valueconsole.log("劫持到设置name属性")}
})
data.name="王五"

                reactive-----针对引用数据类型,只能操作引用数据类型,不加 ‘.value’

                        语法:const 代理对象= reactive(源对象)接收一个对象(或数组),返回一个

                代理对象(Proxy的实例对象,简称proxy对象)

                         原理:内部基于 ES6 的 Proxy 实现,通过代理对象操作源对象内部数据进行操作

const data1={name:"张三",
}
const dataProxy1=new Proxy(data1,{get(target,prop):any{console.log("劫持到了代理获取属性"+<string>prop)return target[prop]},set(target,p,newValue):boolean{console.log("劫持到了设置属性"+<string>p)target[p]=newValuereturn true},deleteProperty(target:{name:string},p:string|symbol):boolean{console.log("劫持属性删除")delete target[p]return true}
})console.log(dataProxy1.name)
dataProxy1.name="王五"
delete dataProxy1.name

3.vue中手动触发界面刷新

        3.1当修改数据,界面没有响应式刷新的时候可以用 

                this.$forceUpdate() 

         3.2 nextTick() 可以在状态改变后立即使用,它接受一个回调函数作为参数,该回调函数会在 DOM 更新周期结束时执行。nextTick() 方法可以将异步操作推迟到下一个 DOM 更新周期中执行,从而确保了在数据改变之后正确地获取到更新后的 DOM。

        在vue3中,nextTick()是一个Promise对象,因此我们也可以使用 await 返回的 Promise。

相关文章:

VUE3-01

1.选项式和组合式 选项式API&#xff1a;按照作用组织代码 组合式API&#xff1a;按照功能组织代码 2.<script setup> <template><div class"about"><h1>{{name}}</h1><button click"sayHello">测试</button>…...

分库分表之基于Shardingjdbc+docker+mysql主从架构实现读写分离(二)

说明&#xff1a;如果实现了docker部署mysql并完成主从复制的话再继续&#xff0c;本篇文章主要说明springboot配置实现Shardingjdbc进行读写分离操作。 如果没实现docker部署mysql实现主从架构的话点击我 Shardingjdbc配置介绍&#xff08;版本&#xff1a;5.3.2&#xff09;…...

Python 进阶(四):日期和时间(time、datetime、calendar 模块)

❤️ 博客主页&#xff1a;水滴技术 &#x1f338; 订阅专栏&#xff1a;Python 入门核心技术 &#x1f680; 支持水滴&#xff1a;点赞&#x1f44d; 收藏⭐ 留言&#x1f4ac; 文章目录 1. time模块1.1 获取当前时间1.2 时间休眠1.3 格式化时间 2. datetime模块2.1 获取当前…...

Transformer背景介绍

目录 Transformer的诞生Transformer的优势Transformer的市场 Transformer的诞生 论文地址 Transformer的优势 Transformer的市场...

深入理解BeanDefinition和Spring Beans

深入理解BeanDefinition和Spring Beans 引言 在Spring框架中&#xff0c;BeanDefinition和Spring Beans是非常重要的概念。BeanDefinition定义了Spring Bean的元数据&#xff0c;而Spring Beans是应用程序中的对象实例。理解BeanDefinition和Spring Beans的概念和使用方法对于…...

实验六 调度器-实验部分

目录 一、知识点 1.进程调度器设计的目标 1.1.进程的生命周期 1.2.用户进程创建与内核进程创建 1.3.进程调度器的设计目标 2.ucore 调度器框架 2.1.调度初始化 2.2.调度过程 2.2.1.调度整体流程 2.2.2.设计考虑要点 2.2.3.数据结构 2.2.4.调度框架应与调度算法无关…...

基于飞桨paddle波士顿房价预测练习模型测试代码

基于飞桨paddle波士顿房价预测练习模型测试代码 导入基础库 #paddle&#xff1a;飞桨的主库&#xff0c;paddle 根目录下保留了常用API的别名&#xff0c;当前包括&#xff1a;paddle.tensor、paddle.framework、paddle.device目录下的所有API&#xff1b; import paddle #Lin…...

只会“点点点”,凭什么让开发看的起你?

众所周知&#xff0c;如今无论是大厂还是中小厂&#xff0c;自动化测试基本是标配了&#xff0c;毕竟像双 11、618 这种活动中庞大繁杂的系统&#xff0c;以及多端发布、多版本、机型发布等需求&#xff0c;但只会“写一些自动化脚本”很难胜任。这一点在招聘要求中就能看出来。…...

35.图片幻灯片

图片幻灯片 html部分 <div class"carousel"><div class"image-container"><img src"./static/20180529205331_yhGyf.jpeg" alt"" srcset""><img src"./static/20190214214253_hsjqw.webp"…...

CentOS7系统Nvidia Docker容器基于TensorFlow2.12测试GPU

CentOS7系统Nvidia Docker容器基于TensorFlow1.15测试GPU 参考我的另一篇博客 1. 安装NVIDIA-Docker的Tensorflow2.12.0版本 1. 版本依赖对应关系&#xff1a;从源代码构建 | TensorFlow GPU 版本Python 版本编译器构建工具cuDNNCUDAtensorflow-2.6.03.6-3.9GCC 7.3.1Ba…...

Go 下载安装教程

1. 下载地址&#xff1a;The Go Programming Language (google.cn) 2. 下载安装包 3. 安装 &#xff08;1&#xff09;下一步 &#xff08;2&#xff09;同意 &#xff08;3&#xff09;修改安装路径&#xff0c;如果不修改&#xff0c;直接下一步 更改后&#xff0c;点击下一…...

InnoDB数据存储结构

一. InnoDB的数据存储结构&#xff1a;页 索引是在存储引擎中实现的&#xff0c;MySQL服务器上的存储引擎负责对表中数据的读取和写入工作。不同存储引擎中存放的格式一般不同的&#xff0c;甚至有的存储引擎比如Memory都不用磁盘来存储数据&#xff0c;这里讲讲InooDB存储引擎…...

基于ts的浏览器缓存工具封装(含源码)

cache.ts缓存工具 浏览器缓存工具封装实现使用方法示例代码 浏览器缓存工具封装 在前端开发中&#xff0c;经常会遇到需要缓存数据的情况&#xff0c;例如保存用户的登录状态、缓存部分页面数据等 但有时候需要缓存一些复杂的对象&#xff0c;例如用户信息对象、设置配置等。…...

GIT涵盖工作中用的相关指令

git安装一直默认点击下去&#xff0c;安装完成&#xff0c;右键会看见gitBash git --version 查看git安装的版本 使用git前配置git git config --global user.name 提交人姓名 git config --global user.email 提交人邮箱 git config --list 查看git配置信息 使用git中配置…...

【如何训练一个中英翻译模型】LSTM机器翻译seq2seq字符编码(一)

系列文章 【如何训练一个中英翻译模型】LSTM机器翻译seq2seq字符编码&#xff08;一&#xff09; 【如何训练一个中英翻译模型】LSTM机器翻译模型训练与保存&#xff08;二&#xff09; 【如何训练一个中英翻译模型】LSTM机器翻译模型部署&#xff08;三&#xff09; 【如何训…...

[JAVAee]文件操作-IO

本文章讲述了通过java对文件进行IO操作 IO:input/output,输入/输出. 建议配合文章末尾实例食用 目录 文件 文件的管理 文件的路径 文件的分类 文件系统的操作 File类的构造方法 File的常用方法 文件内容的读写 FileInputStream读取文件 构造方法 常用方法 Scan…...

【数据集】3小时尺度降水数据集-MSWEPV2

1 MSWEP V2 precipitation product 官网-MSWEP V2降水产品 参考...

Springboot之把外部依赖包纳入Spring容器管理的两种方式

前言 在Spring boot项目中&#xff0c;凡是标记有Component、Controller、Service、Configuration、Bean等注解的类&#xff0c;Spring boot都会在容器启动的时候&#xff0c;自动创建bean并纳入到Spring容器中进行管理&#xff0c;这样就可以使用Autowired等注解&#xff0c;…...

更安全,更省心丨DolphinDB 数据库权限管理系统使用指南

在数据库产品使用过程中&#xff0c;为保证数据不被窃取、不遭破坏&#xff0c;我们需要通过用户权限来限制用户对数据库、数据表、视图等功能的操作范围&#xff0c;以保证数据库安全性。为此&#xff0c;DolphinDB 提供了具备以下主要功能的权限管理系统&#xff1a; 提供用户…...

WPS本地镜像化在线文档操作以及样例

一个客户项目有引进在线文档操作需求&#xff0c;让我这边做一个demo调研下&#xff0c;给我的对接文档里有相关方法的说明&#xff0c;照着对接即可。但在真正对接过程中还是踩过不少坑&#xff0c;这儿对之前的对接工作做个记录。 按照习惯先来一个效果&#xff1a; Demo下载…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

DAY 47

三、通道注意力 3.1 通道注意力的定义 # 新增&#xff1a;通道注意力模块&#xff08;SE模块&#xff09; class ChannelAttention(nn.Module):"""通道注意力模块(Squeeze-and-Excitation)"""def __init__(self, in_channels, reduction_rat…...

MMaDA: Multimodal Large Diffusion Language Models

CODE &#xff1a; https://github.com/Gen-Verse/MMaDA Abstract 我们介绍了一种新型的多模态扩散基础模型MMaDA&#xff0c;它被设计用于在文本推理、多模态理解和文本到图像生成等不同领域实现卓越的性能。该方法的特点是三个关键创新:(i) MMaDA采用统一的扩散架构&#xf…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

Spring是如何解决Bean的循环依赖:三级缓存机制

1、什么是 Bean 的循环依赖 在 Spring框架中,Bean 的循环依赖是指多个 Bean 之间‌互相持有对方引用‌,形成闭环依赖关系的现象。 多个 Bean 的依赖关系构成环形链路,例如: 双向依赖:Bean A 依赖 Bean B,同时 Bean B 也依赖 Bean A(A↔B)。链条循环: Bean A → Bean…...