zoukankan      html  css  js  c++  java
  • vue 修改数据界面没有及时更新nextTick

    使用场景:有些时候,我们使用vue修改了一些数据,但是页面上的DOM还没有更新,这个时候我们就需要使用到nextTick。

    vm.$nextTick( [callback] )

    说明:

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

    this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
       this.doSomethingElse()
    })

        2.1.0 起新增:如果没有提供回调且在支持 Promise 的环境中,则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill,所以如果你的目标浏览器不是原生支持 Promise (IE:你们都看我干嘛),你得自行 polyfill。

    Vue.nextTick()
      .then(function () {
        // DOM 更新了
      })
    nextTick的使用还有个小小的技巧,我们在生命周期mounted里面渲染的时候,不能百分百保证所有的自组件都能被渲染,所以我们可以在mounted里面使用 vm.$nextTick,这样就能确保所有的子组件都能被渲染到了。
    (mounted钩子在服务器端渲染期间不被调用。)
    同样的可以在updated这个钩子做一样的操作。
    mounted: function () {
      this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
      })
    }
     
  • 相关阅读:
    常用正则表达式大全摘录
    非常好用的CSS样式重置表
    Vue2.0 Props双向绑定报错简易处理办法
    kuangbin带我飞QAQ DLX之一脸懵逼
    乘法逆元+快速幂
    kuangbin带我飞QAQ 线段树
    kuangbin带我飞QAQ 最短路
    uva11401:Triangle Counting 递推 数学
    分块
    今日头条”杯2018年湖北省赛(网络赛)
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/9560215.html
Copyright © 2011-2022 走看看