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 相关文章推荐
filters.revealTrans.Transition使用方法小结
Aug 19 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
Javascript设计模式理论与编程实战之简单工厂模式
Nov 03 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
javascript常见数字进制转换实例分析
Apr 21 Javascript
jQuery中Nicescroll滚动条插件的用法
Nov 10 Javascript
jquery css实现邮箱自动补全
Nov 14 Javascript
js实现导航吸顶效果
Feb 24 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
d3.js 地铁轨道交通项目实战
Nov 27 Javascript
基于JS实现计算24点算法代码实例解析
Jul 23 Javascript
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
CodeIgniter框架URL路由总结
2014/09/03 PHP
php简单图像创建入门实例
2015/06/10 PHP
PHP实现HTML页面静态化的方法
2015/11/04 PHP
php PDO属性设置与操作方法分析
2018/12/27 PHP
浅谈php的TS和NTS的区别
2019/03/13 PHP
Laravel框架模型的创建及模型对数据操作示例
2019/05/07 PHP
JavaScript 应用技巧集合[推荐]
2009/08/30 Javascript
EasyUI中的tree用法介绍
2011/11/01 Javascript
基于JQuery实现鼠标点击文本框显示隐藏提示文本
2012/02/23 Javascript
javascript判断机器是否联网的2种方法
2013/08/09 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
js完美解决IE6不支持position:fixed的bug
2015/04/24 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
JS中的THIS和WINDOW.EVENT.SRCELEMENT详解
2015/05/25 Javascript
跟我学习javascript的垃圾回收机制与内存管理
2015/11/23 Javascript
JavaScript探测CSS动画是否已经完成的方法
2016/08/30 Javascript
微信开发 微信授权详解
2016/10/21 Javascript
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
在vue项目中使用sass的配置方法
2018/03/20 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
Python编程中的反模式实例分析
2014/12/08 Python
python pyheatmap包绘制热力图
2018/11/09 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
雅虎笔试题(字符串操作)
2015/03/24 面试题
中软国际Java程序员笔试题
2014/07/19 面试题
大学生求职信范文应怎么写
2014/01/01 职场文书
财务简历的自我评价
2014/03/05 职场文书
大学生职业生涯规划书参考模板
2014/03/05 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
2015年大学团支部工作总结
2015/05/13 职场文书
2015年教师节广播稿
2015/08/19 职场文书
pytorch实现手写数字图片识别
2021/05/20 Python