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

hykeda2年前Vue2379

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



相关文章

vue中的h函数使用

一、参数设置h函数接收三个参数。第一个参数:,可以为一个html标签,一个组件,一个异步组件,或者是一个函数式组件。第二个参数:{ Object } Props,与attributes和props,以...

Vue3二维码生成

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

vite+vue 插件/组件集合

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

vuex存储和本地存储(localstorage、sessionstorage)的区别

1. sessionStorage    sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除。   用法: ...

在html5中使用Vue3,并且使用组件形式

有的时候为了使用vue编写一些前端程序,如果直接搭建框架感觉太过庞大了。如何直接在html中使用呢?接下来详细介绍:1)引入Vue,并创建Vue实例在官网上,已经讲得很清楚了,我们可以这样使用&nbs...

vue3 拖拽插件 vue.draggable.next

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

发表评论    

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