目录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),
}
}
现在,没必要把数据写到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()这个函数使得我们的变量拥有了双向绑定属性
使用步骤:
1、引入ref
2、给变量附初始值,ref(1)
3、 重点!!!变量的值要用 .value来获取 ,例如a,a.value
这也是和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>
以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。
--结束END--
本文标题: vue3中reactive数据被重新赋值后无法双向绑定的解决
本文链接: https://www.lsjlt.com/news/149647.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0