nextTick如何使用

左手的ㄟ右手 2023-09-27 11:46 78阅读 0赞

1.$nextTick()函数的定义：  
在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。所以就衍生出了这个获取更新后的DOM的Vue方法。所以放在Vue.nextTick()回调函数中的执行的应该是会对DOM进行操作的 js代码；

通俗化来讲：就是对于我们从js中修改了DOM绑定的数值，然后虽然页面上DOM的数值发生了改变，但是我们从方法里面中获取dom的数值并没有发生改变，这时候就需要nextTick()函数来帮助我们在方法里面及时获得更新后的DOM的数值！！

举个例子：

<template>
        <div>
            <h1 ref="hello">{
        {
         value }}</h1>
            <button @click = "getll()" >改变数值</button>
            <el-button @click = "elButton">el-button</el-button>
            
    
        </div>
    </template>
    
    <script>
        export default {
        
    
            data() {
        
                return {
        
                    value: "Hello World ~",
                }
            },
            methods:{
        
                elButton(){
        
                    console.log("测试方法过来了没")
                },
                TestThis(){
        
                    console.log(this.TestFilter())
                },
                getll() {
        
    
                    this.value = "你好啊";
                    console.log("同步获取数值");
                    console.log(this.$refs["hello"].innerText); // Hello World ~
                    // 如果直接这样打印，打印出来的结果不是我们想要的  "你好啊";，而是 Hello World ~，因为this.value = ‘ Hello World ~’ 它是异步的
                    this.$nextTick(() => {
        
                        console.log("nextTick获取数值");
                        console.log(this.$refs["hello"].innerText); // 你好啊
                    });
                    console.log("测试异步获取完成后的数值"); // Hello World ~
                    console.log(this.$refs["hello"].innerText); // Hello World ~
    
               }
            }
    
        }
    </script>
    
    <style scoped>
    
    </style>

（1）初始页面：

![在这里插入图片描述][d90762da71414c26b7ae144a3676765c.png]  
（2）点击改变数值后：  
![在这里插入图片描述][571ca13f35044c51bb81651960a4e7cc.png]

注意观察控制台的打印信息：当我们在nextTick()函数中的绑定的数值会立即获取到，不在这个函数内的两个输出语句度无法获取到更新的DOM对象，因此它的用处已经很明显了！！  
大家可以试一下，了解一下怎么用的就可以了！！具体原理大家可以继续百度！！

[d90762da71414c26b7ae144a3676765c.png]: https://img-blog.csdnimg.cn/d90762da71414c26b7ae144a3676765c.png
[571ca13f35044c51bb81651960a4e7cc.png]: https://img-blog.csdnimg.cn/571ca13f35044c51bb81651960a4e7cc.png