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 相关文章推荐
jQuery 获取URL参数的插件
Mar 04 Javascript
使用jquery实现图文切换效果另加特效
Jan 20 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
JavaScript插件化开发教程 (二)
Jan 27 Javascript
javascript实现禁止鼠标滚轮事件
Jul 24 Javascript
实例讲解使用原生JavaScript处理AJAX请求的方法
May 10 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
原生js实现addclass,removeclass,toggleclasss实例
Nov 24 Javascript
JavaScript实现简单动态进度条效果
Apr 06 Javascript
mpvue 单文件页面配置详解
Dec 02 Javascript
微信小程序—setTimeOut定时器的问题及解决
Jul 26 Javascript
jQuery实现带进度条的轮播图
Sep 13 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
php下实现农历日历的代码
2007/03/07 PHP
cmd下运行php脚本
2008/11/25 PHP
兼容性比较好的PHP生成缩略图的代码
2011/01/12 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
smarty自定义函数用法示例
2016/05/20 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
JavaScript Sort 的一个错误用法示例
2015/03/20 Javascript
node网页分段渲染详解
2016/09/05 Javascript
微信小程序 数据绑定详解及实例
2016/10/25 Javascript
bootstrap jquery dataTable 异步ajax刷新表格数据的实现方法
2017/02/10 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Cookbook组件形式:优化 Vue 组件的运行时性能
2018/11/25 Javascript
深入了解响应式React Native Echarts组件
2019/05/29 Javascript
微信小程序bindtap事件与冒泡阻止详解
2019/08/08 Javascript
uni-app实现点赞评论功能
2019/11/25 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
详解Vue中Axios封装API接口的思路及方法
2020/10/10 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
python实现bitmap数据结构详解
2014/02/17 Python
关于Python作用域自学总结
2019/06/10 Python
Python使用docx模块实现刷题功能代码
2020/02/13 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
python实现mask矩阵示例(根据列表所给元素)
2020/07/30 Python
CSS3只让背景图片旋转180度的实现示例
2021/03/09 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
应用心理学个人的求职信
2013/12/08 职场文书
金融行业务员的自我评价
2013/12/13 职场文书
物业消防安全责任书
2014/07/23 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
2015年除四害工作总结
2015/07/23 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers