Vue15-watch对比计算属性

一、姓名案例

1-1、watch实现

1-2、计算属性

对比发现:

计算属性比watch属性更简略一些。

1-3、计算属性 VS 侦听属性

1-4、需求变更

计算属性中不能开启异步任务!!!因为计算属性靠return返回值。但是watch靠亲自写代码去改。

1-5、定时器函数setTimeout()

语法:

var timerId = setTimeout(()=>{  console.log('This will not be logged.');  
}, 2000);  clearTimeout(timerId); // 取消定时器

vue中定时任务用的箭头函数,但是,可以用this,因为定时器中的函数并不是vue管理的,定时器到点了,是js引擎去调的函数。

所以,定时器中的函数要用箭头函数!!!

二、小结

三、promiss函数

在JavaScript中,Promise 对象用于表示一个异步操作的最终完成(或失败)及其结果值

一个 Promise 有三种状态:

  1. Pending(待定):初始状态,既不是成功,也不是失败状态。
  2. Fulfilled(已实现):意味着操作成功完成。
  3. Rejected(已拒绝):意味着操作失败。

一旦状态从 pending 变为 fulfilled 或 rejected,状态就不会再改变。

3-1、创建一个Promise

你可以使用 new Promise() 构造函数来创建一个新的 Promise 对象。这个函数接受一个执行器(executor)函数作为参数,该函数有两个参数:resolve 和 reject,它们都是函数。

const promise = new Promise((resolve, reject) => {  // 异步操作  setTimeout(() => {  if (/* 一切正常 */) {  resolve('操作成功');  } else {  reject(new Error('操作失败'));  }  }, 1000);  
});

3-2、使用Promise

你可以使用 .then() 方法来处理 fulfilled 状态,使用 .catch() 方法来处理 rejected 状态。

promise.then(result => {  console.log(result); // '操作成功'  
}).catch(error => {  console.error(error); // 捕获到的错误  
});

3-3、链式调用

.then() 方法返回一个新的 Promise,这使得你可以链式调用 .then() 和 .catch()

