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

hykeda1年前Vue1141

最近在开发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



相关文章

element-plus 中的Switch开关 注意点

在使用Switch开关时,发现v-model可以绑定boolean / string / number 三种类型的数据,默认绑定的是布尔型。但是后台返回的数据是数字形型的,0或1const ...

直接在浏览器中使用 vue3+element-plus中icons的方法

首先引入文件,如果用cdn的方式:<script src="//unpkg.com/@element-plus/icons-vue"></script&...

useRoute,userRouter的用法

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

vite.config.js配置@

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

vue3 拖拽插件 vue.draggable.next

官网地址:https://github.com/SortableJS/vue.draggable.next安装:npm i -S vuedraggable@next引入插...

发表评论    

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