文章目錄

• • • • • 一、使用ref
        • • 1. 引入
          • 2. 定義ref變量
          • 3. 賦值+.value
          • 4. return 返回值
          • 5. 將數據渲染到頁面
        • 二、使用reactive 和 toRef
        • • 1. 引入
          • 2. 定義reactive變量
          • 3. 賦值變量.對象
          • 4. return 返回值
          • 5. 將數據渲染到頁面
        • 三、效果圖+源碼
        • • 3.1. 效果圖
          • 3.2. 源碼

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

總結

以上是生活随笔為你收集整理的Vue3.x 使用ref和reactive、toRef的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。