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相关推荐

vue3中的ref 和 reactive 定义数组
在vue3中,定义响应式数据一般有两种方式:ref 和 reactive 一般来说,我们使用 ref 来定义基本数据类型,使用 reactive 来定义复杂数据类型但是也可以使用 ref 来定义数组 ...
【Vue3】李南江老师讲解--个人笔记（二）ref 和 reactive详解
[vue3笔记之 ref 和 reactive ] 实现响应式数据的方法可以使用 ref,reactive定义响应式数据,本质上就是将传入的数据包装成一个Proxy对象. 使用 reactive 必 ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...
vue3之实现响应式数据ref和reactive
用途 ref.reactive都是vue3提供实现响应式数据的方法 ref() 接受一个内部值,返回一个响应式的.可更改的ref对象,此对象只有一个指向其内部的属性.value ref可以说是简化版的 ...
vue3基础-响应式 API 之 ref 和 reactive
背景我们知道ref函数和reactive函数用于实现数据的响应性. ref 在 Vue 3中,我们可以通过一个新的 ref 函数使任何响应式变量在任何地方起作用,如下所示: import { ref ...
vue3 - ref和reactive的区别
文章搬运自wx60d4764eb475e 的vue3中ref和reactive的区别(系列六) 1. ref和reactive区别: 如果在template里使用的是ref类型的数据, 那么V ...
Vue3 的 ref 和 reactive 问题
如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础 ...
vue3 ref 和 reactive 区别
前言最近学习cloud项目,前端使用到 vue3 + ts 等技术,在写需求过程中遇到响应式数据问题,经百度查找相关笔记,在此记录一下,在实战中成长吧. 问题出现的问题:定义一个默认数组并且 fo ...
Vue3响应式API ref和reactive
在vue3中,有两个重要的api分别是ref 和reactive 使用方法如下 import { reactive, ref } from 'vue';setup(){let student = re ...

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. 源码

Vue3.x 使用ref和reactive、toRef相关推荐

最新文章

热门文章