国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue3-04-reactive() 響應(yīng)式失效的三種情況

這篇具有很好參考價值的文章主要介紹了Vue3-04-reactive() 響應(yīng)式失效的三種情況。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方,請大家不吝賜教,您也可以點擊"舉報違法"按鈕提交疑問。

1.替換對象后導(dǎo)致失效

簡單理解 : 變量指向的對象換了,對原來的對象,當(dāng)然沒有了響應(yīng)式的效果了。
    // 聲明 變量
    let obj1 = reactive({name:"第一個對象"})
    // 改變 變量的指向
    obj1 = reactive({name:"第二個對象的屬性"})
    console.log('obj1.name : ',obj1.name)

Vue3-04-reactive() 響應(yīng)式失效的三種情況,Vue3,javascript,vue3,reactive響應(yīng)式失效

2.解構(gòu)之后導(dǎo)致失效

將 reactive() 的對象解構(gòu)成本地變量之后,
直接操作本地變量,是不會影響 原對象的屬性值的。
這個也好理解,可以把解構(gòu)看作是 定義了一個新的普通變量,
修改普通變量的值,當(dāng)然是不會對響應(yīng)式對象造成影響了,它倆根本就不是一個對象。
    // 聲明 變量
    const obj2 = reactive({id:1002,name:"第一個對象"})
    // 解構(gòu)出來 并重新賦值
    let {name,id} = obj2;
    id = 2002;
    name = '本地變量name的值'
    // obj2 不會改變,但是 name 和 id 的值會發(fā)生變化
    console.log('obj2 : ',obj2)
    console.log('name : ',name)
    console.log('id : ',id)

Vue3-04-reactive() 響應(yīng)式失效的三種情況,Vue3,javascript,vue3,reactive響應(yīng)式失效

3.屬性直接作為函數(shù)參數(shù)導(dǎo)致失效

將 reactice() 對象的屬性,單獨作為函數(shù)參數(shù)的時候,
若函數(shù)體內(nèi)對此屬性進(jìn)行了修改,也不會對原屬性產(chǎn)生影響。
可以理解為 是一種【值傳遞】的方式,而非 【引用傳遞】。

補充 : 
    但是,如果函數(shù)的參數(shù)是直接把整個的對象傳進(jìn)去的,則該對象讓然保持響應(yīng)式的狀態(tài)!
    此處可以理解為【引用傳遞】。

屬性作為參數(shù)案例

    // 聲明 變量
    const obj2 = reactive({id:1002,name:"第一個對象"})

    // 定義一個函數(shù)
    const sayHello = (name:string):void => {
        console.log('hello-1 : '+name)
        // 對參數(shù)進(jìn)行修改
        name = '修改后的名稱'
        console.log('hello-2 : ',name)
    } 
    // 調(diào)用函數(shù) 
    sayHello(obj2.name)

  
    // obj2 不會改變,屬性值還是原來的值
    console.log('obj2 : ',obj2)

Vue3-04-reactive() 響應(yīng)式失效的三種情況,Vue3,javascript,vue3,reactive響應(yīng)式失效

整個對象作為參數(shù)


    // 聲明 變量
    const obj2 = reactive({id:1002,name:"第一個對象"})

    // 定義一個函數(shù)
    const sayObj = (abc:any) =>{
        abc.name = 'aaa'
        console.log('對象屬性修改完成')
    }
    
    sayObj(obj2)
   

    // obj2 不會改變,屬性值還是原來的值
    console.log('obj2 : ',obj2)

Vue3-04-reactive() 響應(yīng)式失效的三種情況,Vue3,javascript,vue3,reactive響應(yīng)式失效文章來源地址http://www.zghlxwxcb.cn/news/detail-752524.html

