赋值和渲染是异步过程，解决方式4种

vue知识点03

赋值和渲染是异步过程，解决方式4种：

四种方式的优先级：

<template>
  <div>
    <div ref="node">模板插值{{ value }}</div>
    <ul>
      <li v-for="(item, index) in list" :key="index">
        {{ item.title }} + {{ item.handler }} + {{ item.state }}
        <button>处理</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: 1002,
      list: Array(10)
        .fill()
        .map((_, i) => {
          return {
            title: "待处理事件0" + i,
            handler: "人员:Aj",
            state: Math.random() > 0.5 ? "Finish" : "New",
          };
        }),
    };
  },
  created() {
    console.log("index created>>>", this.$refs.node);
    // vue框架根据nodejs的nextTick原理实现了一个$nextTick异步回调执行函数
    // tick表示记号--是渲染后的记号
  },

  mounted() {
    console.log("index mounted>>>", this.$refs.node);

    // 以下几个方法的优先级？
    // nextTick === Promise > requrestAnimationFrame > setTimeout

    // 解决赋值异步问题的方案：
    setTimeout(() => {
      console.log("index mounted setTimeout>>>", this.$refs.node.innerHTML);
    });

    requestAnimationFrame(() => {
      console.log("index mounted requestAnimationFrame>>>", this.$refs.node.innerHTML);
    });

    Promise.resolve().then(() => {
      console.log("index mounted Promise>>>", this.$refs.node.innerHTML);
    });
    this.$nextTick(function () {
      console.log("index mounted nextTick>>>", this.$refs.node.innerHTML);
    });

    console.log("index mounted 更改模板插值>>>", this.$refs.node.innerHTML);
    // vue中对赋值和渲染做了一个优化，对于同一个方法中的非异步赋值会进行渲染合并--使用的原理是防抖
    // 给value赋值后，会起一个定时器，然后等是否有新的非异步赋值
    this.value = 20;
    // 发现有非异步赋值，那么会清除之前的定时器，重新起一个定时器，继续观察
    this.list[0] = 10;
    this.list[2] = 100;
    this.list[4] = 1001;
    this.list[6] = 10011;
    // 直到没有异步赋值，然后执行渲染
    console.log("index mounted 更改模板插值>>>", this.$refs.node.innerHTML);
    setTimeout(() => {
      console.log("index mounted setTimeout02>>>", this.$refs.node.innerHTML);
    });

    requestAnimationFrame(() => {
      console.log("index mounted requestAnimationFrame02>>>", this.$refs.node.innerHTML);
    });
    // 表示赋值渲染完成以后再去执行的回调函数
    this.$nextTick(function () {
      console.log("index mounted nextTick02>>>", this.$refs.node.innerHTML);
    });

    Promise.resolve().then(() => {
      console.log("index mounted Promise02>>>", this.$refs.node.innerHTML);
    });

    // 结果：赋值和渲染是异步的。它的延迟是使用Promise实现的
  },

  updated() {
    console.log("index updated>>>", this.$refs.node);
  },
};
</script>