5.onMounted

新的生命周期函数, 介于beforeCreate和created之间一个声明周期函数, 有两种调用方法

<template>
  <div>
    <ol>
      <li v-for="(item,index) in list" :key="index">{{index+1}}. {{item.name}}</li>
    </ol>
  </div>
</template>
<script>
import { defineComponent, onMounted, ref } from "vue";
import axios from 'axios';
export default defineComponent({
  name: "App", 
  setup() {
    // 定义一个响应式的变量list
    const list = ref([]);
    // 获取数据
    const getList = ()=> {
      axios.get('http://huruqing.cn:3000/api/film/getList').then(res=> {
        // 修改list,页面重新渲染
        list.value = res.data.films;
      })
    }
    // 在声明周期函数里自动调用getList去获取数据
    onMounted(getList);
    return {
      list,
      getList
    };
  },
});
</script>