VueJS 3（CDN引入）实现页面初始加载时获取文件列表

关键修改点： #

1. 在setup函数内部直接调用getfiles()方法，因为setup是Vue 3组件的初始化入口，会在页面加载时自动执行
2. 修正赋值逻辑：setup中不存在传统的this上下文，需要直接操作响应式变量的.value属性，把获取到的文件列表赋值给files.value

修改后的完整代码： #

<script>
const {
  createApp,
  ref
} = Vue

createApp({
  setup() {
    const files = ref([]);
    function getfiles() {
      fetch('/api/files.json')
        .then(response => response.json())
        .then(data => {
          // 修正赋值目标，直接操作ref的value属性
          files.value = data.data.files;
        })
        .catch(error => {
          console.error("There was an error! ", error)
      });
    }
    
    // 页面加载时自动调用获取文件列表的方法
    getfiles()

    return {
      getfiles,
      files
    }
  }
}).mount('#app');
</script>

内容的提问来源于stack exchange，提问作者aknd