一、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>

二、关注点分离，把相关的代码提取到独立的文件里

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
  }
}