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 相关文章推荐
Javascript代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
仿服务器端脚本方式的JS模板实现方法
Apr 27 Javascript
js分解url参数(面向对象-极简主义法应用)
Aug 09 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
js实现定时进度条完成后切换图片
Jan 04 Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 Javascript
判断jQuery是否加载完成,没完成继续判断的解决方法
Dec 06 jQuery
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
vue中slot(插槽)的介绍与使用
Nov 12 Javascript
React Hooks 实现和由来以及解决的问题详解
Jan 17 Javascript
JS简易计算器实例讲解
Jun 30 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP人民币金额转大写实例代码
2015/10/02 PHP
PHP编程中的__clone()方法使用详解
2015/11/27 PHP
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
jquery选择器之属性过滤选择器详解
2014/01/27 Javascript
Jquery easyUI 更新行示例
2014/03/06 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
JS获取鼠标相对位置的方法
2016/09/20 Javascript
详解Vue使用命令行搭建单页面应用
2017/05/24 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
jQuery each和js forEach用法比较
2019/02/27 jQuery
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
2019/08/22 Javascript
JavaScript如何把两个数组对象合并过程解析
2019/10/10 Javascript
JS document文档的简单操作完整示例
2020/01/13 Javascript
[00:32]DOTA2上海特级锦标赛 Ehome战队宣传片
2016/03/03 DOTA
[03:42]2018完美盛典-《加冕》
2018/12/16 DOTA
利用python微信库itchat实现微信自动回复功能
2017/05/18 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
Python Numpy库datetime类型的处理详解
2019/07/13 Python
Python astype(np.float)函数使用方法解析
2020/06/08 Python
python用700行代码实现http客户端
2021/01/14 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
Luxplus瑞典:香水和美容护理折扣
2018/01/28 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
施工材料员岗位职责
2014/02/12 职场文书
绿化工程实施方案
2014/03/17 职场文书
跑操口号
2014/06/12 职场文书
意外事故赔偿协议书
2016/03/22 职场文书
Python基础之Socket通信原理
2021/04/22 Python
Python手拉手教你爬取贝壳房源数据的实战教程
2021/05/21 Python
python编程简单几行代码实现视频转换Gif示例
2021/10/05 Python
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
Python 一键获取电脑浏览器的账号密码
2022/05/11 Python