vuejs的this.$nextTick()

最新推荐文章于 2023-02-17 11:58:32 发布
最新推荐文章于 2023-02-17 11:58:32 发布
阅读量616 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Stitch_xiao/article/details/121242009
版权

Vue DOM 异步更新 $nextTick 数据绑定
关键词由CSDN通过智能技术生成

首先来看问题：当点击按钮的时候执行msgFn这个方法，毋庸置疑，此时视图的值应该为3333，按照常理，此时后台打印出来的也应该是3333。

但是事实是这样吗？我们接着往下看。

 这是打印出来的DOM值：

 视图显示的却是3333，然而打印出来的确实原先的“前端小姐姐”。

这是什么原因呢？

其实很简单，就是vue执行DOM的更新是异步的，不是我们想的同步执行。在vue中，只要观察到data里面的数据改变了，它就会把更新DOM这件事缓存在事件模型（事件循环）里面。它这样做是为了避免不必要的多次计算和多次重复的操作（比如重复点击）。所以在数据更新后，它不会立即执行，只会等到清空这个事件后才会去执行。

如果不想被vue这种事件支配，而是想立即更新，或者立即更新后搞点什么事情，那么我们就要用到this.$nextTick()这个方法。

作用：处理vue中DOM的异步更新

简单理解：当数据更新时，在DOM渲染之后，会自动执行callback函数

用法：this.$nextTick(callback) 

使用this.$nextTick()后：

js:

 视图和后台：

完结~~~ 

