vue中的this.$nextTick 到底完成了什么

最新推荐文章于 2024-04-23 08:30:00 发布

Blue-Knight

最新推荐文章于 2024-04-23 08:30:00 发布

阅读量384

点赞数

分类专栏：浅谈Vue2 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_47659811/article/details/123914676

版权

浅谈Vue2 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

this.$nextTick 到底完成了什么

先看一下官网的解释

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

每个字都看的懂但是组合起来就有点蒙了…
在网上看了几篇博客渐渐有了一些自己的理解

前言

Vue生命周期的created()钩子函数是一般是不能进行DOM操作的,因为在created()中挂载阶段还没开始$el现在还拿不到就没办法对DOM进行操作.
如果一定要进行DOM操作就把对DOM进行操作的代码放到Vue.nextTick的回调函数中,与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题

一、nextTick作用

在实际项目中不可避免需要,这时候要就可以用nextTick 实现所想的效果

二、使用

1.示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <div @click="currentBut" ref="test">{{message}}</div>
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: '蓝骑士'
        },
        created() {
            console.log(this.$refs.test)
            this.$nextTick(function() {
                console.log(this.$refs.test)
            })
        },
        methods: {
            currentBut() {
                console.log(this.$refs.test)
            }
        }
    })
</script>
</html>

以上例子运行,第一个打印的是什么? ----------------第二个第二个运行打印的什么?
undifande
<div>蓝骑士</div>

在这里插入图片描述
在created中第一次就拿不到dom里面的数据但是使用了$nextTick之后就能拿到这个元素了

2 示例二

上面那个例子如果还不清楚,再看看这个

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
		  <div ref="test1">{{message}}</div>
		  <div v-if="message1">第一个 $nextTick: {{message1}}</div>
		  <div v-if="message2">第二个 $nextTick: {{message2}}</div>
		  <div v-if="message3">第三个 $nextTick: {{message3}}</div>
		  <button @click="currentBut">点击</button>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script>
		var app = new Vue({
		        el: '#app',
		        data: {
		            message: '蓝骑士',
					message1: '',
					message2: '',
					message3: '',
					
		        },
		        created() {
		        },
		        methods: {
		            currentBut() {
						this.message="Blue-Knight"
						this.message1=this.$refs.test1.innerHTML
						this.$nextTick(()=>{
							this.message2=this.$refs.test1.innerHTML
						})
						this.message3=this.$refs.test1.innerHTML
		            }
		        }
		    })
	</script>
</html>

设想一下在按钮单击后会显示成什么样子?

答案出现
第一次单击
单击第一次的效果
是不是跟你设想的不一样

第二次单击

二次单击的效果
为什么第二次才是这个样子的

vue实例数据虽然发生了变化,但是dom不会立刻发生改变,所以以此会产生一些问题 nextTick就可以解决以此引发的数据不同步问题

总结

通过这两个dom 你应该知道this.$nextTick到底做了什么了,

Blue-Knight

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
vue中的this.$nextTick 到底完成了什么

this.$nextTick 到底完成了什么先看一下官网的解释将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。每个字都看的懂但是组合起来就有点蒙了…在网上看了几篇博客渐渐有了一些自己的理解文章目录this.$nextTick 到底完成了什么前言一、nextTick作用二、使用1.示例2 示例二总结前言Vue生命周期的created()钩子函数是
复制链接

扫一扫