vue TodoList 用$nextTick实现焦点获取

最新推荐文章于 2024-03-25 21:32:43 发布
原创 最新推荐文章于 2024-03-25 21:32:43 发布 · 521 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文探讨了在Vue中使用ref实现DOM元素聚焦的方法，并分析了为何直接更改数据无法立即更新视图的原因。介绍了两种解决方案：使用定时器和Vue的$nextTick方法。

要点：

官方推荐

这样写也可以

 

 

 

方法一、

加一个ref实现可以获取实例对象再使用focus实现获取焦点

但是发现没有效果

原因

vue当isEdit数据改变时没有直接去重新解析模板.而是handleEdit里面代码全部执行完了才去执行模板,而我们上面使用了v-show,也就是说一开始是false的,但是46行代码改变了isEdit为true但是没有直接去重新解析模板,也就是此时v-show还是false的，相当于display为none.那么51行要对该dom元素进行操作时,由于display为none自然操作也无效

vue为什么要当函数里代码全部结束才进行重新解析模板

这考虑到一个效率的问题.如果每次修改就重新解析一次,那如果代码中有好多个对数据进行修改,那不是要解析很多遍

 

 解决办法1：使用定时器

 解决方法2：使用vue提供的$nextTick 它会在dom节点更新后执行

 

 

 总结：

 

