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

hykeda2年前Vue2242

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

Vue2.x笔记

vue2.0 开始不能挂载到<html> 或者 <body> 上。 transition 动画过渡的时候,如果是:<transit...

pinia中数据解构

在vuex中获取state中的数据可以解构的方式如下:import { mapState,mapMutations } from "vuex...

学习lodash

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

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

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

Vuex 通俗版教程告诉你Vuex怎么用

最近一直在用vue开发项目,写来写去就是那么些方法,对于简单的项目一些常用的vue方法足以解决,但是涉及到页面状态,权限判断等一些复杂的传值,vuex是必须的。对于vuex也运用一段时间,但是总觉得...

发表评论    

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