Vue3.x 使用ref和reactive、toRef

文章目录

• • • • • 一、使用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的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。