點燈坊

失くすものさえない今が強くなるチャンスよ

使用 onMounted() 讀取 JSON 檔

Sam Xiao's Avatar 2024-01-31

mounted Hook 為 Vue 已經準備好 HTML 的 DOM Nodes，可以開始處理 HTML 時觸發，可在此 Hooks 初始化 State，如讀取 JSON 檔寫入 State，讀取 API 寫入 State … 等。

Version

Vue 3.4

JSON 檔

assets/data.json

[
  { "id": 0, "name": "Apple" },
  { "id": 1, "name": "Google" },
  { "id": 2, "name": "Microsoft" }
]
  • 將 data 儲存在 .json 並放在 assets 目錄下

Composition API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="item in options" :value="item.id" :key="item.id">
      {{ item.name }}
    </option>
  </select>
  <div>{{ selected }}</div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import source from './assets/data.json'

let selected = ref('')
let options = ref([])

onMounted(() => (options.value = source))
</script>

Line 13

import source from './assets/data.json'
  • import：從 assets 目錄 import 進 JSON 檔

Line 16

let options = ref([])
  • ref()：宣告 options state

Line 18

onMounted(() => (options.value = source))
  • onMounted()：在 mounted hook 將 JSON 檔寫入 options state

Options API

<template>
  <select v-model="selected">
    <option disabled value="">Please select one</option>
    <option v-for="item in options" :value="item.id" :key="item.id">
      {{ item.name }}
    </option>
  </select>
  <div>{{ selected }}</div>
</template>

<script>
import source from './assets/data.json'

export default {
  data: () => ({
    selected: '',
    options: []
  }),
  mounted() {
    this.options = source
  }
}
</script>
  • 最後附上相同功能的 Options API 供參考
  • State 宣告在 data() function
  • onMounted() function 改成 mounted() method

Conclusion

  • 因為在 mounted hook 時 HTML 的 DOM Node 已經準備好，此時改變 state，Vue 可接著改變 HTML，其他更早的 hook 都還沒有 DOM Node 可用

# Vue