Stitch_xiao
关注
vue修改数据后没有更新新值($nextTick函数）
cancan05的博客
01-23 1297
vue修改数据后没有更新新值的情况，要使用$nextTick函数
vuejs使用watch和this.$nextTick渲染页面后调用函数
Wisdom—Yoga—TaciturnKnight（WYT）
03-26 8698
vue中通过this.$router.push 动态跳转页面，跳转后参数不同，但跳转到的页面无法获取this.$route.query.id;  查官网资料，使用$nextTick方法，在下次DOM循环之后执行延迟回调，但还是无法获取。查看API使用watch方法，用于观察Vue实例上的数据变动。对应一个对象,键是观察表达式,值是对应回调，再次尝试，运行后发现还是不行。然后在网上发现，通过watc...
Vue.js中this.$nextTick()的使用
weixin_50723416的博客
08-18 314
this.$nextTick() this.$nextTick()将回调延迟到下次DOM 更新循环之后执行。在修改数据之后立即使用它，然后等带DOM更新。它跟全局方法Vue.nextTick一样，不同的是回调的this自动绑定到调用它的实例上。 假设我们更改了某个DOM元素内部的文本，而这时我们想直接打印出这个被改变后的文本是需要DOM更新之后才会实现的，也就好比我们将打印输出的代码放在setTimeout(fn,0)中； <template> <section> &lt
this.$nextTick()
deep_zhuheihei的博客
07-26 84
<template> <section> <h1 ref="hello">{{ value }}</h1> <el-button type="danger" @click="get">点击</el-button> </section> </template> <script> export default { data() { return {
vue.js$nextTick中具体的了解
ufan94的博客
09-11 428
vue.js $nextTick
VUE_数据修改后调用 this.$nextTick
小歪博客
10-28 805
this.$nextTick这个方法作用是当数据被修改后使用这个方法会回调获取更新后的dom再渲染出来 methods：{ testClick() { this.content = '改变了的值' let that = this this.$nextTick(() => { // dom元素更新后执行，因此这里能正确打印更改之后的值 console.log(that.$refs.tar.innerT
理解Vue响应式原理以及this.$set
w_gold_qin的博客
07-13 1059
https://www.jb51.net/article/162232.htm https://baijiahao.baidu.com/s?id=1667581867911645201&wfr=spider&for=pc https://cn.vuejs.org/v2/guide/reactivity.html 前言：其实使用vue的都知道，vue声明在data中的属性都是响应式的，也就是，我们在修改data中的属性时，一般页面都能实时更新。但是由于 JavaScript 的限制，Vue 不
vue项目分析--打开单个的vue页面&单页面应用组件结构仿写&this.$router.push()&vue属性（computed，method，mounted）&devtools
weixin_46045444的博客
10-12 3751
经过分析可以知道项目的显示第一个URL组件是login文件夹下的index.vue login文件夹下的index.vue里使用<script type="text/javascript" src="./index.js"></script>做js处理 login的js文件 可以看出来暴露的接口里有name和data（），mounted（），computed：，mehthod：这五个属性 可以看一下vue的官方技术文档 https://cn.vuejs.org/v2/api/#na
整理Vue项目开发过程中遇到的常见问题2
weixin_41697323的博客
05-08 1492
7style 加scoped问题不起作用，需要在选择器前面增加deep深度选择器才能选中元素
vue.js中ref及$refs的使用方法解析
10-16
我们可以通过this.$refs加上之前在ref属性中设置的字符串来获取这个DOM元素或者组件实例。 如果ref被用在普通的DOM元素上，那么这个引用指向的就是对应的DOM元素。例如，我们可以在一个input输入框上设置ref属性，...
Vue2中this.$nextTick的作用和应用场景
weixin_44867717的博客
12-05 3795
Vue2中this.$nextTick的作用和应用场景 1、Vue中概念：异步更新队列 1.1、Vue异步更新DOM的原理： Vue在观察到数据变化时，并不是直接更新DOM，而是开启一个队列，并且缓存同一轮事件循环中的所有数据改变。在缓冲时会除去重复的操作,等到下一轮事件循环时，才开始更新。 1.2、异步更新队列实现的选择 ： Vue会根据当前浏览器环境优先使用原生的Promise.then和MutationObserver（现已经换为MessageChannel ,是宏任务），如果都不支持，就会采用set
VUE踩坑——this.$nextTick、头条小程序组件传值报错问题
qq_43512769的博客
04-26 2193
头条小程序在使用插件并调用组件方法报错 this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。 延时调取组件中的方法有两种 this.$nextTick(()=>{})（vue.nextTick()） setTimeout(()=>{}) 在执行延时赋值显示组件时，推荐使用第一种，不过有可能在某些小程序等效果
this.$nextTick (callback)方法的分析与使用
Kaite_han的博客
07-19 779
$nextTick 方法简介 $nextTick（callback） 方法的作用，就是当页面上元素被重新渲染（即DOM更新）之后，才会执行回调函数中的代码 $nextTick 方法使用举例 <!-- 此案例是通过 v-if 判断 scope.row.inputVisible（布尔值）来控制显示input框还是button按钮 --> <template slot-scope="scope"> <!-- 输入的文本框 -->
Vue—nextTick对于重置表单的坑
weixin_44097751的博客
02-14 304
Vue—nextTick对于重置表单的坑
vue 中的this.nextTick遇到的问题-工作中的问题
qq_43853213的博客
06-01 635
最近有看了之前一直想解决的bug, 之前在uniapp插件市场中找了一个组件。 然后发现了一个bug 竟然是 this.nextTick 导致的。简单的介绍一下 this.nextTick，将回调延时到 DOM更新之后调用。 数据是同步更新的， 但是DOM是异步更新的，具体的话可以看JS的事件机制，放入队列中更新。有些文章说下面两个代码是可以等价的。 在组件中向获取DOM元素信息，mounted是组件类的生命周期，就是DOM更新之后调用。
vue v-html图片加载后获取高度,解决vue项目获取dom元素宽高总是不准确问题
weixin_34581259的博客
06-04 3034
dom元素内部内容是动态的，重置数据后直接获取宽高总是不准确：this.$refs.editor[0].offsetHeight;原因：重置数据后获取dom元素宽高时，dom元素还未渲染完毕；解决方法：利用Vue.nectTick(callback)this.$nextTick(() => {this.$refs.editor[0].offsetHeight;})Vue.nectTick()...
Vue获取dom宽高的方法，以及不准确的解决方案
qq_53679247的博客
02-17 3643
既然是单线程的，的在某个特定的时刻只有特定代码能被执够行，并阻塞其它的代码。因为当JavaScript线程的正在处理其他JavaScript代码时，其实以已经阻塞了另外的代码，其中包括的setTimeout的定时器部分的实现。其中this.$nextTick是页面渲染完成后的回调函数，当页面渲染完成再进行获取宽高等就比较准确了，但是还是有问题的，如果没用看方法2。这边是用一个setTimeout实现的，其作用是在其他操作执行完毕后才会执行其中的代码，如果有延时的话还会先延时。
vue中的nexttick
热门推荐
weixin_47450807的博客
02-24 1万+
我们了解nexttick之前，我们先来看一个例子。 我们先要每一次都在点击按钮的时候，都进行字符串的累加操作，并且在该函数中计算该字符串所占的高度offsetHeight，但是我们当进行第一次点击的时候，此时打印的结果不符合,因为内容不为空，但是打印出的高度仍然显示为0。 一、思考(会出现上述情况) 因为当我们进行改变数据的时候，此时会进行执行三个过程 1、执行watch函数 2、更新dom元素 3、执行相关的生命周期函数 因为我们在addString方法下面直接打印出offsetHeight的值，这一过
Vue--nextTick--作用/用法/原理
IT利刃出鞘的博客
10-24 589
本文介绍Vue的nextTick的作用、用法、原理。
this.$nextTick 原理
最新发布
08-09
`this.$nextTick` 是 Vue.js 框架中的一个异步回调函数，它主要用于在 DOM 更新完成之后执行回调操作。其原理基于浏览器的事件循环机制，Vue 的数据更新会触发内部的观察者模式，当数据变化后，Vue 会将这些变更放入队列等待渲染。而 `this.$nextTick` 则相当于插入了一个微任务到 JavaScript 的任务队列中，保证了在所有 DOM 更新完成后，这个回调会被立即执行。 举个例子，如果你在一个组件里更改了一个绑定的数据属性，然后尝试立刻获取它的样式或其他依赖DOM的值，可能会发现它们还没有更新。这时可以使用 `this.$nextTick` 来确保回调在DOM已经更新完毕后执行： ```javascript data() { return { message: 'Hello' } } methods: { updateMessage() { this.message = 'World'; this.$nextTick(() => { console.log(this.$el.style.color); // 等待DOM更新后再获取颜色 }); } } ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值