Vue异步更新视图

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

<form name="SosOrder-list-form" method="post" class="form-search" action="" id="SosOrder-list-form">
        <input type="hidden" name="STRU_TREE_CODE" value="${param.struTreeCode}"/>
        <input type="hidden" name="SHOP_ID" value="<%=shopId%>"/>
        <input type="hidden" name="BEGIN_CREATE_TIME" value="<%=lastWeek%> 00:00:00" />
        <input type="hidden" name="END_CREATE_TIME"  value="<%=lastWeek%> 23:59:59" />
        <input type="hidden" name="IS_PREORDER" v-model="IS_PREORDER">
</form>
...
<tr>
  <td v-on:click="secondLoad()">
    <a>
      {{preOrderCount}}
    </a>
  </td>
</tr>

<td>绑定了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()
    })
}