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

 更新时间:2022年05月25日 09:45:32   作者:aliven1  
这篇文章主要介绍了vue3中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>

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • 分享一个基于Ace的Markdown编辑器

    分享一个基于Ace的Markdown编辑器

    相信开发中或多或少都会有使用md的时候。那么一个简易的md编辑器显得尤为重要,如果想要在自己的项目中添加一个md编辑器,那么不妨来看看这篇文章
    2021-10-10
  • element-ui使用导航栏跳转路由的用法详解

    element-ui使用导航栏跳转路由的用法详解

    今天小编就为大家分享一篇element-ui使用导航栏跳转路由的用法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新

    这篇文章主要介绍了vue实现歌手列表字母排序,下拉滚动条侧栏排序实时更新,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-05-05
  • 解决在Vue中使用axios用form表单出现的问题

    解决在Vue中使用axios用form表单出现的问题

    今天小编就为大家分享一篇解决在Vue中使用axios用form表单出现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • vue的路由动画切换页面无法读取meta值的bug记录

    vue的路由动画切换页面无法读取meta值的bug记录

    这篇文章主要介绍了vue的路由动画切换页面无法读取meta值的bug记录,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-05-05
  • 解决v-model双向绑定失效的问题

    解决v-model双向绑定失效的问题

    这篇文章主要介绍了解决v-model双向绑定失效的问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-04-04
  • Vue中以HTML形式显示内容并动态生成HTML代码的方法

    Vue中以HTML形式显示内容并动态生成HTML代码的方法

    有的时候我们想在vue中直接显示一个html的网页,如果用富文本方式,那么内容就会太多,那么怎么处理呢?这篇文章主要给大家介绍了关于Vue中如何以HTML形式显示内容并动态生成HTML代码的相关资料,需要的朋友可以参考下
    2024-03-03
  • vue+elementUi图片上传组件使用详解

    vue+elementUi图片上传组件使用详解

    这篇文章主要为大家详细介绍了vue+elementUi图片上传组件的使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-08-08
  • vue+element实现动态加载表单

    vue+element实现动态加载表单

    这篇文章主要为大家详细介绍了vue+element实现动态加载表单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • vue.js初学入门教程(2)

    vue.js初学入门教程(2)

    这篇文章主要为大家详细介绍了vue.js初学入门教程第二篇,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11

最新评论