1.vue—nextTick()

最新推荐文章于 2023-12-16 10:00:00 发布

_小郭

最新推荐文章于 2023-12-16 10:00:00 发布

阅读量180

点赞数

分类专栏：学习随笔文章标签： vue.js

本文链接：https://blog.csdn.net/qq_43033251/article/details/104261997

版权

学习随笔专栏收录该内容

1 篇文章 0 订阅

订阅专栏

vue原理：

通过数据驱动视图更新的，该更新的过程是异步的，数据变化视图不一定变化，数据变化后会专门放到一个队列中，视图需要等队列中同一事件循环中的所有数据变化完成之后，再统一进行更新。

1、使用场景

created和mounted钩子函数中，均需要使用 $ nextTick,created()DOM元素没有渲染，所以进行DOM操作无用，在created()中不使用$nextTick报错，mounted不能够承诺所有子组件全部加载完毕，所以需要使用


created(){
    this.$nextTick(()=>{
        this.$refs.myP.innerText = "哈哈，你好";
    });
}

不使用$nextTick，报错


//  Error in created hook: "TypeError: Cannot set property 'innerText' of undefined"
created(){
    this.$refs.myP.innerText = "哈哈，你好";
}

借助第三方插件的时候，插件需要dom动态变化后重新应用该插件


比如：
    轮播图的插件，动态的插入轮播dom元素，dom元素变化

更细视图后，基于新的视图进行操作


new Vue({

    el: '.app',
    
    data: { 
    msg: 'Hello Vue.', 
    msg1: '', 
    msg2: '', 
    msg3: '' 
    },
    
    methods: {
        changeMsg() {
        
            // 修改数据
            this.msg = "Hello world.";
            
            // 数据虽然改变，但是视图还没有更新
            // Hello world.
            this.msg1 = this.$refs.msgDiv.innerHTML; 
            
            // this.$nextTick(callback),回调函数，确保DOM更新之后，执行回调函数
			// Hello Vue.
            this.$nextTick(() => {
                this.msg2 = this.$refs.msgDiv.innerHTML;
            })
            
            // Hello world.
            this.msg3 = this.$refs.msgDiv.innerHTML; 
            
        }
    }
})