vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決

更新時(shí)間：2022年05月25日 09:45:32 作者：aliven1

這篇文章主要介紹了vue3中reactive數(shù)據(jù)被重新賦值后無法雙向綁定的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

reactive數(shù)據(jù)被重新賦值后無法雙向綁定

這是因?yàn)閞eactive數(shù)據(jù)被重新賦值后，原來數(shù)據(jù)的代理函數(shù)和最新的代理函數(shù)不是同一個(gè)，無法被觸發(fā)

在這里插入圖片描述

vue3數(shù)據(jù)的雙向綁定

一、script setup

現(xiàn)在，沒必要把數(shù)據(jù)寫到data里面，或者是寫一個(gè)setup函數(shù)，再進(jìn)行return出去。

import進(jìn)來的組件，可以直接在頁(yè)面中使用，不再需要vue2的component或者是setup函數(shù)的return了。

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

組件中使用：

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

二、ref() 函數(shù)

ref()這個(gè)函數(shù)使得我們的變量擁有了雙向綁定屬性

使用步驟：

1、引入ref

2、給變量附初始值，ref（1）

3、重點(diǎn)?。?！變量的值要用 .value來獲取，例如a，a.value

三、reactive()函數(shù)

這也是和ref一樣使得我們的變量擁有了雙向綁定屬性, 這個(gè)函數(shù)接收一個(gè)對(duì)象作為參數(shù)

使用步驟：

1、引入ref

2、重點(diǎn)?。?！給變量附初始值，reactive（{value:1}）接收對(duì)象作為參數(shù)的時(shí)候，應(yīng)該這樣寫

打印一個(gè)對(duì)象或者是數(shù)組，根據(jù)控制臺(tái)輸出, 可以看到變量是一個(gè)Proxy掛鉤, 掛在一個(gè)target 對(duì)象上

3、變量的值要用 .value來獲取，例如a，a.value

來一個(gè)通俗易懂的示例：

//HTML結(jié)構(gòu)
<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定義一個(gè)變量，如下：
//let data = ref('')
let lxImges = reactive({ value: [],}//重點(diǎn)?。。。?
fetch("abcd", {
? method: "get",
}).then((res) => {
? //console.log(res);
? lxImges.value = res.data;//重點(diǎn)?。。。?
});
</script>

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: