详解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 相关文章推荐
为Yahoo! UI Extensions Grid增加内置的可编辑器
Mar 10 Javascript
基于JQuery的动态删除Table表格的行和列的代码
May 12 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
对 jQuery 中 data 方法的误解分析
Jun 18 Javascript
node.js中的console.warn方法使用说明
Dec 09 Javascript
js实现不提交表单获取单选按钮值的方法
Aug 21 Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 Javascript
Vue实现自带的过滤器实例
Mar 09 Javascript
vue ssr服务端渲染(小白解惑)
Nov 10 Javascript
javascript 设计模式之享元模式原理与应用详解
Apr 08 Javascript
js 压缩图片的示例(只缩小体积,不更改图片尺寸)
Oct 21 Javascript
React实现动效弹窗组件
Jun 21 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
phpMyAdmin下载、安装和使用入门教程
2007/05/31 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
ThinkPHP3.1基础知识快速入门
2014/06/19 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP和MySql中32位和64位的整形范围是多少
2016/02/18 PHP
PHP date_default_timezone_set()设置时区操作实例分析
2020/05/16 PHP
js wmp操作代码小结(音乐连播功能)
2008/11/08 Javascript
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
jquery图片切换实例分析
2015/04/15 Javascript
直接拿来用的页面跳转进度条JS实现
2016/01/06 Javascript
巧方法 JavaScript获取超链接的绝对URL地址
2016/06/14 Javascript
谈谈第三方App接入微信登录 解读
2016/12/27 Javascript
利用CSS、JavaScript及Ajax实现图片预加载的三大方法
2017/01/22 Javascript
AngularJS实现动态添加Option的方法
2017/05/17 Javascript
JQueryMiniUI按照时间进行查询的实现方法
2017/06/07 jQuery
微信小程序网络封装(简单高效)
2018/08/06 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue组件中传值EventBus的使用及注意事项说明
2020/11/16 Javascript
vue中如何添加百度统计代码
2020/12/19 Vue.js
[01:29:46]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第二局
2016/02/27 DOTA
Python的Urllib库的基本使用教程
2015/04/30 Python
简述Python2与Python3的不同点
2018/01/21 Python
python爬虫爬取网页表格数据
2018/03/07 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
python构建基础的爬虫教学
2018/12/23 Python
python中watchdog文件监控与检测上传功能
2020/10/30 Python
纽约服装和生活方式品牌:Saturdays NYC
2017/08/13 全球购物
Nike澳大利亚官网:Nike.com (AU)
2019/06/03 全球购物
Athleta官网:购买女士瑜伽服、技术运动服和休闲运动服
2020/11/12 全球购物
工作评语大全
2014/04/26 职场文书
党员领导干部民主生活会批评与自我批评发言
2014/09/28 职场文书
违纪开除通知书
2015/04/25 职场文书
趣味运动会通讯稿
2015/07/18 职场文书
Python使用sql语句对mysql数据库多条件模糊查询的思路详解
2021/04/12 Python