zoukankan      html  css  js  c++  java
  • this.$nextTick()的用法

    概念

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

    应用场景

    • 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中

    created()钩子函数执行的时候DOM 其实并未进行任何渲染,而此时进行DOM操作无异于徒劳,所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数,因为该钩子函数执行时所有的DOM挂载和渲染都已完成,此时在该钩子函数中进行任何DOM操作都不会有问题 。

    • 在数据变化后要执行的某个操作,而这个操作需要使用随数据改变而改变的DOM结构的时候,这个操作都应该放进Vue.nextTick()的回调函数中。
    示例
    export default {
        mounted() {
                console.log(11)
    
                this.$nextTick(()=>{     
                        console.log(22)              
                }) 
    
                console.log(33)     
        }
    }
    
    //输出结果
    // 11
    // 33
    // 22

     

     

  • 相关阅读:
    5-把自己的系统刷到开发板
    4-构建网络文件系统
    ipc
    advio
    pthread
    signal
    process_control
    python3.6+selenium_Testsuits测试套件
    python3.6+selenium_多个测试用例
    jQuery的九类选择器
  • 原文地址:https://www.cnblogs.com/maogu2/p/14483800.html
Copyright © 2011-2022 走看看