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 相关文章推荐
将函数的实际参数转换成数组的方法
Jan 25 Javascript
深入理解JavaScript定时机制
Oct 29 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
jquery实现倒计时代码分享
Jun 13 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
Jun 16 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
JavaScript时间操作之年月日星期级联操作
Jan 15 Javascript
JavaScript实现一个简易的计算器实例代码
May 10 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
Sep 11 Javascript
countUp.js实现数字滚动效果
Oct 18 Javascript
Vue实现剪切板图片压缩功能
Feb 04 Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 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
PHP目录函数实现创建、读取目录教程实例
2011/01/13 PHP
PHP pthreads v3下的Volatile简介与使用方法示例
2020/02/21 PHP
jQuery控制的不同方向的滑动(向左、向右滑动等)
2014/07/18 Javascript
jQuery实现购物车计算价格功能的方法
2015/03/25 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
JavaScript是如何实现继承的(六种方式)
2016/03/31 Javascript
JS碰撞运动实现方法详解
2016/12/15 Javascript
原生JS发送异步数据请求
2017/06/08 Javascript
Angular实现的内置过滤器orderBy排序与模糊查询功能示例
2017/12/29 Javascript
在vue项目中引用Iview的方法
2018/09/14 Javascript
python网络编程实例简析
2014/09/26 Python
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
举例讲解Python的lambda语句声明匿名函数的用法
2016/07/01 Python
Python如何判断数独是否合法
2016/09/08 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
matplotlib绘图实例演示标记路径
2018/01/23 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
python批量获取html内body内容的实例
2019/01/02 Python
Python 窗体(tkinter)按钮 位置实例
2019/06/13 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python tkinter实现屏保程序
2019/07/30 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
Python的PIL库中getpixel方法的使用
2020/04/09 Python
Brother加拿大官网:打印机、贴标机、缝纫机
2019/10/09 全球购物
幼儿园儿童节活动主持词+串词大全
2014/03/21 职场文书
2014年青年志愿者工作总结
2014/12/09 职场文书
2015年七夕情人节活动方案
2015/05/06 职场文书
大学军训通讯稿(2016最新版)
2015/12/21 职场文书
七年级作文之《我和我的祖国》观后感作文
2019/10/18 职场文书
小程序后台PHP版本部署运行 LNMP+WNMP
2021/04/01 Servers
浅谈vue2的$refs在vue3组合式API中的替代方法
2021/04/18 Vue.js
python爬取某网站原图作为壁纸
2021/06/02 Python
聊聊redis-dump工具安装问题
2022/01/18 Redis