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

hykeda3年前Vue3286

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



相关文章

useRoute,userRouter的用法

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

vite+vue 插件/组件集合

自动引入插件:https://github.com/antfu/unplugin-auto-importvue的按需组件自动导入:https://github.com/antfu/unplugin-v...

vite+vue3项目中js方法调用

这这里一创建一个axios接口demo为例:首先安装axios,打开官方GitHub:https://github.com/axios/axios或者访问中文网站:https://www.axios-...

Vue3二维码生成

一、装上插件npm install --save qrcode.vue二,引入插件到页面中import QrcodeVue from ...

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

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

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

学习lodash

官网:https://www.lodashjs.com/ 链接:https://www.jianshu.com/p/d46abfa4ddc9 简介 L...

发表评论    

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