vdom例子

之前一直使用Vue来做项目，然后需要实现一个查询和获取全部结果的功能，样式如下：
一开始加载全部退款结果，然后我们可以输入条件进行查询（eg：输入操作者姓名）。当查询之后我们点击全部按钮，需要使查询条件置空，显示全部内容。并且当我们下一次进入该页面之后，需要加载上次的结果。 例如如果我们上次用操作者姓名为张三进行查找，这时我们去别的页面然后回来进入此页面，则呈现张三查询结果。如果我们先用张三进行查询然后点击全部按钮，则我们去别的页面然后回来进入此页面后，呈现全部的结果。

先放关键代码，解释原因之后其余部分代码放在片尾。

将所有的查询条件都放入searchOrderForm里面，不管是执行查询还是全部操作，将全部视为查询条件为空的查询，最终都执行refresh函数，只是改变searchOrderForm参数。

  let searchOrderForm = {
    orderId: "",
    cancelType: "",
    refundStatus: "",
    userName: "",
    flightNo:"",
    beginTime:"",
    endTime:"",
    page:"",
    size:""
  };

点击“查找”按钮之后执行的函数

let search = function(){
    this.refresh(1)
};

点击“全部”按钮之后执行的函数

let searchAll = function () {
    for(let key in this.searchOrderForm){
      this.searchOrderForm[key] = ''
    }
    this.refresh(1)
}

关键便在查询语句上，一开始是这么写的，发现会出现假如先用张三进行查询，然后点击全部按钮之后显示全部结果，打开别的页面再返回该页面时，仍显示张三的结果而不是全部结果。

let searchAll = function () {
    this.searchOrderForm = {
      orderId:"",
      userName:"",
      flightNo:"",
      beginTime:"",
      endTime:""
    }
    this.refresh(1)
}

因为第一种方法是修改对象属性，后面那个是赋予新对象。如果是赋予新对象的话，就把之前的对象丢掉了，vdom就无法响应数据。

查询的HTML代码

<div
      style="min-width: 1280px"
      class="flex-row">
      <div class="flex-row order-search">
        <div class="item">
          <input
            v-model="searchOrderForm.orderId"
            type="text"
            maxlength="9"
            placeholder="订单号">
        </div>
        <div class="item">
          <input
            v-model="searchOrderForm.flightNo"
            type="text"
            maxlength="6"
            placeholder="航班号">
        </div>
        <div class="item">
          <input
            v-model="searchOrderForm.userName"
            type="text"
            maxlength="6"
            placeholder="操作员姓名">
        </div>
        <div class="item">
          <select v-model="searchOrderForm.refundStatus">
            <option value = "">退款状态</option>
            <option
              v-for="(value,key) in refundStatusParsed"
              :value="key"
              :key="key"> {{ value }}
            </option>
          </select>
        </div>
        <div
          class="item"
          title="退款时间">
          <input
            v-timereset
            v-timecompare:[searchOrderForm].beginTime.endTime="0"
            v-model="searchOrderForm.beginTime"
            type="datetime-local"
            @focus="startTimeFocus"
          >
        </div>
        <div
          class="item"
          title="退款时间">
          <input
            v-timereset
            v-timecompare:[searchOrderForm].beginTime.endTime="1"
            v-model="searchOrderForm.endTime"
            type="datetime-local"
            @focus="endTimeFocus"
          >
        </div>
      </div>
      <div>
        <button
          class="white shadowed big item"
          @click="search">查找
        </button>
        <button
          class="theme-primary big item"
          @click="searchAll">全部
        </button>
      </div>
    </div>