Vue url参数改变，DOM树未刷新问题---Vue.nextTick(）

vue 组件之间的传值，父组件数值改变，子组件未更新

1、子组件中在mounted中对父组件传的值，进行了判断等相关处理，通过改变子组件自身定义的状态实现效果。此时，父组件值更新，子组件不重新渲染，是因为，父组件值改变子组件不会走mounted的生命周期。
   处理方案：
    使用watch监听父组件传的值，当值改变的时候，进行对应操作。
2、推荐使用：
    子组件中直接使用父组件传的值，如需类型转换或者简单判断，直接通过三目运算符判断使用，就省去了对父组件传值的监听步骤。
接！

今天在写学习卡管理模块的学习卡兑换记录和学习卡管理的兑换记录，遇到了从兑换记录页面，点击进入到学习卡兑换记录时，url地址改变了，但后台请求地址network->Headers未改变。

说明：学习卡兑换记录是要获取所有学习卡兑换记录，而学习卡管理中操作栏的兑换记录只能获取这一行数据（学习卡信息ID对应的记录）

//StudyCardRecord.vue
<template>
  <div class="studycard-record">
    <Form :model="searchCondition" :label-width="70" inline>
      <FormItem label="所属批次">
        <Input v-model="searchCondition.name" placeholder="请输入所属批次关键字" style="width:200px;"></Input>
      </FormItem>
      <FormItem class="search-form-btns">
        <div class="btn-wrap form-item-search">
          <Button icon="ios-search" @click="onSearch">搜索</Button>
          <Button icon="md-undo" @click="onReset">重置</Button>
        </div>
      </FormItem>
    </Form>
    <div class="content">
      <Grid
        ref="grid"
        :columns="tableColumns"
        :data-url="dataUrl"
        :search="searchCondition"
        :rowsForamtter="onRowsForamtter"
        selectType
        keyField="id"
        method="get"
      >
        <template slot-scope="{row}" slot="action">
          <div>
            <Button type="text" size="small" @click="onDelete(row)">删除</Button>
          </div>
        </template>
      </Grid>
    </div>
  </div>
</template>

<script>
export default {
  name: 'studycard-record',
  data() {
    return {
      searchCondition: {
        name: ''
      },
      tableColumns: [
        { title: '卡号', key: 'card_number', align: 'center' },
        { title: '密码', key: 'card_pwd', align: 'center' },
        { title: '所属批次', key: 'study_card', align: 'center' },
        { title: '兑换时间', key: 'used_at', align: 'center' },
        { title: '兑换人', key: 'nickname', align: 'center' },
        { title: '兑换人手机号码', key: 'mobile', align: 'center' }
      ],
      cardID: undefined,
      dataUrl: ''
    }
  },
  created() {
    this.init()
  },
  watch: {
    $route() {
      this.init()
      this.$nextTick(() => {
        this.$refs.grid.searchRefresh()
      })
    }
  },
  methods: {
    onSearch() {
      this.$refs.grid.searchRefresh()
    },
    onReset() {
      this.searchCondition.name = ''
      this.$refs.grid.searchRefresh()
    },
    onRowsForamtter(row) {
      row.forEach(i => {
        i.used_at = this.$pub.timestampToTime(i.used_at)
      })
    },
    init() {
      this.cardID = this.$route.query.id
      this.dataUrl =
        '/api/studyCard/use/log' + (this.cardID ? '/' + this.cardID : '')
    }
  }
}
</script>

• 在Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中.在我实现这两个小功能的时候，created 中init（）只调用了一次。

• 在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作是不起作用的，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted()钩子函数，因为该钩子函数执行时所有的DOM挂载和渲染都已完成，此时在该钩子函数中进行任何DOM操作都不会有问题 。

• 在数据变化后要执行的某个操作，而这个操作需要使用随数据改变而改变的DOM结构的时候，这个操作都应该放进Vue.nextTick()的回调函数中。

Vue 异步执行 DOM 更新。只要观察到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

nextTick()源码解析可参照：https://www.jianshu.com/p/a7550c0e164f