vue3中给响应式数据赋值操作,以及toRef 和 toRefs区别

hykeda3年前Vue2981

最近在开发vue3时,定义了一个变量:

let form = reactive({});
form = res.items;

这里我将接口获取到的数据直接赋给了form,这样我在表单中:

<el-form-item label="信息标题">
      <el-input v-model="form.title" />
</el-form-item>

这里的title会显示,但是当修改title时数据不会改变,失去了响应式功能

解决方案:

1、使用reactive的话,在里面定义一个对象去存储数据

let form = reactive({
    data:[]
});
form.data = res.items;

使用:

<el-form-item label="信息标题">
      <el-input v-model="form.data.title" />
</el-form-item>

2、可以直接使用ref,定义成数组或者对象

let form = ref([]);
form.value = res.items;

使用:

<el-form-item label="信息标题">
      <el-input v-model="form.title" />
</el-form-item>

这样就实现了数据的响应式。


toRef 和 toRefs作用和区别:

toRef 和 toRefs 可以用来复制 reactive 里面的属性然后转成 ref,而且它既保留了响应式,也保留了引用,也就是你从 reactive 复制过来的属性进行修改后,除了视图会更新,原有 ractive 里面对应的值也会跟着更新,如果你知道 浅拷贝 的话那么这个引用就很好理解了,它复制的其实就是引用 + 响应式 ref

不加 s 和 加 s 的区别就是这样:


toRef: 复制 reactive 里的单个属性并转成 ref

toRefs: 复制 reactive 里的所有属性并转成 ref



相关文章

在写css时不起作用,请排查是否是scoped的问题

在写css的时候,用了框架自带的组件table和card,把table包在了card里面,然后发现table的分页样式出现了问题,查看源码后发现card中写了ul li { margin-left:2...

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

使用vite打包vue项目生成dist文件夹,部署至nginx除了index.html,其他路径都提示404错误的解决

用vue打包生成dist文件夹,然后在本地nginx部署vue项目时只能访问默认页面,刷新和跳转页面都会出问题。原因:只访问了dist文件下的 index.html、index.htm页面,...

vue 中父组件要向子组件通过props传值出现延时处理方案

在开发vue是,父组件要向子组件传值,但是这个值是父组件通过接口请求的,如果直接通过<ABC :abc="data"/>这样在子组件中获取到的abc是为空,因...

vite.config.js配置@

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path f...

Vue3 Pinia持久化存储

一、Pinia持久化存储二、使用步骤1.安装插件代码如下(示例):npm i pinia-plugin-persist --save2.store/index.js代码如...

useRoute,userRouter的用法

 import { useRoute, useRouter } from 'vue-router'; 这里的useRoute是获取传递的变量:const route...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。