<template>
<div>
<input v-model="count" />
</div>
</template>
<script>
import { ref, watch } from "@vue/composition-api";
export default {
setup() {
// 定义响应式数据 count
const count = ref("");
// 异步任务:打印用户输入的关键词
const writeValue = val => {
return setTimeout(() => {
console.log(val);
}, 1000);
};
// 定义 watch 监听
watch(
count,
(newCount, old, clear) => {
// 执行异步任务,并得到关闭异步任务的 id
let id = writeValue(newCount, old);
// console.log(id,old,clear)
// 如果 watch 监听被重复执行了,则会先清除上次未完成的异步任务
clear(() => clearTimeout(id));
},
// watch 刚被创建的时候不执行
{ lazy: true }
);
return {
count
};
}
};
</script>
<style lang="scss" scoped></style>

  

vue3.0wactch监听的更多相关文章

  1. Vue3 为何使用 Proxy 实现数据监听

    博客地址:https://ainyi.com/93 vue3 响应式数据放弃了 Object.defineProperty,而使用Proxy来代替它 我们知道,在 vue2 中,实现数据监听是使用Ob ...

  2. vue2.x版本中Object.defineProperty对象属性监听和关联

    前言 在vue2.x版本官方文档中 深入响应式原理 https://cn.vuejs.org/v2/guide/reactivity.html一文的解释当中,Object.defineProperty ...

  3. Blazor和Vue对比学习(基础1.8):Blazor中实现计算属性和数据监听

    1.7章<传递UI片断>,需要做几个案例,这部分暂停消化几天.我们先把基础部分相对简单的最后两章学习了. 计算属性和数据监听是Vue当中的概念,本质上都是监听数据的变化,然后做出响应.两者 ...

  4. 学习ASP.NET Core, 怎能不了解请求处理管道[3]: 自定义一个服务器感受一下管道是如何监听、接收和响应请求的

    我们在<服务器在管道中的"龙头"地位>中对ASP.NET Core默认提供的具有跨平台能力的KestrelServer进行了介绍,为了让读者朋友们对管道中的服务器具有更 ...

  5. 【用户交互】APP没有退出前台但改变系统属性如何实时更新UI?监听系统广播,让用户交互更舒心~

    前日,一小伙伴问我一个问题,说它解决了半天都没解决这个问题,截图如下: 大概楼主理解如下: 如果在应用中有一个判断wifi的开关和一个当前音量大小的seekbar以及一个获取当前电量多少的按钮,想知道 ...

  6. Java中用得比较顺手的事件监听

    第一次听说监听是三年前,做一个webGIS的项目,当时对Listener的印象就是个"监视器",监视着界面的一举一动,一有动静就触发对应的响应. 一.概述 通过对界面的某一或某些操 ...

  7. Android开发-之监听button点击事件

    一.实现button点击事件的方法 实现button点击事件的监听方法有很多种,这里总结了常用的四种方法: 1.匿名内部类 2.外部类(独立类) 3.实现OnClickListener接口 4.添加X ...

  8. 【WCF】终结点的监听地址

    终结点主要作用是向客户端公开一些信息入口,通过这个入口,可以找到要调用的服务操作.通常,终结点会使用三个要素来表述,我记得老蒋(网名:Artech,在园子里可以找到他)在他有关WCF的书里,把这三要素 ...

  9. ASP.NET Core真实管道详解[2]:Server是如何完成针对请求的监听、接收与响应的【上】

    Server是ASP .NET Core管道的第一个节点,负责完整请求的监听和接收,最终对请求的响应同样也由它完成.Server是我们对所有实现了IServer接口的所有类型以及对应对象的统称,如下面 ...

随机推荐

  1. C语言1作业004

    这个作业属于哪个课程 C语言作业004 我在这个课程的目标是 理解和掌握for语句的基本操作 这个作业在哪个具体方面帮助我实现目标 循环结构的应用,数学函数基本问题 参考文献 C语言程序设计(第3版) ...

  2. 在.Net Core 3.0中尝试新的System.Text.Json API

    .NET Core 3.0提供了一个名为System.Text.Json的全新命名空间,它支持reader/writer,文档对象模型(DOM)和序列化程序.在此博客文章中,我将介绍它如何工作以及如何 ...

  3. 使用face-api.js实现人脸识别(一)

    功能 第一阶段实现对图片中人脸的识别并打上标签(比如:人名) 第二阶段使用摄像头实现对人物的识别,比如典型的应用做一个人脸考勤的系统 资源 face-api.js https://github.com ...

  4. 史上最骚最全最详细的IO流教程,没有之一!

    目录 1.告白IO流的四点明确 2.File类 1.1 File概述 1.2 构造方法 1.3 常用方法 1.3.1 获取功能的方法 1.3.2 绝对路径和相对路径 1.3.3判断功能的方法 1.3. ...

  5. 彻底理解Python多线程中的setDaemon与join【配有GIF示意】

    在进行Python多线程编程时, join() 和 setDaemon() 是最常用的方法,下面说说两者的用法和区别. 1.join () 例子:主线程A中,创建了子线程B,并且在主线程A中调用了B. ...

  6. 设计模式C++描述----17.备忘录(Memento)模式

    一. 备忘录模式 定义:在不破坏封装性的前提下,捕获一个对象的内部状态,并在该对象之外保存这个状态.这样以后就可将该对象恢复到原先保存的状态. 结构图: 使用范围: Memento 模式比较适用于功能 ...

  7. 匹马行天下之思维决定高度篇——道道道,学习Java之道

    致Java星球的程序员兄弟们的一封信 亲爱的Java星球的程序员兄弟们: 你们好!我是来自地球的一名Java程序员,首先我代表地球人对贵星球的高司令来到地球传授Java语言,造福了全人类,造福了整个地 ...

  8. 全排列函数(next_permutation())

    平常需要全排列的时候,一般都是dfs然后字符串匹配啥的……今天看题解的时候突然发现了这个神器. next_permutation()函数在c++的algorithm库里,作用是传入一个数组,输出这个数 ...

  9. Ubuntu18.04系统下安装Pycharm&vim设置自动缩进及默认显示行号

    Ubuntu18.04系统自带python3.6及python2.7,Pycharm是一款非常强大的IDE.目前Pycharm有两个版本:专业版和Community社区,区别是专业版是收费,而且功能更 ...

  10. vimrc备个份

    set mouse=a set number set smartindent set expandtab set tabstop=4 set shiftwidth=4 set hlsearch set ...