zoukankan      html  css  js  c++  java
  • $nextTick的使用场景

    可能只凭一些概念性的讲解还是无法对nextTick机制有很清晰的了解,还是上个示例来了解一下吧。

    <template>
     <div class="app">
            <div ref="contentDiv">{{content}}</div>
            <div>在nextTick执行前获取内容:{{content1}}</div>
            <div>在nextTick执行之后获取内容:{{content2}}</div>
            <div>在nextTick执行前获取内容:{{content3}}</div>
        </div>
    </template>
    
    <script>
    export default {
     name:'App',
     data: {
      content: 'Before NextTick',
      content1: '',
      content2: '',
      content3: ''
     },
     methods: {
      changeContent () {
       this.content = 'After NextTick' // 在此处更新content的数据
       this.content1 = this.$refs.contentDiv.innerHTML //获取DOM中的数据
       this.$nextTick(() => {
        // 在nextTick的回调中获取DOM中的数据
        this.content2 = this.$refs.contentDiv.innerHTML 
       })
       this.content3 = this.$refs.contentDiv.innerHTML
      }
     },
     mount () {
      this.changeContent()
     }
    }
    </script>
    

      

    当我们打开页面后我们可以发现结果为:

    After NextTick
    
    在nextTick执行前获取内容:Before NextTick
    
    在nextTick执行之后获取内容:After NextTick
    
    在nextTick执行前获取内容:Before NextTick
    

      

    所以我们可以知道,虽然content1content3获得内容的语句是写在content数据改变语句之后的,但他们属于同一个事件循环中,所以content1content3获取的还是 'Before NextTick' ,而content2获得内容的语句写在nextTick的回调中,在DOM更新之后再执行,所以获取的是更新后的 'After NextTick'。

  • 相关阅读:
    自己的思考
    spring MVC整合freemarker
    手把手教你搭建SpringMVC——最小化配置
    深入hibernate的三种状态
    maven 构建slf4j1.7.7之简单测试与源码解析
    maven 构建slf4j1.7.7之简单测试与源码解析
    (转)URI和URL的区别
    Spring缓存机制的理解
    (转)oracle 高水位线详解
    (转)PL/SQL Developer使用技巧、快捷键
  • 原文地址:https://www.cnblogs.com/jxnc/p/15018953.html
Copyright © 2011-2022 走看看