您好,登錄后才能下訂單哦!
這篇文章主要介紹“Vue3 ref構(gòu)建響應(yīng)式變量失效如何解決”,在日常操作中,相信很多人在Vue3 ref構(gòu)建響應(yīng)式變量失效如何解決問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”Vue3 ref構(gòu)建響應(yīng)式變量失效如何解決”的疑惑有所幫助!接下來,請跟著小編一起來學(xué)習(xí)吧!
在Vue3中使用ref聲明響應(yīng)式變量,同時(shí)用函數(shù)對值進(jìn)行變化,但是無法響應(yīng)式改變值
<template> <p>{{userName}}</p> <button @click='change()'>change</button> </template> <script> //引入定義響應(yīng)式數(shù)據(jù)的函數(shù) import {reactive} from 'vue'; import {ref} from "@vue/reactivity"; //!!!!!注意,這里有個(gè)坑,ref必須是引用自vue,而非@vue/reactivity export default { name: 'App', //為Vue3的新特性提供統(tǒng)一入口,代碼都會在這個(gè)函數(shù)中添加 //在beforecreated之前進(jìn)行,因此無法訪問this,亦即無法訪問data和method setup(){ //定義響應(yīng)式數(shù)據(jù):數(shù)據(jù)變化,模板中渲染會自動刷新 // const obj=reactive({ // userName:'jack', // }); //只定義一個(gè)變量,可以使用ref將變量定義為響應(yīng)式 let userName=ref('jack') console.log(userName); const change=()=> { userName.value='rose' //注意修改的是ref對象的value屬性,但是在template中使用的時(shí)候不需要再加value console.log(userName); } return {userName,change} }, } </script>
不知道為什么,當(dāng)引用為
import {ref} from "@vue/reactivity"
時(shí),就會出現(xiàn)不響應(yīng)的情況,但是只需要改為
import {ref} from "vue"
我們知道 ref 函數(shù)和 reactive 函數(shù)用于實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)性。但是開發(fā)中如何選擇使用 ref 和 reactive 呢?來說說 ref 和 reactive 的區(qū)別。
在 Vue3 版本之前,響應(yīng)數(shù)據(jù)在 data 函數(shù)中定義
<template> <h2>{{ title }}</h2> </template> <script> export default { data() { return { title: "Hello, Vue!" }; } }; </script>
Vue2 會遍歷 data 中的所有屬性,使用 Object.defineProperty 把每個(gè) property 全部轉(zhuǎn)為 getter/setter,getter 用來收集依賴,setter 用來執(zhí)行 notify,發(fā)布更新事件。
Vue2 對每個(gè)屬性創(chuàng)建一個(gè) Dep 對象,作為訂閱發(fā)布模式的中間機(jī)構(gòu)來收集依賴。Vue 追蹤這些依賴,在其被訪問和修改時(shí)通知變更。
Vue3 中引入了 ref,reactive 來創(chuàng)建響應(yīng)式數(shù)據(jù):
<template> <h2>{{ title }}</h2> <h3>{{ data.author }}</h3> <button @click=""changeTitle>修改title</button> </template> <script> import { ref, reactive, toRefs } from "vue"; export default { setup() { const title = ref("Hello, Vue 3!"); // 修改 function changeTitle(){ title.value == "Hello, Vue3!" } const data = reactive({ author: "青年碼農(nóng)", age: "18" }); return { title, data, changeTitle }; } }; </script>
從上面的代碼我們大概可以看出區(qū)別。ref 的作用就是將一個(gè)原始數(shù)據(jù)類型轉(zhuǎn)換成一個(gè)響應(yīng)式數(shù)據(jù),原始數(shù)據(jù)類型共有 7 個(gè),分別是:String、Number、BigInt、Boolean、Symbol、Undefined、Null。但是有個(gè)奇淫技巧,那就是 ref 也可以是對象。后面我們再說。reactive 的作用就是將一個(gè)對象轉(zhuǎn)換成一個(gè)響應(yīng)式對象。
ref:
ref 的作用就是將一個(gè)原始數(shù)據(jù)類型轉(zhuǎn)換成一個(gè)帶有響應(yīng)式特性的數(shù)據(jù)類型。
const title = ref("Hello, Vue 3!");
ref 接收參數(shù)并將其包裹在一個(gè)帶有 value 屬性的對象中返回,然后可以使用該屬性訪問或更改響應(yīng)式變量的值,比如上面的代碼我們使用 count.value 去修改值,如下:
title.value = "Hello, Vue3!"
上面提到了 ref 也是可以接受對象類型
const data = ref({ author: "青年碼農(nóng)", age: "18" });
這種也是可以的,賦值的時(shí)候就會有點(diǎn)別扭了。
data.value.author = "nmgwap";
ref 響應(yīng)式原理是依賴于 Object.defineProperty(),因此如果是對象,還是建議用 reactive。
reactive:
reactive 返回對象的響應(yīng)式副本, 它將解包所有深層的 refs,同時(shí)維持 ref 的響應(yīng)性。一般我們用來實(shí)現(xiàn)對象或者數(shù)組的響應(yīng)性。
const data = reactive({ author: "青年碼農(nóng)", age: "18" });
修改和普通對象沒區(qū)別,視圖會實(shí)時(shí)更新
data.author = "nmgwap"
注意:
ref 是針對原始數(shù)據(jù)類型 和 reactive 是用于對象 這兩個(gè) API 都是為了給 JavaScript 普通的數(shù)據(jù)類型賦予響應(yīng)式特性(reactivity)。
到此,關(guān)于“Vue3 ref構(gòu)建響應(yīng)式變量失效如何解決”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識,請繼續(xù)關(guān)注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。