一、第一种ref

1. 案例代码

<script lang="ts">
import {defineComponent, onMounted, ref} from 'vue';
import axios from "axios";export default defineComponent({name: 'Home',setup() {// 定义响应式变量const ebooks = ref();// 生命周期函数onMounted(() => {axios.get("/ebook/list").then((response) => {console.log("后端返回:", response)const data = response.data;// 响应式变量赋值ebooks.value = data.content;});});return {ebooks,}}
});
</script>

2.页面使用

 {{ebooks}}

二、第一种reactive,toRef

2.1. 案例代码

<script lang="ts">
import {defineComponent, onMounted, reactive,toRef} from 'vue';
import axios from "axios";export default defineComponent({name: 'Home',setup() {const ebooks2 = reactive({ books: []});// 生命周期函数onMounted(() => {axios.get("http://localhost:8080/ebook/list").then((response) => {console.log("后端返回:", response)const data = response.data;ebooks2.books = data.content;});});return {ebooksList: toRef(ebooks2,"books"),}}
});
</script>

2.2. 页面使用

 {{ebooks}}