vue3中reactive數據被重新賦值后無法雙向綁定的解決
更新時間：2022年05月25日 09:45:32 作者：aliven1
這篇文章主要介紹了vue3中reactive數據被重新賦值后無法雙向綁定的解決，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
reactive數據被重新賦值后無法雙向綁定
這是因為reactive數據被重新賦值后，原來數據的代理函數和最新的代理函數不是同一個，無法被觸發(fā)
推薦寫法
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>以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了vue3路由新玩法useRoute和useRouter，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了關于Vue新搭檔TypeScript快速入門實踐，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要介紹了VUE搭建手機商城心得和遇到的坑，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-02-02
這篇文章主要介紹了Vue切換div顯示隱藏,多選，單選代碼解析,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-07-07
這篇文章主要介紹了Element Popover 彈出框的使用示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-07-07
這篇文章主要為大家介紹了Vue中AXIOS的封裝，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
下面小編就為大家分享一篇Vue.js自定義事件的表單輸入組件方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
vue.config.js中configureWebpack與chainWebpack區(qū)別及說明
這篇文章主要介紹了vue.config.js中configureWebpack與chainWebpack區(qū)別及說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
這篇文章主要為大家詳細介紹了vue3封裝側導航文字骨架效果組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
Vuex是專門為Vuejs應用程序設計的狀態(tài)管理工具,這篇文章主要給大家介紹了關于Vuex狀態(tài)機快速了解與實例應用的相關資料,需要的朋友可以參考下2021-06-06