vue 比较对象数组中 获取最小的值

<template>  
  <div>  
    <p>最小的num值是: {{ minNum }}</p>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      // 对象数组  
      items: [{num: 1}, {num: 5}, {num: 3}],  
      // 用于存储最小的num值  
      minNum: null,  
    };  
  },  
  computed: {  
    // 使用计算属性来找到最小的num值  
    // 注意：这里我们没有直接在data选项中计算它，而是使用了一个计算属性  
    // 这样，当items数组发生变化时，minNum会自动更新  
    minNumValue() {  
      // 使用reduce方法找到最小的num值  
      return this.items.reduce((min, item) => {  
        // 如果当前项的num值小于之前的最小值，或者还没有找到最小值（min为null）  
        // 则更新最小值  
        return Math.min(min === null ? item.num : min, item.num);  
      }, null); // 初始值设置为null，或者你可以设置为Infinity以避免null检查  
    }  
  },  
  // 注意：虽然你可以在methods中定义一个函数来做这件事，  
  // 但使用计算属性是更合适的，因为计算属性是响应式的，并且会缓存结果。  
  // 如果你在methods中做这件事，你需要确保在适当的时机（如mounted钩子或事件处理函数中）调用它，  
  // 并且可能需要将结果存储在data属性中以便在模板中使用。  
};  
</script>  
  
<!-- 注意：在模板中，我们使用计算属性minNumValue来显示最小的num值，  
     而不是直接在data中定义的minNum，因为我们实际上没有使用minNum来存储计算结果。  
     但是，为了与你的问题保持一致，我将计算属性的名称改为了minNum，并在模板中使用了它。 -->  
  
<!-- 修改后的计算属性名称与模板中的使用保持一致 -->  
<script>  
// ...（上面的代码，除了将minNumValue改为minNum）  
computed: {  
  minNum() {  
    // ...（与之前相同的reduce逻辑）  
  }  
}  
// ...（其余的代码）  
</script>