(三十四)Vue之新生命周期钩子nextTick

news2024/12/30 2:04:42

文章目录

  • 普通实现的一个问题
    • 解决问题
  • nextTick

上一篇:(三十三)Vue之消息订阅与发布

首先先看这一个需求,给每个任务项新增一个编辑按钮
请添加图片描述
当编辑按钮点击时,任务项就会变成文本框,并且自动获取焦点
在这里插入图片描述

普通实现的一个问题

首先在Item组件定义元素

<li>
    <label>
      <input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/>
      <span v-show="!todo.isEdit">{{todo.title}}</span>
      <input v-show="todo.isEdit" type="text" :value="todo.title" @blur="handleBlur(todo,$event)" ref="inputTitle">
    </label>
    <button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button>
    <button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button>
</li>

回调实现

    handleEdit(todo){
      //查看每项是否有编辑标志属性,没有则加一个isEdit编辑属性
      if (todo.isEdit !== undefined){//todo.hasOwnProperty('isEdit')
        todo.isEdit = true
      }else {
        this.$set(todo,'isEdit',true)
      }
      this.$refs.inputTitle.focus()
    },
    //当文本框失去焦点
    handleBlur(todo,e){
      todo.isEdit = false
      if (!e.target.value) return alert('输入不能为空')
      this.$bus.$emit('updateTodo',todo.id,e.target.value)
    }

App组件定义回调及利用全局事件总线绑定
回调

	updateTodo(id,title){
      this.todos.forEach((todo)=>{
        if (todo.id === id) todo.title = title
      })
    }

在mounted钩子绑定事件

this.$bus.$on('updateTodo',this.updateTodo)

在beforeDestroy解绑事件

this.$bus.$off('updateTodo')

效果:当我们点击编辑按钮时,会变成文本框,但是不会自动获取焦点原因是,vue在执行this.$set(todo,'isEdit',true)这行代码,vue不会去重新解析模板,它会继续往下走,直到走完这个回调,当走到获取焦点的代码的时候,文本框还没有到页面中,这时一个顺序问题

解决问题

上面说到的问题是一个顺序问题,最简单的方法,把获取焦点的代码变成异步操作即可

	setTimeout(()=>{
        this.$refs.inputTitle.focus()
      },200)

nextTick

要是很多次出现这个问题,就需要开很多定时器,我们知道,开定时器是有代价的,所以官方设计了一个API,用于异步更新操作

语法:this.$nextTick(回调函数)

作用:在下一次 DOM 更新结束后执行其指定的回调。

使用时机:当改变数据后,要基于更新后的新DOM进行某些操作时,要在nextTick所指定的回调函数中执行。

所以,获取焦点的操作就可以使用nextTick进行操作

	this.$nextTick(function () {
        this.$refs.inputTitle.focus()
      })

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

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

相关文章

中国天气——对流性天气过程复习笔记

对流性天气过程 对流性天气十分激烈&#xff0c;影响范围相对较小&#xff0c;持续时间短&#xff0c;通常是局部灾害性天气 雷暴结构 产生雷暴的积雨云叫雷暴云&#xff0c;也叫雷暴单体&#xff0c;水平尺度约为十几千米多个雷暴单体成群聚集在一起叫做雷暴群&#xff0c;…

【C语言】数组的声明和使用(一维数组、多维数组)

数组一、什么是数组&#xff1f;二、一维数组&#xff08;一&#xff09;一维数组声明&#xff08;二&#xff09;一维数组初始化&#xff08;三&#xff09;一维数组的引用三、多维数组&#xff08;以二维数组为例&#xff09;&#xff08;一&#xff09;二维数组声明&#xf…

PyQt5数据库开发1 4.3 QSqlTableModel 之 Qt项目的创建

目录 一、新建Qt项目 1. 编辑资源文件 2. 添加前缀 3. 新建放资源文件的目录 4. 添加图标文件 二、Action 1. 新建打开数据库Action 2. 添加其他Action 三、工具栏 1. 添加工具栏 2. 拖动actOpenDB到工具栏 3. 设置工具栏属性 4. 添加分隔符 5. 添加其他工具 6.…

精选案例 |《金融电子化》:光大银行云原生背景下的运维监控体系建设

顺应“十四五”规划中关于“加快金融机构数字化转型”要求&#xff0c;中国人民银行印发了《金融科技发展规划&#xff08;2022-2025年&#xff09;》。近几年来&#xff0c;金融行业牢牢占据着国内产业数字化转型市场投入的榜首位置。IDC调查显示&#xff0c;2022上半年&#…

北斗卫星信号类型及卫星颗数

文章目录一、北斗系统现阶段提供的公开服务信号二、北斗二号、三号卫星个数三、GNSS模块中的北斗信号参考来源这篇博客主要是整理一下北斗卫星现阶段提供的公开服务信号、二号和三号卫星个数&#xff0c;以及简单看看市场的GNSS模块对北斗信号的支持情况。一、北斗系统现阶段提…

智云通CRM:引起流单的三个问题,你了解了吗?

销售人员一般都会了解基本的销售流程&#xff0c;但是为什么还是出现了各种流单的问题&#xff1f;智云通CRM总结以下三个问题&#xff1a; 第一&#xff0c;采购流程是会发生反复的&#xff0c;不会一直向下走。 从整体上看&#xff0c;客户的采购流程遵循着上述规律&#x…

C++ 修改防火墙firewall设置(Windows)