到了這里,關(guān)于Vue3-04-reactive() 響應(yīng)式失效的三種情況的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符,請點擊違法舉報進(jìn)行投訴反饋,一經(jīng)查實,立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • 【Vue3響應(yīng)式原理#01】Reactivity

    【Vue3響應(yīng)式原理#01】Reactivity

    專欄分享:vue2源碼專欄,vue3源碼專欄,vue router源碼專欄,玩具項目專欄,硬核??推薦?? 歡迎各位ITer關(guān)注點贊收藏?????? 以下是柏成根據(jù)Vue3官方課程整理的響應(yīng)式書面文檔 - 第一節(jié),課程鏈接在此:Vue 3 Reactivity - Vue 3 Reactivity | Vue Mastery,本文檔可作為課程的輔助材料,

    2024年02月08日
    瀏覽(17)
  • 【Vue3響應(yīng)式入門#01】Reactivity

    【Vue3響應(yīng)式入門#01】Reactivity

    專欄分享:vue2源碼專欄,vue3源碼專欄,vue router源碼專欄,玩具項目專欄,硬核??推薦?? 歡迎各位ITer關(guān)注點贊收藏?????? 以下是柏成根據(jù)Vue3官方課程整理的響應(yīng)式書面文檔 - 第一節(jié),課程鏈接在此:Vue 3 Reactivity - Vue 3 Reactivity | Vue Mastery,本文檔可作為課程的輔助材料,

    2024年02月08日
    瀏覽(58)
  • vue3-響應(yīng)式基礎(chǔ)之reactive

    vue3-響應(yīng)式基礎(chǔ)之reactive

    reactive() 還有另一種聲明響應(yīng)式狀態(tài)的方式,即使用 reactive() API。與將內(nèi)部值包裝在特殊對象中的 ref 不同,reactive() 將使對象本身具有響應(yīng)性: 「點擊按鈕+1」 「示例效果」 響應(yīng)式對象是 JavaScript 代理,其行為就和普通對象一樣。不同的是,Vue 能夠攔截對響應(yīng)式對象所有屬

    2024年01月16日
    瀏覽(32)
  • 前端Vue篇之Vue3響應(yīng)式:Ref和Reactive

    在Vue3中,響應(yīng)式編程是非常重要的概念,其中 Ref 和 Reactive 是兩個關(guān)鍵的API。 Ref : Ref 用于創(chuàng)建一個響應(yīng)式的基本數(shù)據(jù)類型,比如數(shù)字、字符串等。它將普通的數(shù)據(jù)變成響應(yīng)式數(shù)據(jù),可以監(jiān)聽數(shù)據(jù)的變化。使用 Ref 時,我們可以通過 .value 來訪問和修改數(shù)據(jù)的值。 Reactive :

    2024年04月25日
    瀏覽(25)
  • vue3 reactive包裹數(shù)組無法頁面無法響應(yīng)式

    原代碼如下: 此時removeItem方法運行,打印出historyAccount的值確實被改變了,但是頁面還是沒有變化 原因: 如果你直接通過賦值的方式改變 reactive 對象引用的數(shù)組,是不會觸發(fā)視圖的更新的,應(yīng)該使用 Vue 提供的響應(yīng)式方法來更新響應(yīng)式數(shù)據(jù)。 ?改進(jìn):可以利用splice方法刪除

    2024年04月09日
    瀏覽(33)
  • vue3 ref reactive響應(yīng)式數(shù)據(jù) 賦值的問題

    vue3 ref reactive響應(yīng)式數(shù)據(jù) 賦值的問題

    doing 遇見就記錄,最后更新時間23.8.30 錯誤示范:直接賦值 以數(shù)組為例,對象也是一樣的操作。 ref 定義的屬性等價于 reactive({value:xxx}) ,所以 reactive、ref 直接重新賦值丟失響應(yīng)是因為引用地址變了 正確寫法 方法1: ref.value ,代碼中更為清晰地表明響應(yīng)式數(shù)據(jù) 方法2:包一層

    2024年02月10日
    瀏覽(27)
  • 【Vue3】使用ref與reactive創(chuàng)建響應(yīng)式對象

    【Vue3】使用ref與reactive創(chuàng)建響應(yīng)式對象

    ??????歡迎來到我的博客,你將找到有關(guān)如何使用技術(shù)解決問題的文章,也會找到某個技術(shù)的學(xué)習(xí)路線。無論你是何種職業(yè),我都希望我的博客對你有所幫助。最后不要忘記訂閱我的博客以獲取最新文章,也歡迎在文章下方留下你的評論和反饋。我期待著與你分享知識、互

    2024年02月21日
    瀏覽(24)
  • Vue3通透教程【五】Vue3中的響應(yīng)式數(shù)據(jù) reactive函數(shù)、ref函數(shù)

    專欄介紹: 涼哥作為 Vue 的忠實粉絲輸出過大量的 Vue 文章,應(yīng)粉絲要求開始更新 Vue3 的相關(guān)技術(shù)文章,Vue 框架目前的地位大家應(yīng)該都曉得,所謂三大框架使用人數(shù)最多,公司選型最多的框架,涼哥之前在文章中也提到過就是 Vue 框架之所以火起來的原因,和 Vue 框架相比其他

    2024年01月24日
    瀏覽(27)
  • 避大坑!Vue3中reactive丟失響應(yīng)式的問題

    在vue3中,我們定義響應(yīng)式數(shù)據(jù)無非是ref和reactive。 但是有的小伙伴會踩雷!導(dǎo)致定義的響應(yīng)式丟失的問題。 大錯特錯?。?! 大錯特錯!??! 1.ref 定義數(shù)據(jù)(包括對象)時,都會變成 RefImpl(Ref 引用對象) 類的實例,無論是修改還是重新賦值都會調(diào)用 setter,都會經(jīng)過 reactive 方法

    2023年04月16日
    瀏覽(28)
  • Vue3中的Ref與Reactive:深入理解響應(yīng)式編程

    Vue 3是一個功能強大的前端框架,它引入了一些令人興奮的新特性,其中最引人注目的是 ref 和 reactive 。這兩個API是Vue 3中響應(yīng)式編程的核心,本文將深入探討它們的用法和差異。 在Vue中,響應(yīng)式編程是一種使數(shù)據(jù)與UI保持同步的方式。當(dāng)數(shù)據(jù)變化時,UI會自動更新,反之亦然

    2024年02月08日
    瀏覽(31)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包