Vue2（十）：全局事件总线、消息订阅与发布、TodoList的编辑功能、$nextTick、动画
weixin_42044763的博客
08-25 1435
因为接收数据的组件A中定义的回调函数和自定义事件是绑定的，而这个用来接收数据的组件实例A都销毁了，回调函数也没了，那这个xxxx自定义事件也就没用了，你留着会污染全局环境（这块儿有点迷糊）这玩意儿用的不多，和全局事件总线写法差不多，但是全局事件总线更好，因为是在Vue身上操作，但是这个的话要引入第三方库，库有很多，比如pubsub-js。，那每次点击编辑按钮，都会添加一次isEdit属性，这样是不太好的，所以要加个判断，添加过了就改成true，没添加过就添加个true。，而且原来的span要隐藏。...
Vue06 全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 github案例
weixin_58562753的博客
03-13 1634
全局事件总线 TodoList-事件总线 消息订阅与发布 TodoList-pubsub TodoList-编辑$nextTick 动画效果 过度效果 配置代理_方式一二 github案例
获取焦点+使用nextTick不用等待渲染时间
mmOmm_的博客
03-15 201
自学前端项目实战笔记，如果内容有误或者有待改进，希望大佬们多多点评
input框无法获取焦点？nextTick的使用
buterra的博客
05-10 854
页面中的input框显示是受v-show控制的，在执行回调函数时，nput还未显示。回调函数执行完成后，模板才会进行更新，导致input框未获取到焦点。什么时候用：当改变数据后，要基于更新后的DOM进行某些操作时，要在nextTick所指定的回调函数中执行。nextTick的作用：在下一次DOM更新结束后执行其指定的回调。2.使用nextTick解决。
Vue学习：todolist 编辑功能完善 $nextTick
weixin_47295886的博客
03-06 187
this.$nextTick(回调函数)==》 在下一次DOM更新结束后执行指定的回调 使用时间：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行
TodoList添加编辑功能$nextTick
Infatuatedmonkey的博客
02-22 262
Vue中的$nextTick
Vue2.0 V1.2版本 增删改功能，全选单选与取消全选选项，使用$nextTick, bus , 自定义事件
07-07
Vue2.0 V1.2的增删改查功 全选单选与取消全选选项， 使用$nextTick, bus , 自定义事件. 使用了pubsub库 npm install --save pubsub-js 使用了nanoid npm i nanoid 下载 npm install 启动 npm run serve TodoList...
Vue2（十一）：全局事件总线、消息订阅与发布pubsub、TodoList的编辑功能、$nextTick、过渡与动画
m0_73560798的博客
03-25 1855
/挂载完成后给全局事件总线添加事件},//最好在销毁前解绑},
Vue作品（TodoList）展示和实现教程
qq_61465103的博客
09-20 657
Vue作品（TodoList）展示和实现教程
vue中input文本框自动获取焦点 与 $nextTick() 函数的使用
qq_41519363的博客
06-06 2036
this.$nextTick(_ => { this.$refs.saveTagInput.$refs.input.focus(); }); $nextTick函数的作用就是在页面元素重新渲染之后才会执行内部代码 注意: 此代码是Element-ui中tag标签 中的动态tag标签中的代码,
vue 输入框获取焦点
qq_41913971的博客
06-11 7358
<input @keyup="searchGame" ref="searchInput" v-focus class="game__search-input" type="text" placeholder="搜索" v-model="searchGameName"> <div @click="handleKey" class="game__pop-key-search"></div> &
Vue中nextTick的用法
李公子的博客
08-09 2268
nextTick 语法：this.$nextTick(回调函数) 作用：在下一次 DOM 更新结束后执行其指定的回调。 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。 代码演示 下面我们通过一个小例子来演示用法 <template> <div> <!-- 实现点击之后显示输入框 并获取焦点 --> <input type="text" ref="textInput" v-s
$nextTick在具体应用中作用
m0_61582163的博客
11-26 214
vue中的nextTick主要用户处理数据动态变化后，DOM还未及时更新的问题，用nextTick就可以获取数据更新后最新DOM的变化。（1）点击按钮显示input框并且获取焦点。
vue——$nextTick输入框聚焦案例
weixin_45998300的博客
03-25 756
目标：点击按钮自身隐藏，出现输入框并马上处于激活状态 错误写法：this.$refs.myInp.focus() 原因: data变化更新DOM是异步的，输入框还没有挂载到真实DOM上 正确写法：this.$nextTick(() => { this.$refs.myInp.focus() }) 优化：await this.$nextTick() thi...
vue的todoList案例
m0_55916923的博客
08-30 1547
todolist案例
nextTick的作用及使用场景
Alone_Endeavor的博客
01-12 1824
nextTick的作用及使用场景
Vue异步更新、$nextTick
weixin_48341937的博客
07-24 149
2. 想要在 DOM 更新完成之后做某件事，可以使用。问题："显示之后"，立刻获取焦点是不能成功的！Vue 是 异步更新 DOM (提升性能)this.$nextTick(函数体)1. Vue是异步更新 DOM 的。, 才会触发执行此方法里的函数体。1. 点击编辑，显示编辑框。
vue-$nextTick使用详解
weixin_41993525的博客
11-11 1450
$nextTick概念： https://segmentfault.com/a/1190000012861862 https://www.jianshu.com/p/a7550c0e164f
三个案例掌握this.$nextTick()方法的使用/Vue中的$nextTick()
热门推荐
天命爱心职责的博客
02-14 2万+
his.$nextTick() 解释为在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM. 也就是说，当dom元素发生改变，重新渲染dom树后，再执行vue.$nextTick()里面的内容。
vue3 $nextTick$nextTick
最新发布
06-26
在 Vue 3 中，`$nextTick` 方法仍然扮演着重要的角色，用于在数据更新后等待 DOM 完成渲染，然后执行特定的回调函数。它与 Vue 2 的行为基本一致，但在底层实现上有所变化。 ### 用法 在 Vue 3 中，`$nextTick` 可以通过组件实例访问，也可以作为全局方法使用。它的基本语法如下： ```javascript this.$nextTick(() => { // 在此可以安全地访问更新后的 DOM }); ``` 例如，在修改了响应式数据之后，如果需要操作更新后的 DOM 元素，就可以将相关代码放在 `$nextTick` 的回调中： ```vue <template> <div ref="content">{{ message }}</div> </template> <script> export default { data() { return { message: 'Hello Vue 3' }; }, methods: { updateMessage() { this.message = 'Updated Message'; this.$nextTick(() => { console.log(this.$refs.content.textContent); // 输出更新后的文本 }); } } }; </script> ``` ### 原理 Vue 3 使用 `Proxy` 实现了更高效的响应式系统，这使得 `Object.defineProperty` 的一些限制被克服，比如不能监听数组的变化和对象属性的新增或删除[^3]。当数据发生变化时，Vue 会将这些变更加入到一个异步更新队列中，而不是立即更新 DOM。这种机制有助于提高性能，因为多个数据变更可以合并成一次 DOM 更新。 `$nextTick` 的作用就是在这一系列的异步更新完成后执行指定的回调。这意味着当你调用 `$nextTick` 并传递一个回调函数时，这个回调会在所有因最近的数据变更而引起的 DOM 更新完成之后被执行。 具体来说，当数据改变时，Vue.js 会触发依赖收集过程，并通过 `Dep`（依赖管理器）来通知相关的 `watcher`。这些 `watcher` 会将它们的回调放入一个异步更新队列中。一旦当前事件循环中的所有数据变更都处理完毕，Vue 就会清空这个队列，并运行每个 `watcher` 的回调。只有在这整个过程中，DOM 已经根据最新的数据进行了更新，这时 `$nextTick` 的回调才会被调用[^2]。 因此，`$nextTick` 是确保在 DOM 更新后执行代码的有效方式，这对于需要基于最新 DOM 状态进行操作的场景非常有用。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值