Vue异步更新视图

问题:
IS_PREORDER绑定了$data属性的IS_PREORDER


...

  
    
      {{preOrderCount}}
    
  

绑定了secondLoad()事件,该事件先是,改变IS_PREORDER的值,然后调用loadDataList函数

secondLoad() {
    this.IS_PREORDER = '1'
    this.loadDataList()
    })
}

本来的想法是,点击td事件之后改变IS_PREORDER的值,将改变后的值作为数据接口的入参;然而,出现了以下情况,在发送请求前打印出查询参数,发现IS_PREORDER页面中对应的input的值仍为空,但通过打断点知道此时data属性里的IS_PREORDER的值是已经改变了的,且IS_PREORDER值为‘1’。等到执行ajax的回调时,IS_PREORDER对应的input的value才改变。
可以说是,视图的更新与data的更新不一致,且是晚于data的更新的。(IS_PREORDER有提前在data属性中声明)

loadDataList() {
    var url = "${contextPath}/getPageAjax/SOS_ORDER_query/CoreRequest.mc";
    console.log($('#SosOrder-list-form').serialize()) // data属性的IS_PREORDER为‘1’,但视图未更新
    var data = $('#SosOrder-list-form').serialize() + '&start=0&sortType=desc&sortName=CREATE_TIME&pageNo=1&pageSize=1000'
$.ajax({
        url: url,
        data: data
    }).done(res = >{
        this.dataList = res.datas 
        console.log($('#SosOrder-list-form').serialize()) // IS_PREORDER为1
    })
}

查了许多资料,直到看了这篇文章Vue异步更新队列及nextTick才找到原因。
原来Vue的dom更新是异步的,当数据发生变化,vue并不是里面去更新dom,而是开启一个队列。跟JavaScript原生的同步任务和异步任务相同。
Vue在一个同步任务过程中是不会去更新渲染视图,而是在同步任务(事件循环队列)执行完毕之后,在主线程的同步执行完毕,读取任务队列时更新视图。
这个机制对于页面性能是非常重要的,因为我们要是每操作一个数据就更新一次视图,那么在性能上会非常差。而如果是在一次任务执行完毕之后更新视图,可以避免特别多的重复操作。

在开发过程中,我们很容易遇见需要先渲染数据然后操作dom,这时候就要使用vue提供的nextTick函数。
这个函数就是有了数据之后,渲染完成之后会执行,也就是说当你需要数据先渲染,然后去操作渲染完成之后的dom,要把操作dom的逻辑写在这个函数里面。

所以,我需要把我的secondLoad函数写成下面这样:

secondLoad() {
    this.IS_PREORDER = '1'
    this.$nextTick(function(){
         this.loadDataList()
    })
}

你可能感兴趣的:(Vue异步更新视图)