Vue3学习日记(day4)

响应式状态(Vue3)

methods

对于DOM的更新详解

防抖函数

少量,单组件

多组件

计算属性

可写计算属性


我们继续来对后续的文档进行探究。


响应式状态(Vue3)

响应式状态在vue3进行了修改。

在选项式API中仍然为在data中声明属性,并可以使用this调用此实例。

接下来我们举一个例子,以便于更好理解异同;

(reactive函数:创建一个代理对象)

这是一个点击增加内部数字的按钮。

下例,在vue3中正常更新视图。

const originalState = { count: 0 };
const state = reactive(originalState);
state.count++;

下例,在vue3中无法正常更新视图,在vue2中正常更新视图。

const originalState = { count: 0 };
const state = reactive(originalState);
originalState.count++; 

原因:

Vue 3 使用 Proxy 来实现响应式,当我们使用 reactive 函数将一个对象转换为响应式时,实际上 Vue 在内部创建了一个代理对象来包装这个原始对象。虽然你仍然使用 state.count++ 这样的语法来访问和修改数据,但你实际上操作的已经不是原始对象本身,而是 Vue 创建的代理对象。    

Vue 2 使用了一种称为“脏检查”(dirty checking)的策略的变体,结合了属性的 getter 和 setter,来追踪数据变化。具体来说,Vue 2 使用了 Object.defineProperty 方法来遍历每个对象属性,为它们添加 getter 和 setter,以此来监控数据的变化。在 Vue 2 中,你可以直接操作原始对象,而 Vue 通常能够检测到这些变化并更新视图。

总结:或许看着很烦,你只需要记住在vue3中,请不要在你定义的data实例之外操作属性,如有必要,请使用reactive函数让其被代理,避免响应式失效。


methods

在选项式API中方法请不要使用箭头函数,因为Vue 自动为 methods 中的方法绑定了永远指向组件实例的 this

eg:

