VUE异步更新DOM - 用$nextTick解决DOM视图的问题


Posted in Javascript onNovember 06, 2020

VUE异步更新DOM

首先,Vue 在更新 DOM 时是异步执行的!

所以只要侦听到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发,只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际 (已去重的) 工作。Vue 在内部对异步队列尝试使用原生的 Promise.then、MutationObserver 和 setImmediate,如果执行环境不支持,则会采用 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) // => '已更新'
   })
  }
 }
})

因为 $nextTick() 返回一个 Promise 对象,所以你可以使用新的 ES2017 async/await 语法完成相同的事情:

methods: {
 updateMessage: async function () {
  this.message = '已更新'
  console.log(this.$el.textContent) // => '未更新'
  await this.$nextTick()
  console.log(this.$el.textContent) // => '已更新'
 }
}

补充知识:Vue数据更新视图不更新,你必须知道的几种解决方案

知识拓展

在一个组件实例中,只有在data里初始化的数据才是响应的,Vue不能检测到对象属性的添加或删除,没有在data里声明的属性不是响应的。

Vue不允许在已经创建的实例上动态添加根级响应式属性,但是可以使用$set方法将相应属性添加到嵌套的对象上。

数组数据变动,使用某些方法操作数组,变动数据时,有些方法无法被vue监测

push(),pop(),shift(),unshift(),splice(),sort(),reverse()可被vue检测到

filter(), concat(), slice()。这些不会改变原始数组,但总是返回一个新数组。当使用非变异方法时,可以用新数组替换旧数组。

vue不能检测以下变动的数组:

1、当你利用索引直接设置一个项时,vm.items[indexOfItem] = newValue

2、当你修改数组的长度时,例如: vm.items.length = newLength

对象属性的添加或删除

由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程,所以属性必须在 data 对象上存在才能让 Vue 转换它,这样才能让它是响应的。

解决办法:

使用 Vue.set(object, key, value) 方法将响应属性添加到嵌套的对象上

Vue.set(vm.someObject, 'b', 2) 或者 this.$set(this.someObject,'b',2) (这也是全局 Vue.set 方法的别名)

异步更新队列

在最新的项目中遇到了这种情况,数据第一次获取到了,也渲染了,但是第二次之后数据只有在再一次渲染页面的时候更新,并不能实时更新。

网上查了资料才知道,Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会被推入到队列中一次。

解决办法:

可在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数在 DOM 更新完成后就会调用。例如:

VUE异步更新DOM - 用$nextTick解决DOM视图的问题

因为 $nextTick()返回一个 Promise 对象,所以可以使用新的 ES2016 async/await语法完成相同的事情:

VUE异步更新DOM - 用$nextTick解决DOM视图的问题

Object.assign方法

object.assign方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象,并返回目标对象。

vm.object = Object.assign( { } , vm.object , {a:' 1 ', b:' 2 ' })

注:object必须是已经声明的对象

vue多层循环,动态改变数据后渲染的很慢或者不渲染

可在动态改变数据的方法,第一行加上

this.$forceUpdate();

以上这篇VUE异步更新DOM - 用$nextTick解决DOM视图的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
jquery 子窗口操作父窗口的代码
Sep 21 Javascript
js实现鼠标移到链接文字弹出一个提示层的方法
May 11 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
Node.js中Request模块处理HTTP协议请求的基本使用教程
Mar 31 Javascript
JS代码实现根据时间变换页面背景效果
Jun 16 Javascript
求js数组的最大值和最小值的四种方法
Mar 03 Javascript
js实现本地时间同步功能
Aug 26 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
layui扩展上传组件模拟进度条的方法
Sep 23 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
nuxt.js服务端渲染中axios和proxy代理的配置操作
Nov 06 #Javascript
微信小程序开发数据缓存基础知识辨析及运用实例详解
Nov 06 #Javascript
nuxt 路由、过渡特效、中间件的实现代码
Nov 06 #Javascript
Nuxt的路由动画效果案例
Nov 06 #Javascript
微信小程序中target和currentTarget的区别小结
Nov 06 #Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 #Javascript
微信小程序调用后台service教程详解
Nov 06 #Javascript
You might like
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
php 中的4种标记风格介绍
2012/05/10 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
深入浅析php中sprintf与printf函数的用法及区别
2016/01/08 PHP
thinkPHP5.0框架应用请求生命周期分析
2017/03/25 PHP
利用Laravel事件系统如何实现登录日志的记录详解
2017/05/20 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP用PDO如何封装简单易用的DB类详解
2017/07/30 PHP
PHP使用SMTP邮件服务器发送邮件示例
2018/08/28 PHP
FireFox与IE 下js兼容触发click事件的代码
2008/11/20 Javascript
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
JQuery的Validation插件中Remote验证的中文问题
2010/07/26 Javascript
JavaScript 变量作用域分析
2011/07/04 Javascript
JS高级拖动技术 setCapture,releaseCapture
2011/07/31 Javascript
Json和Jsonp理论实例代码详解
2013/11/15 Javascript
js实现日历可获得指定日期周数及星期几示例分享(js获取星期几)
2014/03/14 Javascript
Bootstrap每天必学之栅格系统(布局)
2015/11/25 Javascript
获取当前按钮或者html的ID名称实例(推荐)
2017/06/23 Javascript
深入理解JavaScript和TypeScript中的class
2018/04/22 Javascript
微信小程序实现留言功能
2018/10/31 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
2020/10/22 Javascript
常用python数据类型转换函数总结
2014/03/11 Python
Python中itertools模块用法详解
2014/09/25 Python
python版大富翁源代码分享
2018/11/19 Python
python导包的几种方法(自定义包的生成以及导入详解)
2019/07/15 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python 怎样进行内存管理
2020/11/10 Python
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
园林施工员岗位职责
2013/12/11 职场文书
红灯733-1型14管5波段半导体收音机
2021/04/22 无线电
php去除deprecated的实例方法
2021/11/17 PHP