• 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
      })
    }
     
  • 相关阅读:
    springmvc @ResponseBody返回json 报406 not acceptable
    Java连接mysql中遇到的一些问题及解决方法
    nginx + keepalive 实现高可用
    nginx 内置变量
    nginx 防盗链
    nginx 跨域设置
    nginx 跨域设置
    nginx 日志分割
    servlet 下载地址 jcp
    图片压缩 jdk 1.8兼容问题
  • 原文地址:https://www.cnblogs.com/cczlovexw/p/9560215.html
Copyright © 2020-2023  润新知