Vue15-watch对比计算属性

一、姓名案例

1-1、watch实现

1-2、计算属性

对比发现:

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

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

1-4、需求变更

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

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

语法:

javascript 复制代码
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 变为 fulfilledrejected,状态就不会再改变。

3-1、创建一个Promise

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

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

3-2、使用Promise

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

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

3-3、链式调用

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

javascript 复制代码
promise  
  .then(result => {  
    console.log(result); // '操作成功'  
    return anotherAsyncOperation(result); // 返回一个新的Promise  
  })  
  .then(newResult => {  
    console.log(newResult); // 新的异步操作的结果  
  })  
  .catch(error => {  
    console.error(error); // 捕获到的错误  
  });
相关推荐
Jasmin Tin Wei28 分钟前
蓝桥杯 web 学海无涯(axios、ecahrts)版本二
前端·蓝桥杯
圈圈编码35 分钟前
Spring Task 定时任务
java·前端·spring
转转技术团队37 分钟前
代码变更暗藏危机?代码影响范围分析为你保驾护航
前端·javascript·node.js
Spark23842 分钟前
关于vue3整合tiptap的slash菜单的ts支持
vue.js
Mintopia1 小时前
Node.js高级实战:自定义流与Pipeline的高效数据处理 ——从字母生成器到文件管道的深度解析
前端·javascript·node.js
Mintopia1 小时前
Three.js深度解析:InstancedBufferGeometry实现动态星空特效 ——高效渲染十万粒子的底层奥秘
前端·javascript·three.js
北凉温华1 小时前
强大的 Vue 标签输入组件:基于 Element Plus 的 ElTagInput 详解
前端
随笔记1 小时前
Flex布局下,label标签设置宽度依旧对不齐,完美解决(flex-shrink属性)
javascript·css·vue.js
原生高钙1 小时前
LLM大模型对话框实践:大文件的分片上传
前端
加兵柠檬水1 小时前
代码输出题,会这些就够了。
前端