详解vue指令与$nextTick 操作DOM的不同之处


Posted in Javascript onAugust 02, 2018

异步更新队列

可能你还没有注意到,Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部尝试对异步队列使用原生的 Promise.then MessageChannel,如果执行环境不支持,会采用 setTimeout(fn, 0) 代替。

例如,当你设置 vm.someData = 'new value' ,该组件不会立即重新渲染。当刷新队列时,组件会在事件循环队列清空时的下一个“tick”更新。多数情况我们不需要关心这个过程,但是如果你想在 DOM 状态更新后做点什么,这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员沿着“数据驱动”的方式思考,避免直接接触 DOM,但是有时我们确实要这么做。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。例如:

<div id="example">{{message}}</div>
var vm = new Vue({
 el: '#example',
 data: {
 message: '123'
 }
})
vm.message = 'new message' // 更改数据
vm.$el.textContent === 'new message' // false
Vue.nextTick(function () {
 vm.$el.textContent === 'new message' // true
})

在组件内使用 vm.$nextTick() 实例方法特别方便,因为它不需要全局 Vue ,并且回调函数中的 this 将自动绑定到当前的 Vue 实例上:

Vue.component('example', {
 template: '<span>{{ message }}</span>',
 data: function () {
 return {
  message: '没有更新'
 }
 },
 methods: {
 updateMessage: function () {
  this.message = '更新完成'
  console.log(this.$el.textContent) // => '没有更新'
  this.$nextTick(function () {
  console.log(this.$el.textContent) // => '更新完成'
  })
 }
 }
})

vue指令

钩子函数

一个指令定义对象可以提供如下几个钩子函数 (均为可选):

bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。

update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。

unbind:只调用一次,指令与元素解绑时调用。

钩子函数的参数 (即 el、binding、vnode 和 oldVnode)。

需要注意的是:update时dom可能还没有插入文档,componentUpdated是DOM已经插入文档。并且所谓的“更新”这个钩子函数的触发条件非常宽泛,不容易把控。比如,其他与该节点无关的相邻节点更新,引发其布局的重流,也会导致该钩子函数触发

因此,如果想要在数据更新后,操作DOM,使用指令的update, componentUpdated 需要谨慎,可以考虑使用nextTick

总结

以上所述是小编给大家介绍的vue指令与$nextTick 操作DOM的不同之处,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript中的16进制字符(改进)
Nov 21 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
JavaScript中的立即执行函数表达式介绍
Mar 15 Javascript
JS实现超简单的仿QQ折叠菜单效果
Sep 21 Javascript
Clipboard.js 无需Flash的JavaScript复制粘贴库
Oct 02 Javascript
使用 JavaScript 进行函数式编程 (一) 翻译
Oct 02 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
jQuery子元素过滤选择器用法示例
Sep 09 Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Vue.js获取手机系统型号、版本、浏览器类型的示例代码
May 10 Javascript
JS轮播图的实现方法
Aug 24 Javascript
vue组件挂载到全局方法的示例代码
Aug 02 #Javascript
原生js封装的ajax方法示例
Aug 02 #Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
You might like
十天学会php之第九天
2006/10/09 PHP
asp和php下textarea提交大量数据发生丢失的解决方法
2008/01/20 PHP
javascript实现 在光标处插入指定内容
2007/05/25 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
JS小功能(列表页面隔行变色)简单实现
2013/11/28 Javascript
js中javascript:void(0) 真正含义
2020/11/05 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
2016/03/17 Javascript
遍历js中对象的属性和值的实例
2016/11/21 Javascript
Node.JS中事件轮询(Event Loop)的解析
2017/02/25 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
2017/06/12 jQuery
详解webpack进阶之插件篇
2017/07/06 Javascript
JS HTML图片显示Canvas 压缩功能
2017/07/21 Javascript
微信小程序实现页面跳转传值的方法
2017/10/12 Javascript
Node.js readline模块与util模块的使用
2018/03/01 Javascript
详解在Node.js中发起HTTP请求的5种方法
2019/01/10 Javascript
Vue 自定义指令实现一键 Copy功能
2019/09/16 Javascript
nodejs实现UDP组播示例方法
2019/11/04 NodeJs
vue实现移动端图片上传功能
2019/12/23 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
python多线程扫描端口示例
2014/01/16 Python
Numpy数组转置的两种实现方法
2018/04/17 Python
Python+Pandas 获取数据库并加入DataFrame的实例
2018/07/25 Python
Python通用函数实现数组计算的方法
2019/06/13 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
全球最大的中文旅行网站:去哪儿网
2017/11/16 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
小班重阳节活动方案
2014/02/08 职场文书
能源工程专业应届生求职信
2014/03/01 职场文书
2014年五四青年节活动方案
2014/03/29 职场文书
政治学专业毕业生求职信
2014/08/11 职场文书
群众路线教育实践活动批评与自我批评
2014/09/15 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
golang协程池模拟实现群发邮件功能
2021/05/02 Golang
解决Mysql多行子查询的使用及空值问题
2022/01/22 MySQL