zoukankan      html  css  js  c++  java
  • vue中的nextTick

    ​ 今天在浏览elementUI官网时,又一次看到了nextTick,其实nextTIck我已经不是第一次看到了,但之前都没怎么弄懂,这次决定好好研究一番……

    异步说明

    • vue是异步执行DOM更新的。vue实现响应式并不是数据发生改变之后DOM立即变化,而是按一定的策略进行DOM更新

    示例说明

    <div id=app>
      <div id="div" v-if="showDiv">我是显示文本</div>
      <button @click="showAndGetText">获取内容</button >
    </div>
    <script>
    var app = new Vue({
      el: '#app',
      data () {
        return {
          showDiv : false
        },
        methods: {
          showAndGetText () {
            this.showDiv  = true
            let text = document.getElementById('div').innerHTML
            console.log(text)
          }
        }
      }
    })
    </script>
    
    

    在该示例中,控制台会抛出一个innerHTML of null的错误,这是由于此时页面并未完成渲染,它并没有获取到这个div元素。

    在vue中,并不是数据一更新,DOM就立即更新,页面立即渲染,而是当一个事件循环结束后,DOM才会完成更新,页面才会成功渲染;

    如通过一个for循环改变一个数据,即使这个for循环100次,DOM也只会在第100次时才更新,而不是循环100次,DOM就更新100次。

    在本次示例中,若想成功获取到这个div元素,就需引入今日主角"nextTick"

    nextTick的定义

    • 在下次DOM更新循环结束后执行延迟回调(局部刷新)。在修改数据之后立即使用这个方法,即可获取到更新后的DOM

    上一示例结合nextTick使用

    • 通过this.$nextTick()调用的代码直接进入下一个tick,相对于下一个tick,当前tick中的DOM已完成更新。
    showAndGetText () {
        this.showDiv  = true
        this.$nextTick(()=>{
            let text = document.getElementById('div').innerHTML
            console.log(text)
        }) 
    }
    

    成功显示出这个div元素的文本信息

  • 相关阅读:
    Makefile编写基础知识总结
    Linux开发基础篇开发环境搭建
    较常用的Linux 命令技巧
    Linux socket实现非阻塞型通信
    VirtualBox linux 挂载共享Windows文件夹
    Struts2 注解基础
    DB2 Error Code: 1218, SQL State: 57011
    半小时内使用vim的常用命令,以及平时使用的感慨
    vim的一些配置。
    link的属性media的用处
  • 原文地址:https://www.cnblogs.com/jincanyu/p/14504985.html
Copyright © 2011-2022 走看看