this.$nextTick与this.$set,解决拖拽表格没有刷新问题!

news/2024/5/20 19:53:10

一:this.$nextTick的用法

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样,不同的是回调的 this 自动绑定到调用它的实例上。

原因是,Vue是异步执行DOM更新的,一旦观察到数据变化,Vue就会开启一个队列,然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次,只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOM操作。而在下一个事件循环时,Vue会清空队列,并进行必要的DOM更新。

在异步队列被清除,也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情,就会出现问题。为了在数据变化之后等待 Vue 完成更新 DOM ,可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

简单来说就是你桌上有一个盒子,盒子里面装着一个苹果,我们console.log(this.盒子),会拿到苹果。但是我们给盒子一个点击事件,点击的时候,把苹果变成香蕉,此时我们去加一个console.log(this.盒子),会拿到苹果。再加一个

this.$nextTick(function () {
                    console.log(this.盒子)
                })则会拿到香蕉。

当时我想利用这个方法,解决表格不刷新的问题,但是忽略了另外一个问题,表格的数据是层次深的数组,需要使用深拷贝转换一下,直接赋值的话,只能改变值,不能改变地址。

二:this.$set可以实现动态为data中的对象添加具有响应式效果的属性

用法:
Vue.set( target, key, value )
调用方法:this.$set( target, key, value )
 
//参数
target:要更改的数据源(可以是对象或者数组)
key:要更改或者新增属性的具体数据 (对象的key为键,数组的key为下标)
value :重新赋的值
 
官方解释:向响应式对象中添加一个属性,并确保这个新属性同样是响应式的,且触发视图更新。
 
应用场景:
需要为data对象添加一个新属性时或修改某个属性的值时,却没有更新到视图上,这个时候就用$set解决

 // 给数组层次较深的数据赋值,使用深拷贝,
//另外,使用set把tableData的索引替换成targetObject,解决刷新表格内容!if (resData.Data.length > 0) {const targetObject = JSON.parse(JSON.stringify(this.tableData[this.addIndex]));targetObject.SimuCadres.map(item => {if (item.CadreID == this.addOneCadreID) {item.DisplayInformation = true;}});this.$set(this.tableData, this.addIndex, targetObject);this.$nextTick(() => {this.$refs.tableDataAgain[0].doLayout();});}


https://www.xjx100.cn/news/3118916.html

相关文章

【华为OD题库-048】拔河比赛-java

题目 公司最近准备进行拔河比赛,需要在全部员工中进行挑选。选拔的规则如下: 1.按照身高优先、体重次优先的方式准备比赛阵容 2.规定参赛的队伍派出10名选手 请实现一个选拔队员的小程序。 输入为一个数组,记录了部门人员的身高、体重信息,如…

Android系统分析

Android工程师进阶第八课 AMS、WMS和PMS 一、Binder通信 【Android Framework系列】第2章 Binder机制大全_android binder-CSDN博客 Android Binder机制浅谈以及使用Binder进行跨进程通信的俩种方式(AIDL以及直接利用Binder的transact方法实现)_bind…

Rust多线程任务,发现有些线程一直获取不到锁【已解决】

问题描述 项目中用到rust,其中在多线程中用到了同一个对象的锁,然而发现其中一个线程一直拿不到这个锁。 解决过程 我先是在线程A中加入了sleep方法,这样做的效果就是,比最初好一些,但是拿到锁还是要较长时间&#xf…

PC企业微信http协议接口调用,发送小程序

产品说明 一、 hook版本:企业微信hook接口是指将企业微信的功能封装成dll,并提供简易的接口给程序调用。通过hook技术,可以在不修改企业微信客户端源代码的情况下,实现对企业微信客户端的功能进行扩展和定制化。企业微信hook接口…

Spring不再支持Java8了

在今天新建模块的时候发现了没有java8的选项了,结果一查发现在11月24日,Spring不再支持8了,这可怎么办呢?我们可以设置来源为阿里云https://start.aliyun.com/ 。 java8没了 设置URL为阿里云的地址

《尚品甄选》:后台系统——分类品牌和规格管理(debug一遍)

文章目录 一、分类品牌管理1.1 表结构介绍1.2 列表查询1.3 添加功能1.4 修改功能1.5 删除功能 二、商品规格管理2.1 表结构介绍2.2 列表查询2.3 添加功能2.4 修改功能2.5 删除功能 一、分类品牌管理 分类品牌管理就是将分类的数据和品牌的数据进行关联,分类数据和品…

【智能家居】面向对象编程OOP和设计模式(工厂模式)

面向对象编程 类和对象 面向对象编程和面向过程编程区别 设计模式 软件设计模式按类型分 工厂模式 面向对象编程 面向对象编程(Object-Oriented Programming,OOP)是一种程序设计范式,其中程序被组织成对象的集合,每…

[node] Node.js的Web 模块

[node] Node.js的Web 模块 什么是 Web 服务器?Web的应用架构http使用方式使用 Node 创建 Web 服务器使用 Node 创建 Web 客户端 什么是 Web 服务器? Web服务器一般指网站服务器,是指驻留于因特网上某种类型计算机的程序,Web服务器…