vue3.0 組合式API(Composition API)

1、setup、ref、onMounted

新的 setup 組件選項在建立組件以前執行

新的 ref 函數使任何響應式變量在任何地方起做用

合式 API 上的生命週期鉤子與選項式 API 的名稱相同，但前綴爲 on

<template>
  <div>
    <div>
      1
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import Api from '../api'

export default {
  setup() {
    const list = ref([])
    
    const getList = () => {
      Api.list().then(res  => {
        console.log(res)
        if (res.code === 200) {
          list.value = res.data
        }
      })
    }

    onMounted(getList)

    return {
      list,
      getList
    }

  },
  data() {
    return {
    }
  }
}
</script>

<style>

</style>

2、關注點分離，把相關的代碼提取到獨立的文件裏

List.vue:

<template>
  <div>
    <div v-for="item in list" :key="item.id">
      {{item.title}}
    </div>
  </div>
</template>

<script>
import useList from './useList'

export default {
  setup() {
    const { list } = useList()

    return {
      list
    }
  },
  data() {
    return {
    }
  }
}
</script>

<style>

</style>

useList.js:

import { ref, onMounted } from 'vue'
import Api from '../api'

export default () => {
  const list = ref([])

  const getList = () => {
    Api.list().then(res  => {
      console.log(res)
      if (res.code === 200) {
        list.value = res.data
      }
    })
  }

  onMounted(() => getList())

  return {
    list,
    getList
  }
}