一、使用ref

1. 引入

从vue里面引入ref函数

import {defineComponent, onMounted, ref} from 'vue';

2. 定义ref变量

从vue里面引入ref函数

 const ebooks = ref();

3. 赋值+.value

 ebooks.value = data.content;

4. return 返回值

在setup结尾处return 返回值

 return {ebooks};

5. 将数据渲染到页面

 {{ebooks}}

二、使用reactive 和 toRef

1. 引入

从vue里面引入reactive 和 toRef函数

import {defineComponent, onMounted, ref,reactive,toRef} from 'vue';

2. 定义reactive变量

从vue里面引入reactive函数

const ebooks1 = reactive({books: []});

3. 赋值变量.对象

 ebooks1.books = data.content;

4. return 返回值

在setup结尾处return 返回值

 return {booklist : toRef(ebooks1,'books')};

5. 将数据渲染到页面

 {{booklist }}

三、效果图+源码

3.1. 效果图

3.2. 源码

<template><a-layout><a-layout-sider width="200" style="background: #fff"><a-menumode="inline"v-model:selectedKeys="selectedKeys2"v-model:openKeys="openKeys":style="{ height: '100%', borderRight: 0 }"><a-sub-menu key="sub1"><template #title><span><user-outlined/>subnav 1</span></template><a-menu-item key="1">option1</a-menu-item><a-menu-item key="2">option2</a-menu-item><a-menu-item key="3">option3</a-menu-item><a-menu-item key="4">option4</a-menu-item></a-sub-menu><a-sub-menu key="sub2"><template #title><span><laptop-outlined/>subnav 2</span></template><a-menu-item key="5">option5</a-menu-item><a-menu-item key="6">option6</a-menu-item><a-menu-item key="7">option7</a-menu-item><a-menu-item key="8">option8</a-menu-item></a-sub-menu><a-sub-menu key="sub3"><template #title><span><notification-outlined/>subnav 3</span></template><a-menu-item key="9">option9</a-menu-item><a-menu-item key="10">option10</a-menu-item><a-menu-item key="11">option11</a-menu-item><a-menu-item key="12">option12</a-menu-item></a-sub-menu></a-menu></a-layout-sider><a-layout-content:style="{ background: '#fff', padding: '24px', margin: 0, minHeight: '280px' }"><pre>{{ebooks}}</pre><pre>{{booklist}}</pre></a-layout-content></a-layout>
</template><script lang="ts">import {UserOutlined, LaptopOutlined, NotificationOutlined} from '@ant-design/icons-vue';import axios from 'axios';import {defineComponent, onMounted, ref,reactive,toRef} from 'vue';export default defineComponent({name: 'Home',components: {UserOutlined,LaptopOutlined,NotificationOutlined,},setup() {console.log('setup');//使用ref函数const ebooks = ref();//使用reactive函数 定义接收返回对象的变量以及类型const ebooks1 = reactive({books: []});//声明周期函数onMounted(() => {console.log('onMounted')axios.get("http://localhost:8888/ebook/list?name=Spring").then((response) => {const data = response.data;// 使用ref 接收返回值ebooks.value = data.content;//使用reactive 接收返回值ebooks1.books = data.content;console.log(response);});});return {// 使用ref 将返回值返回ebooks,//使用reactive 将返回值返回booklist : toRef(ebooks1,'books')};}});
</script>