zoukankan      html  css  js  c++  java
  • $nextTick()的理解

    说实话,这个$nextTick()这个的用法之前一直都没有搞懂,看了很多篇博客,$nextTick是用来知道什么时候domg更新完成的,

    vue实现响应式并不是数据发生变化后dom立即变化,而是按照一定的策略来进行dom更新。

    $nextTick是在下一次dom更新循环结束之后执行延迟回调,在修改数据之后使用这个方法,立即更新dom.

    关于这点可以好好的看下vue官方的异步更新队列这部分的内容。

    下面可以来看两个例子:

    div id="app">
    <div v-if="showText" id="text">想要知道这段文字写的是什么?</div>
    <button @click="clickMe">点我试试看就能知道那段隐藏的文字写的是什么了?</button>
    </div>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script>
    //利用定时器的方法获取
    new Vue({
    el:'#app',
    data:{
    showText:false
    },
    methods:{
    clickMe:function(){
    this.showText=true;


    var text=document.getElementById('text').innerHTML;
    alert(text);

    }
    }
    })

    如果我们这样写你会发现浏览器会报错 这个错:Uncaught TypeError: Cannot read property 'innerHTML' of null

    至于为什么会抛出这个错误:可以去看下异步队列更新就会明白原因了。

    更改之后的:

    new Vue({
    el:'#app',
    data:{
    showText:false,
    },
    methods:{
    clickMe:function(){
    this.showText=true;
    this.$nextTick(function(){
    var text =document.getElementById('text').innerHTML;
    alert(text);
    })
    }
    }
    })

    以上就是我对$nextTick的理解。

  • 相关阅读:
    LeetCode:387字符串中唯一出现一一次的字符
    LeetCode-79. 单词搜索
    LeetCode-75. 颜色分类
    LeetCode-121. 买卖股票的最佳时机
    LeetCode-58. 最后一个单词的长度
    LeetCode-1103. 分糖果 II
    LeetCode:283. 移动零
    LeetCode:38. 外观数列
    LeetCode:70. 爬楼梯
    获取美拍视频的链接--JS分析
  • 原文地址:https://www.cnblogs.com/zylily/p/9166327.html
Copyright © 2011-2022 走看看