async,await与forEach同时使用时遇到的坑？

最近遇到一个问题，就是当调用后台保存接口时，可以看到数据正常保存成功，但是页面会及时渲染出来？？？
看了一下代码逻辑，多次测试之后再加上网上查到的方法，验证了一个问题，如下：

<template>
  <div>
    <div class="comment">{{ msg }}</div>
    <el-button @click="save">保存</el-button>
  </div>
</template>

<script>
export default {
  name: 'About',
  data() {
    return {
      msg:
        '我很好,但是,\n我想好好学习更多知识,\n哈哈,\n你好:\n我是\n',
      arr: [
        { name: 'lily', age: 20 },
        { name: 'mike', age: 30 },
        { name: 'marry', age: 25 },
      ],
      info: {},
    };
  },
  methods: {
  //这里是模拟逻辑较复杂的情况,方法都会抽出去处理
    save() {
      let res = this.test();
      res.then((item) => {
        console.log(item.isOk, 'item');
        //经测试使用forEach此时打印为undefined,是因为forEach底层源码中是没有await修饰符,但是使用for循环可以打印出数据,所以项目中如果遇到类似的场景尽量使用for,避免摸不到头脑的坑
        if (item.isOk) {
          console.log('????');
          this.msg = 'hello';
        }
      });
    },
    //此方法会处理一些初始化的数据
    async test() {
      this.info = {
        isOK: false,
        msg: '',
      };
      await this.handleData();
      return this.info;
    },
    //实际处理数据的方法
    handleData() {
      //forEach不会等异步执行而是并行
      this.arr.forEach((item) => {
        if (item.name) {
          this.info.isOK = true;
        }
      });
      //for循环会等异步执行
      // for (let i = 0; i < this.arr.length; i++) {
      //   if (this.arr[i].name) {
      //     this.info.isOk = true;
      //   }
      // }
    },
  },
};
</script>

<style lang="less" scoped>
.comment {
  white-space: pre-wrap;//处理换行符
}
</style>