vue3中reactive数据被重新赋值后无法双向绑定的解决

目录
  • reactive数据被重新赋值后无法双向绑定
    • 推荐写法
  • vue3数据的双向绑定
    • 一、script setup
    • 二、ref() 函数
    • 三、reactive()函数

reactive数据被重新赋值后无法双向绑定

这是因为reactive数据被重新赋值后，原来数据的代理函数和最新的代理函数不是同一个，无法被触发

推荐写法

import {reactive, toRefs} from 'vue'
setup(props, context) {
	const state = reactive({
	            myMessage:'',
	            myDialog: '',
	            myForm: ref(''),
	            searchValue: ref(''),
	            searchType: ref(''),
	            checked: ref(false),
	            actIndex: reactive({ arr: [0] }),
	            dialogTableVisible2: ref(false),
	            dialogTableVisible3: ref(false)
	}）
	return {
	            ...toRefs(state),
	}
}

vue3数据的双向绑定

一、script setup

现在，没必要把数据写到data里面，或者是写一个setup函数，再进行return出去。

import进来的组件，可以直接在页面中使用，不再需要vue2的component或者是setup函数的return了。

<script setup>
import Header from '../home/Header.vue'
import Footer from '../home/Footer.vue'
</script>

组件中使用：

<template>
    <Header></Header>
    <Footer></Footer>
</template>

二、ref() 函数

ref()这个函数使得我们的变量拥有了双向绑定属性

使用步骤：

1、引入ref

2、给变量附初始值，ref（1）

3、 重点！！！变量的值要用 .value来获取 ，例如a，a.value

三、reactive()函数

这也是和ref一样使得我们的变量拥有了双向绑定属性, 这个函数接收一个对象作为参数

使用步骤：

1、引入ref

2、 重点！！！给变量附初始值，reactive（{value:1}） 接收对象作为参数的时候，应该这样写

打印一个对象或者是数组，根据控制台输出, 可以看到 变量是一个Proxy挂钩, 挂在一个target 对象上

3、变量的值要用 .value来获取 ，例如a，a.value

来一个通俗易懂的示例：

//HTML结构
<div class="lx-content">
          <div
            class="lx-img"
            v-for="(item, i) in lxImges.value"
            :key="i"
          >
                <img :src="item.img" alt="" />
          </div>
</div>
<script setup>
import fetch from "../../fetch.js";
import { ref, reactive, onMounted } from "vue";
//如果说需要用ref定义一个变量，如下：
//let data = ref('')
let lxImges = reactive({ value: [],}//重点！！！！
fetch("abcd", {
  method: "get",
}).then((res) => {
  //console.log(res);
  lxImges.value = res.data;//重点！！！！
});
</script>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 对Vue3中reactive的深入理解

    对Vue3中reactive的深入理解

    目录 Vue3 reactive的理解 1.什么是reactive? 2.reactive注意点 Vue3笔记 reactive函数 Vue3 reactive的理解 1.什么是reactive? reactive是Vue3中提供实现响应式数据的方法. 在Vue2中响应式数据是通过defineProperty来实现的. 而在Vue3响应式数据是通过ES6的Proxy来实现的 2.reactive注意点 reactive参数必须是对象(json/arr) 如果给reactive传递了其他对象,默认

  • vue3中的reactive函数声明数组方式

    目录 reacitve函数如何声明一个响应式数组 解决办法 使用reactive包裹数组赋值 需求 代码 reacitve函数如何声明一个响应式数组 如以下案例 <template>   <div>       <div v-for="item in arr" :key="item">            {{item}}       </div>         <button @click="ch

  • setup+ref+reactive实现vue3响应式功能

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类型直接双向绑定,发现变量并不能实时响应.接下来就看看setup如何实现data的响应式功能? 一.ref setup 内的自定义属性不具备响应式能力,所以引入了 ref ,ref 底层通过代理,把属性包装值包装成一个 proxy ,proxy 内部是一个对象,使得基础类型的数据具备响应式能力,使用之

  • 关于vue3中的reactive赋值问题

    目录 vue3 reactive赋值问题 vue3 reactive的坑 清空数组 清空对象 vue3 reactive赋值问题 vue3中直接对reactive整个对象赋值检测不到 let obj = reactive({ name: 'zhangsan', age: '18' }) obj = { name: 'lisi' age: '' } // 上面这样赋值检测不到,因为响应式的是它的属性,而不是它自身 // 如需要对 reactive 赋值 // 方法1: 单个赋值 obj['name

  • vue3的ref,computed,reactive和toRefs你都了解吗

    目录 1.ref 2.computed 3.reactive 4.toRefs 总结 在vue2中,data函数里返回的值直接为响应式的,但在vue3中我们需要使用一些函数才能达到这个效果. setup函数中拿不到vue的this 1.ref 本质为一个函数,输入参数为一个值(原始类型),返回响应式的对象 2.computed 本质为一个函数,输入参数是一个函数,可以将我们需要的值作为输入函数的返回值 例子:实现点击按钮,屏幕上的数加1 <template> <div id='app'&

  • vue3中reactive不能直接赋值的解决方案

    目录 vue3 reactive不能直接赋值 方法 vue3 reactive赋值不响应 (1)多嵌套一层 (2)使用ref (3)用obeject.assign vue3 reactive不能直接赋值 最近比较忙,都没什么时间学习了. 在vue3里,ref和reacitve都可以定义响应式数据,但是两者有所不同.在使用reactive定义复杂结构的响应式数据时,如果你要对其赋值,会丢失其响应性.然后赋值是我们经常进行的操作,那么该怎么解决呢? 方法 1. 改为ref定义 const arr=

  • vue3中reactive数据被重新赋值后无法双向绑定的解决

    vue3中reactive数据被重新赋值后无法双向绑定的解决

    目录 reactive数据被重新赋值后无法双向绑定 推荐写法 vue3数据的双向绑定 一.script setup 二.ref() 函数 三.reactive()函数 reactive数据被重新赋值后无法双向绑定 这是因为reactive数据被重新赋值后,原来数据的代理函数和最新的代理函数不是同一个,无法被触发 推荐写法 import {reactive, toRefs} from 'vue' setup(props, context) { const state = reactive({ my

  • Vue3中reactive函数toRef函数ref函数简介

    目录 reactive函数 用法: toRef函数(了解即可) 用法: ref函数 定义响应式数据 直接定义使用 获取dom 获取组件实例对象 reactive函数 reactive用于定义响应式数据(可以理解 成data的替代品) 用法: 导入 import {reactive} from 'vue' 使用: const state=reactive({ 参数名:参数值 }) 访问: state.参数名 访问: state.参数名 toRef函数(了解即可) toRef:将响应式数据中某个字段

  • Vue3中reactive与ref函数使用场景

    Vue3中reactive与ref函数使用场景

    目录 前言 简单了解 ref & reactive reactive ref reactive 能做的 ref 也能做,并且还是用 reactive 做的 ref 能做,但是 reactive 不能做 总结 前言 如果你使用过 Vue3,你知道的,在 Vue3 中有两个非常常用的响应式 API:reactive 和 ref.它们会把我们想要追踪的数据变成响应式. 而且我们在使用时一直被告知 ref 用于创建基础类型的响应式,也可以创建引用类型的响应式.而对于引用类型,底层也是转换为 reacti

  • vue data变量相互赋值后被实时同步的解决步骤

    数据结构是这样子的 data() { return { title: 'web前端 this data变量相互赋值后被实时同步问题', val_1: 'vue', val_2: '' } } 问题源: 我们在onload()把val_1 赋给 val_2 (或者在用户click时更改也都会出现这个问题) onload() { this.val_2 = this.val_1; } 解决方法: 我们在通过JavaScript把 "val_1" 转换成字符串类型,再JSON.parse,最后

  • Vue3 中的数据侦测的实现

    Vue3 中的数据侦测的实现

    在10月05日凌晨Vue3的源代码正式发布了,来自官方的消息: 目前的版本是 Pre-Alpha , 仓库地址:Vue-next,可以通过Composition API了解更多新版本的信息,目前版本单元测试相关情况vue-next-coverage. 文章大纲: Vue 的核心之一就是响应式系统,通过侦测数据的变化,来驱动更新视图. 实现可响应对象的方式 通过可响应对象,实现对数据的侦测,从而告知外界数据变化.实现可响应对象的方式: getter 和 setter defineProperty

  • vue3使用reactive包裹数组正确赋值问题

    目录 使用reactive包裹数组正确赋值 提供几种办法 vue3的reactive重新赋值无效 vue3官方的文档说明 总结 使用reactive包裹数组正确赋值 需求:将接口请求到的列表数据赋值给响应数据arr const arr = reactive([]); const load = () => { const res = [2, 3, 4, 5]; //假设请求接口返回的数据 // 方法1 失败,直接赋值丢失了响应性 // arr = res; // 方法2 这样也是失败 // arr

  • vue中data数据之间如何赋值问题

    目录 vue data数据之间如何赋值 实现方式 vue Data数据赋值变量语法 vue data数据之间如何赋值 最近我妹突然问我vue的data之间需要进行赋值,这是什么奇葩需求,干嘛不直接自己定义好就好了啊,既然有这种场景,那么我们就需要去解决这种场景. 实现方式 <template>   <div>      <Input v-model="dictValue" placeholder="请输入字典的值" clearable

  • php中导出数据到excel时数字变为科学计数的解决方法

    在数据导出到excel时数字格式不对,一般分为以下两种情况. 1.excel单元格设置长度不够 解决方法: 复制代码 代码如下: //在excel.php文件中 $objActSheet = $objPHPExcel->getActiveSheet(); // 设置 栏目名称 $objActSheet->setCellValue("b1", "卡号"); // 设置列的宽度 $objActSheet->getColumnDimension('b')

随机推荐