this.$nextTick

第一种情况：

页面改变了，但是数据没有改变，我们使用的是this.$nextTick，官网是这样解释的：将回调延迟到下次DOM更新循环之后执行。在修改数据之后立即使用它，然后等待DOM更新。我们通过案例来了解：

<template>
  <div id="app">
    <button @click="change">按钮</button>
    <test ref="test" @change="change" /> 
  </div>
</template>

<script>
import test from "./components/test";
export default {
  name: "App",
    components: {
    test,
  },
  methods: {
    change() {
    this.$refs.test.change()
    },
  },
};
</script>

<template>
  <div>
    <h1 ref="name">{{name}}</h1>
  </div>
</template>
<script>
export default {
  name: "test",
  data() {
    return {
      name: "杨雨",
    };
  },
  methods: {
    change() {
      this.name = "杨雪";
       console.log(this.$refs.name.innerHTML)
    },
  },
};

当我们点击按钮，我们会触发子组件的change事件，修改name，同时我们输出一下此时子组件dom上渲染的name,由于此时dom还没更新，所以我们第一次拿到的结果是这样的：

效果：

页面数据虽然改变了，但是拿到的dom数据还没改变，所以我们需要将输出延迟到dom重新渲染之后，也就是将回调延迟到下次DOM更新循环之后执行，解决办法：

  methods: {
    change() {
      this.name = "杨雪";
      this.$nextTick(()=>{
          console.log(this.$refs.name.innerHTML)
      })
    },
  },

效果：

我记得我当时用到这个是在整组件库时，switch组件中用到的，好像在整element的table表格时，传数据也用到了，当时就是拿到的数据总是第二次穿的数据，包括现在我遇到这种情况，先整一个this.$nextTick试试，但是下面这个情况我用这种方法没有解决

setTimeout

第二种情况：

场景：我在做yy论坛时，请求数据里边有id，content...在列表页放title,点击title，把这个item放到vuex里边，进入详情页，但是这就会出现一个问题，一刷新就没有数据了，所以我干脆存到localStorage里边，取的时候总是为null，所以我捋了一边思路，当我一点击title，就会把content放到浏览器本地存储里边，与此同时，我会进入详情页，在这从浏览器本地存储里边拿数据，但是为什么为null呢？在网上没有找到好的解释，我猜是这样的，肯定是先存数据再拿数据，我们拿到是null，说明我们的操作是先拿再存的，所以我们需要延迟拿的操作，用了setTimeout，解决了，有知道这是为什么的，可以一起讨论