export default {data() {return {count: 0}},methods: {increment() {this.count++}},mounted() {// 在其他方法或是生命周期中也可以调用方法this.increment()}
}
export default {methods: {increment: () => {// 反例:无法访问此处的 `this`!}}
}

对于DOM的更新详解

在 Vue 中,当你的响应式数据发生变化时,Vue 并不会立即更新 DOM(文档对象模型),而是将这些变化放入一个队列中,并在下一个事件循环(也就是所谓的“next tick”)中进行批量处理。这样做的目的是提高效率,避免频繁的 DOM 操作导致性能下降。

(nextTick:这是 Vue 提供的一个全局函数,它会延迟执行你传入的回调函数,直到 DOM 更新完成。)

eg:

export default {data() {return {count: 0};},methods: {increment: function() {this.count++;console.log('数据已更新');// 这里尝试获取更新后的元素,但 DOM 可能还没有更新const element = document.querySelector('#my-element');console.log(element.textContent); // 这里的值可能是旧的// 使用 $nextTick 来确保 DOM 更新完成后再执行代码this.$nextTick(() => {const updatedElement = document.querySelector('#my-element');console.log(updatedElement.textContent); // 这里的值应该是更新后的});}},mounted() {// 如果需要在组件挂载后执行某些操作,可以在这里写}
};

防抖函数

防抖函数:减少函数在短时间内被连续调用的次数,从而优化性能。而是为了防止在高频触发事件(如窗口调整大小、滚动或快速连续点击)时,某个函数被不必要的频繁执行。例如,在用户输入搜索框时,你可能不希望每次键盘敲击都发送一次网络请求,这时就可以使用防抖来限制请求的频率。

少量,单组件

import { debounce } from 'lodash-es'export default {methods: {// 使用 Lodash 的防抖函数click: debounce(function () {// ... 对点击的响应 ...}, 500)}
}

多组件

(如果多个组件实例都共享这同一个预置防抖的函数,那么它们之间将会互相影响):

export default {created() {// 每个实例都有了自己的预置防抖的处理函数this.debouncedClick = _.debounce(this.click, 500)},unmounted() {// 最好是在组件卸载时// 清除掉防抖计时器this.debouncedClick.cancel()},methods: {click() {// ... 对点击的响应 ...}}
}

计算属性

下面的例子是根据 author 是否已有一些书籍来展示不同的信息。

此例,正常运行,但模板过于复杂。

<p>Has published books:</p>
<span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
export default {data() {return {author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}}
}

使用计算属性:

export default {data() {return {author: {name: 'John Doe',books: ['Vue 2 - Advanced Guide','Vue 3 - Basic Guide','Vue 4 - The Mystery']}}},computed: {// 一个计算属性的 getterpublishedBooksMessage() {// `this` 指向当前组件实例return this.author.books.length > 0 ? 'Yes' : 'No'}}
}

【笔记:(在computed中如果只需要getter,则不需要声明,自动为getter;如果需要同时定义gettersetter,那么计算属性就需要被定义为一个对象,包含getset两个方法

 computed: {uppercaseInput: {get() {return this.inputValue.toUpperCase();},set(newValue) {this.inputValue = newValue.toUpperCase();}}

)】

优势:更加简便可见,逻辑更加清晰。

同样,我们使用方法也可以实现对应的逻辑功能,计算属性对于方法来说的优势在于,计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。这意味着只要 author.books 不改变,无论多少次访问 publishedBooksMessage 都会立即返回先前的计算结果,而不用重复执行 getter 函数。如果是方法,且例子为更大的list集合,当数字无论是否发生变化都会一直执行getter函数。

可写计算属性

1:计算属性默认只读。

2:getter 的职责应该仅为计算和返回该值。不要改变其他状态、在 getter 中做异步请求或者更改 DOM。

3:避免直接修改计算属性值(只读)

4:如果需要可写计算数学,使用setget来更改。

eg:

this.fullName = 'Jane Smith';

fullName的setter将被触发,firstName将被设置为'Jane'lastName将被设置为'Smith'。因此,即使你修改的是fullName,实际上你是在修改firstNamelastName

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/29720.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ClickHouse 高性能的列式数据库管理系统

ClickHouse是一个高性能的列式数据库管理系统&#xff08;DBMS&#xff09;&#xff0c;主要用于在线分析处理查询&#xff08;OLAP&#xff09;。以下是对ClickHouse的详细介绍&#xff1a; 基本信息&#xff1a; 来源&#xff1a;由俄罗斯的Yandex公司于2016年开源。全称&…

Ubuntu18.04操作系统使用pip3安装open cv

在Ubuntu18.04操作系统环境下使用pip3安装opencv。安装方法如下&#xff1a; #pip3安装 sudo apt-get install python3-pip # 依赖包安装 sudo apt-get install libsm6 libxrender1 libxext6 #opencv安装;版本号自行填写 pip3 install opencv-python4.1.1.26 具体步骤 1、确认…

成都晨持绪科技:2024年抖音网店做起来难吗

随着抖音平台的日益火爆&#xff0c;越来越多的商家和个人开始关注并尝试开设自己的抖音网店。然而&#xff0c;面对激烈的市场竞争和不断变化的平台规则&#xff0c;许多人都在问&#xff1a;2024年抖音网店做起来难吗? 要回答这个问题&#xff0c;我们首先需要了解抖音网店的…

C# 判定字符串是否为数字的方法

方法一、使用decimal的TryParse方法 该方法只有当字符串是数字的时候&#xff0c;才能将字符串转换为数字并且返回结果true&#xff0c;否则将字符串转换为0并且返回结果false。 此方法特别适用于字符串不是数字&#xff0c;防止转换过程中出现异常的情况&#xff0c;如果字符…

【机器学习】第3章 K-近邻算法

一、概念 1.K-近邻算法&#xff1a;也叫KNN 分类 算法&#xff0c;其中的N是 邻近邻居NearestNeighbor的首字母。 &#xff08;1&#xff09;其中K是特征值&#xff0c;就是选择离某个预测的值&#xff08;例如预测的是苹果&#xff0c;就找个苹果&#xff09;最近的几个值&am…

代码随想录算法训练营第四十一天 | 01背包理论基础、416. 分割等和子集

01背包理论基础 题目链接&#xff1a;https://kamacoder.com/problempage.php?pid1046 文档讲解&#xff1a;01背包理论基础&#xff08;一&#xff09;、01背包理论基础&#xff08;二&#xff09; 视频讲解&#xff1a;01背包理论基础&#xff08;一&#xff09;、01背包理论…

Javaweb07-JavaBean技术和Jsp开发模式

JavaBean技术和Jsp开发模式 一.JavaBean技术 1.JavaBean的基本概念 **JavaBean组件&#xff1a;**与html分离且使用Java代码封装类 **JavaBean分类&#xff1a;**可视化JavaBean&#xff1a;swing 非可视化JavaBean&#xff1a;用于封装实体和业务逻辑 JavaBean特点&#x…

把Vue文件转至树莓派上遇到的问题和解决方案

把整个文件夹复制进树莓派后&#xff0c;运行 npm run dev ,报错sh: 1: vite: Permission denied 解决方案&#xff1a;删除项目里的 node_modules 重新 npm install 再运行即可 rm -rf node_modules/ npm install 在安装过程中&#xff0c;遇到下图问题&#xff0c;vulnerabi…

【热门开源项目推荐】满足不同程序员的需求与关注点

目录 前言一、热门开源项目介绍二、使用开源热门项目的优势&#xff08;一&#xff09;经济方面&#xff08;二&#xff09;技术方面&#xff08;三&#xff09;社区支持及协作方面 三、程序员选择项目模型建议&#xff08;一&#xff09;关键步骤&#xff08;二&#xff09;示…

掌握rpc、grpc并探究内在本质

文章目录 rpc是什么&#xff1f;又如何实现服务通信&#xff1f;理解rpcRPC的通信过程通信协议的选择小结RPC VS Restful net_rpc实践案例net/rpc包介绍创建服务端创建client 看看net_rpc的通信调度实现的内部原理明确目标基于自己实现的角度分析我会怎么做代码分析 grpc介绍与…

使用微信小程序制作画布

在这个技术飞速发展的时代&#xff0c;微信小程序已经成为了人们生活中不可或缺的一部分。它们可以为用户提供各种各样的功能和娱乐&#xff0c;其中之一就是制作画布。在本文中&#xff0c;我们将介绍如何使用微信小程序创建一个简单的画布应用&#xff0c;并为你展示如何实现…

c++实现二叉搜索树(下)

好久不见啊&#xff0c;baby们&#xff0c;小吉我又回归了&#xff0c;发完这一篇小吉将会有两周时间不会更新blog了&#xff08;sorry&#xff09;&#xff0c;在小吉没有发blog的日子里大家也要好好学习数据结构与算法哦&#xff0c;还有就是别忘了小吉我❤️  这篇博客是二…

充电学习—7、BC1.2 PD协议

BC1.2&#xff08;battery charging&#xff09;充电端口识别机制&#xff1a; SDP、CDP、DCP 1、VBUS detect&#xff1a;vbus检测 PD&#xff08;portable device&#xff0c;便携式设备&#xff09;中有个检测VBUS是否有效的电路&#xff0c;电路有个参考值&#xff0c;高…

NumPy 双曲函数与集合操作详解

NumPy 双曲函数 NumPy 提供了 sinh()、cosh() 和 tanh() 等 ufunc&#xff0c;它们接受弧度值并生成相应的双曲正弦、双曲余弦和双曲正切值。 示例&#xff1a; import numpy as npx np.sinh(np.pi/2)print(x)示例 找到数组 arr 中所有值的双曲余弦值&#xff1a; import…

基于CNN的掩码自编码器微调用于分类任务

开源仓库 JJLi0427/CNN_Masked_Autoencoder: Design a patches masked autoencoder by CNN (github.com)https://github.com/JJLi0427/CNN_Masked_Autoencoder CNN自编码器 前面的文章中我们模仿MAE的思路用CNN做了一个掩码自编码器 动手小实验&#xff0c;用CNN来构建Mase…

python学习笔记-07

python内置函数 内置函数就是python自带的函数&#xff0c;不需要我们再去定义的&#xff0c;如print等直接使用即可&#xff0c;内置函数官方文档&#xff1a;官链。 1.数学运算 #数学运算&#xff1a; print(------abs()是绝对值函数------) a-1.1 print({}的绝对值是{}.fo…

MongoDB 正则表达式

MongoDB 正则表达式 MongoDB 是一个流行的 NoSQL 数据库&#xff0c;它提供了强大的查询功能&#xff0c;包括对正则表达式的支持。正则表达式是一种强大的文本搜索工具&#xff0c;它允许用户根据特定的模式匹配和搜索字符串。在 MongoDB 中&#xff0c;正则表达式可以用于查…

异常处理总结

自定义异常 ​ 系统中的异常可以分为我们能预知的异常和未知的系统异常&#xff0c;对于我们能预知的异常如空值判断&#xff0c;用户名错误&#xff0c;密码错误等异常我们需要返回客户端&#xff0c;对于系统内部异常如SQL语法错误&#xff0c;参数格式转换错误等需要统一包…

MySQL之复制(三)

复制 从另一个服务器开始复制 前面的设置都是嘉定主备库均为刚刚安装好且都是默认的数据&#xff0c;也就是说两台服务器上数据相同&#xff0c;并且知道当前主库的二进制日志。这不是典型的案例&#xff0c;大多数情况下有一个已经运行了一段时间的主库&#xff0c;然后用一…

QT day04

一、思维导图 二、登录界面优化 代码&#xff1a; 界面&#xff1a; *{background-color: rgb(255, 255, 255); }QFrame#frame{border-image: url(:/Logo/shanChuan.jpg);border-radius:15px; }#frame_2{background-color: rgba(110, 110, 110, 120);border-radius:15px; }Q…