深入探究 Vue 实例挂载过程与场景 —— 代码实例详解

日常开发记录-正确的prop传参，reduce搭配promise的使用

• 1.正确的prop传参
• 2.reduce搭配promise的使用

1.正确的prop传参

一般会的父组件传参子组件

//父组件
<A :demodata.sync="testData" :listData.sync="testData2"></A>
data () {
    return {
      testData: {
        content: '',
        textStyle: {
          fontsize: '14px',
        },
      },
      testData2: [
        {
          content: '11',
          textStyle: {
            fontsize: '14px',
          },
        },
      ],
    }
  },
//子组件
<el-input v-model="demodata.content"></el-input>

然后子组件v-model，看着和使用起来是可以达到双向绑定的，但是是不推荐这样改的。

//子组件
<template>
  <div>
    {{ demodata }}
    <!-- 不要直接修改 props，使用事件通知父组件更新
使用 .sync 修饰符或 v-model 实现双向绑定,这种感觉单个属性可以，类似“监听”整个对象数组貌似不太行 -->
    <el-input :value="demodata.content" @input="changeInput"></el-input>

    <el-table :data="localData">
      <el-table-column prop="content" label="姓名"></el-table-column>
    </el-table>
    <el-button @click="add">添加</el-button>
  </div>
</template>
<script>
export default {
  props: {
    demodata: {
      type: Object,
      default: () => { }
    },
    listData: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      localData: [...this.listData]
    }
  },
  watch: {
    listData: {
      handler (newVal) {
        this.localData = [...newVal]
      },
      deep: true
    }
  },

  mounted () {
  },
  methods: {
    changeInput (val) {
      this.$emit('update:demodata', {
        ...this.demodata,
        content: val
      })
    }, add () {
      this.localData.push({ name: 'test' })
      this.$emit('update:listData', [...this.localData])
    }

  }
}
</script>

2.reduce搭配promise的使用

  logInOrder (urls) {
      const textPromises = urls.map((url) => {
        return fetch(url)
          .then((response) => response.json()) // 修改为 json() 因为返回的是 JSON 数据
          .then((data) => JSON.stringify(data, null, 2)) // 格式化输出
      })
      console.log('log', textPromises)
      return textPromises.reduce((chain, textPromise) => {
        console.log('chain', chain,'textPromise', textPromise)
        return chain
          .then(() => textPromise)
          .then((text) => {
            console.log('获取到的数据：\n', text)
            console.log('------------------------')
            return text
          })
      }, Promise.resolve())
    },

reduce里面的代码有点没太理解，本来一般也少写，特别是then(() => textPromise)这没太看懂，改下写法：

logInOrder(urls) {
  const textPromises = urls.map(url => {
    return fetch(url)
      .then(response => response.json())
      .then(data => JSON.stringify(data, null, 2));
  });

  return textPromises.reduce((chain, textPromise) => {
    return chain.then(() => {
      return textPromise.then(text => {
        console.log('获取到的数据：\n', text);
        console.log('------------------------');
        return text; 
      });
    });
  }, Promise.resolve());
}

现在看得清楚了多，看一次的执行，就是轮询调用promise.then。而且有return text和没有return text的每次chain也是不一样的。

//调用实例
    const a = this.logInOrder([
      'https://jsonplaceholder.typicode.com/posts/1',
      'https://jsonplaceholder.typicode.com/posts/2',
      'https://jsonplaceholder.typicode.com/posts/3',
      'https://jsonplaceholder.typicode.com/posts/4',
      'https://jsonplaceholder.typicode.com/posts/5'
    ])
    console.log('a', a)

猜猜它的打印结果呢。

有点出乎我的意料。。。，怎么也不会是这个结果嘛感觉。自己想的理想输出是先打印chain，然后是获取到的数据，最后再是a的值，而且a也不应该是一个promise吧。这段代码里有很多的return，第一个return是函数整体的返回值给return出去，第二个return是reduce函数里传递给下一个的，第三个return是为了按顺序将多个异步按顺序串起来。最后一个return是整个函数要返回的值。

之所以现在的打印结果是上面的这个，其实可以当成先执行的同步，再执行到异步代码。把最后的结果换个写法

 async mounted () {
    const a = await this.logInOrder([
      'https://jsonplaceholder.typicode.com/posts/1',
      'https://jsonplaceholder.typicode.com/posts/2',
      'https://jsonplaceholder.typicode.com/posts/3',
      'https://jsonplaceholder.typicode.com/posts/4',
      'https://jsonplaceholder.typicode.com/posts/5'
    ])
    console.log('a', a)
  },
或则 
 mounted () {
   this.logInOrder([
      'https://jsonplaceholder.typicode.com/posts/1',
      'https://jsonplaceholder.typicode.com/posts/2',
      'https://jsonplaceholder.typicode.com/posts/3',
      'https://jsonplaceholder.typicode.com/posts/4',
      'https://jsonplaceholder.typicode.com/posts/5'
    ]).then(a =>{
    console.log('a', a)
    })
  },

打印出来的结果就是我理想中的了。