文章目录1、简介1.1 防火墙概述1.2 入站&#xff0c;还是出站&#xff1f;1.3 防火墙规则优先级2、系统界面方式3、命令行方式3.1 防火墙基本状态设置3.2 入站出站规则设置3.3 其他设置3.4 telnet检测端口4、C方式4.1 注册表4.2 COM&#xff08;Windows XP&#xff09;4.3 COM&…

深度学习模型概念

Big data features: 5V--volume, velocity, variety, value, veracity.Big data challenges&#xff1a;高维、multi-modal、complexity、privacy 1. Federated Learning 联邦学习 Federated Learning&#xff1a;Server将model分散到各个用户user&#xff0c;clients利用本地…

不同相机之间图片像素对应关系求解(单应性矩阵求解)

一、场景 相机1和相机2相对位置不变&#xff0c;相机拍摄图片有重叠&#xff0c;求他们交叠部分的一一对应关系。数学语言描述为已知相机1图片中P点像素(u1, v1)&#xff0c;相机1中P点在相机2图片中像素值为(u2, v2)&#xff0c;它们存在某种变换&#xff0c;求变换矩阵。 因为…

计算机存储数字的本质,正码,反码,补码

计算机-原码 就是二进制定点表示法&#xff0c;即最高位为符号位&#xff1a;“0”表示正&#xff0c;“1”表示负&#xff0c;其余位表示数值的大小。 该数字不进行其他操作时数字最原始的二进制表示&#xff0c; 对于原码来说&#xff0c;绝对值相等的正数和负数只有符号位不…

高通平台开发系列讲解(USB篇)libuvc详解

文章目录 一、什么是UVC二、UVC拓扑结构三、libuvc的预览时序图沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇文章将介绍libuvc。 一、什么是UVC UVC,全称为:USB video(device) class。 UVC是微软与另外几家设备厂商联合推出的为USB视频捕获设备定义的协议标…

缓存雪崩 缓存击穿-总结

目录 缓存雪崩 缓存击穿-总结 缓存雪崩 出现场景&#xff1a; 解决方案&#xff1a; 缓存击穿 出现场景&#xff1a; 举例如图&#xff1a; 缓存击穿的三个前提&#xff1a; 解决方案&#xff1a; 缓存雪崩 缓存击穿-总结 缓存雪崩 出现场景&#xff1a; (1) 对于R…

用于隔离PWM的光耦合器选择和使用

光耦合器&#xff08;或光隔离器&#xff09;是一种将电路电隔离的器件&#xff0c;不仅在隔离方面非常出色&#xff0c;而且允许您连接到具有不同接地层或在不同电压电平下工作的电路。光耦合器具有“故障安全”功能&#xff0c;因为如果受到高于最大额定值的电压&#xff0c;…

3.1 OSPF引入路由

实验目的掌握OSPF引入静态路由的办法掌握OSPF引入直连路由的办法实验拓扑OSPF引入路由实验拓扑如图3-1所示: 图3-1:OSPF引入路由 实验步骤配置IP地址R1的配置 <Huawei>system-view [Huawei]undo info-center enabl

软件测试面试题中的sql题目你会做吗?

目录 1.学生表 2.一道SQL语句面试题&#xff0c;关于group by表内容&#xff1a; 3.表中有A B C三列,用SQL语句实现&#xff1a;当A列大于B列时选择A列否则选择B列&#xff0c;当B列大于C列时选择B列否则选择C列 4. 5.姓名&#xff1a;name 课程&#xff1a;subject 分数&…

node-sass按照失败

一、描述 从网上下载的一个Vue模板项目&#xff0c;导入VsCode&#xff0c;执行npm install命令后&#xff0c;报错了&#xff0c;报错的信息是node-sass安装失败&#xff0c;同时提示需要python环境的错误信息&#xff0c;这是因为安装node-sass失败了&#xff0c;而node-sas…

开源实时监控系统 HertzBeat 对 Linux 操作系统的监控告警实践

使用开源实时监控系统 HertzBeat 对 Linux 操作系统的监控告警实践&#xff0c;5分钟搞定&#xff01; HertzBeat 介绍 HertzBeat 是一款开源&#xff0c;易用友好的实时监控系统&#xff0c;无需Agent&#xff0c;拥有强大自定义监控能力。 集监控-告警-通知为一体&#xff0…

Spring入门案例三:注解进行引用类型的自动装配

本系列文章将会带领大家进行Spring的全面学习&#xff0c;持续关注我&#xff0c;不断更新中… 一.案例分级 简单解析:配置类替代以前的配置文件&#xff0c;实体类提供对象&#xff0c;业务类中有实体类的引用对象&#xff0c;在业务层中实现引用类的自动装配。 二.各层代码…

Java基础 -- 泛型

Java基础 -- 泛型1. Introduction1.1 好处1.2 常用泛型2. User Guide2.1 泛型类2.2 泛型方法2.3 泛型接口3. 限定泛型范围4. Awakening1. Introduction 1.1 好处 代码复用&#xff0c;多种数据类型执行相同的代码在编译期间可以检查类型是否安全&#xff0c;报警ClassCastExce…

什么是webpack

目录 1、什么是webpack&#xff08;必会&#xff09; 2、Webpack的优点是什么&#xff1f;&#xff08;必会&#xff09; 3、webpack的构建流程是什么?从读取配置到输出文件这个过程尽量说全&#xff08;必会&#xff09; 4、说一下 Webpack 的热更新原理(必会) 5、webpa…