promise  .then(result => {  console.log(result); // '操作成功'  return anotherAsyncOperation(result); // 返回一个新的Promise  })  .then(newResult => {  console.log(newResult); // 新的异步操作的结果  })  .catch(error => {  console.error(error); // 捕获到的错误  });

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

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

相关文章

streamlit:如何快速构建一个应用,不会前端也能写出好看的界面

通过本文你可以了解到: 如何安装streamlit,运行起来第一个demo熟悉streamlit的基本语法,常用的一些组件使用streamlit库构建应用 大模型学习参考: 大模型学习资料整理:如何从0到1学习大模型,搭建个人或企业…

设计模式之观察者模式ObserverPattern(十一)

一、概述 观察者模式 (Observer Pattern) 是一种行为型设计模式,又被称为发布-订阅 (Publish/Subscribe) 模式,它定义了对象之间的一种一对多的依赖关系,使得当一个对象的状态发生变化时,所有依赖于它的对象都会自动收到通知并更新…

Duck Bro的第512天创作纪念日

Tips:发布的文章将会展示至 里程碑专区 ,也可以在 专区 内查看其他创作者的纪念日文章 我的创作纪念日第512天 文章目录 我的创作纪念日第512天一、与CSDN平台的相遇1. 为什么在CSDN这个平台进行创作?2. 创作这些文章是为了赚钱吗&#xff1f…

手写kNN算法的实现-用欧几里德空间来度量距离

kNN的算法思路:找K个离预测点最近的点,然后让它们进行投票决定预测点的类型。 step 1: kNN存储样本点的特征数据和标签数据step 2: 计算预测点到所有样本点的距离,关于这个距离,我们用欧几里德距离来度量(其实还有很多…

ui自动化中,selenium进行元素定位,以及CSS,xpath定位总结

几种定位方式 简单代码 from selenium import webdriver import time# 创建浏览器驱动对象 from selenium.webdriver.common.by import Bydriver webdriver.Chrome() # 参数写浏览器驱动文件的路径,若配置到环境变量就不用写了 # 访问网址 driver.get…

WPF-UI布局

WPF布局元素有如下几个: Grid:网格。可以自定义行和列并通过行列的数量、行高和列宽来调整控件的布局。StackPanel:栈式面板。可将包含的元素在竖直或水平方向上排成一条直线,当移除一个元素后,后面的元素会自动向前移…

两台电脑通过网线直连共享数据(超详细)- 我的实践记录

原文链接 按照原文的操作,成功通过直连网线连接了两台windows电脑并共享传输数据。 ping不通可能是防火墙没关闭导致的,但是完全关闭防火墙又不安全。 那么有没有不关闭防火墙,能够上网,又能直连另一台电脑呢? 我们…

Linux启动KKfileview文件在线浏览时报错:启动office组件失败,请检查office组件是否可用

目录 1、导论 2、报错信息 3、问题分析 4、解决方法 4.1、下载 4.2、安装步骤 1、导论 今天进行项目部署时,遇到了一个问题。在启动kkfileview时,出现了报错异常: 2024-06-09 06:36:44.765 ERROR 1 --- [ main] cn.keking.service.Of…

全球溃败,苹果可能要全球大降价了,试图摆脱中国制造的后果

苹果一季度在中国市场的出货量暴跌,导致它不得不在中国市场大降价,从3月份就在中国市场大幅度降价,然而目前它在美国和欧洲两大市场也出现大幅衰退,降价可能将成为苹果在全球的举措。 市调机构Canalys公布的一季度数据显示&#x…

Warning: `ReactDOMTestUtils.act` is deprecated in favor of `React.act`.

问题:在代码中使用jest进行单元测试时,报错如下: 解决思路: 根据报错提示出来的 react-dom/test-utils 进行全局搜索,发现没有该引用,故进入该代码块中分析。发现代码中引入testing-library/react &#…

Git使用总结(git使用,git实操,git命令和常用指令)

简介:Git是一款代码版本管理工具,可以记录每次提交的代码,防止代码丢失,可实现版本迭代,解决代码冲突,常用的远程Git仓库:Gitee(国内)、GitHub(国外&#xff…

基于websocket与node搭建简易聊天室

一、前言 上一篇文章介绍了websocket的详细用法与工具类的封装,本篇就基于websocket搭建一个简易实时的聊天室。 在本篇开始之前也可以去回顾一下websocket详细用法:WebSocket详解与封装工具类 二、基于node搭建后台websocket服务 首先确认本机电脑中…

【debug】vscode配置c/c++环境及查看调试信息m1 mac

之前用的一直是clion 但是经过反复调整,发现始终查看不了vector里面的数值(只有指针地址),改用常用的vscode后调试成功 安装 安装vscode 以及vscode中的扩展安装 c/c,c/c extension pack,cmake,cmake tools,code runner,codeLLD…

HarmonyOS(二十三)——HTTP请求实战一个可切换的头条列表

在前一篇文章,我们已经知道如何实现一个http请求的完整流程,今天就用官方列子实战一个简单的新闻列表。进一步掌握ArkTS的声明式开发范式,数据请求,常用系统组件以及touch事件的使用。 主要包含以下功能: 数据请求。…

盘点2024年5月Sui生态发展,了解Sui近期成长历程!

2024年5月是Sui的第一个生日月,Sui迎来了它的上线一周年纪念日。在过去的一年中Sui在技术进步与创新、生态系统的扩展、社区发展与合作伙伴关系以及重大项目和应用推出方面取得重要进展,展示了其作为下一代区块链平台的潜力。 以下是Sui的近期成长历程集…

MySQL的group by与count(), *字段使用问题

文章目录 问题group by到底做了什么举个例子简单来说为什么select字段,count()不能和*共同使用总结 问题 这是一段摘抄自MySQL官网的文字。其大致意思是MySQL拓展了group by的使用,MySQL允许选择没有出现在group by中的字段。换句话说,标准SQ…

暴雨推出X705显示器:23.8英寸100Hz IPS屏

IT资讯 6月 7 日消息,日前,暴雨发布了一款 23.8 英寸 IPS 显示器,直屏、支持 100Hz 刷新率。 据官方介绍,X705 显示器分辨率为 19201080,亮度为 300 尼特(典型值),对比度 1000:1&…

Polar Web【中等】search

Polar Web【中等】search Contents Polar Web【中等】search思路&探索首页一般注入方式 EXP&效果Payload 总结 思路&探索 见到题目标题,预测可能有目录扫描或者输入框查询数据之类情况,具体细节在破解过程中才能清楚 打开站点,显…

【学习笔记】finalshell上传文件夹、上传文件失败或速度为0

出现标题所述的情况,大概率是finalshell上传文件的过程中的权限不够。 可参照:Finalshell上传文件失败或者进度总为百分之零解决方法 如果不成功,建议关闭客户端重试。 同时建议在设置finalshell的ssh连接时根据不同用户设置多个连接&#xf…

Postman环境变量以及设置token全局变量!

前言百度百科解释: 环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数,如:临时文件夹位置和系统文件夹位置等。 环境变量是在操作系统中一个具有特定名字的对象,它…