這篇“Vue3 ref構(gòu)建響應(yīng)式變量失效怎么解決”文章的知識(shí)點(diǎn)大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價(jià)值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來(lái)看看這篇“Vue3 ref構(gòu)建響應(yīng)式變量失效怎么解決”文章吧。

創(chuàng)新互聯(lián)建站從2013年成立，先為鐵嶺等服務(wù)建站，鐵嶺等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鐵嶺企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

vue3 ref構(gòu)建響應(yīng)式變量失效

問(wèn)題描述

在Vue3中使用ref聲明響應(yīng)式變量，同時(shí)用函數(shù)對(duì)值進(jìn)行變化，但是無(wú)法響應(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)一入口，代碼都會(huì)在這個(gè)函數(shù)中添加
  //在beforecreated之前進(jìn)行，因此無(wú)法訪問(wèn)this，亦即無(wú)法訪問(wèn)data和method
  setup(){
    //定義響應(yīng)式數(shù)據(jù)：數(shù)據(jù)變化，模板中渲染會(huì)自動(dòng)刷新
    // const obj=reactive({
    //   userName:'jack',
    // });
    //只定義一個(gè)變量,可以使用ref將變量定義為響應(yīng)式
    let userName=ref('jack')
    console.log(userName);
    const change=()=> {
      userName.value='rose'     //注意修改的是ref對(duì)象的value屬性，但是在template中使用的時(shí)候不需要再加value
      console.log(userName);
    }

    return {userName,change}
  },
}
</script>

解決方案

不知道為什么，當(dāng)引用為

import {ref} from "@vue/reactivity"

時(shí)，就會(huì)出現(xiàn)不響應(yīng)的情況，但是只需要改為

import {ref} from "vue"

vue3響應(yīng)式API之ref和reactive

我們知道 ref 函數(shù)和 reactive 函數(shù)用于實(shí)現(xiàn)數(shù)據(jù)的響應(yīng)性。但是開發(fā)中如何選擇使用 ref 和 reactive 呢？來(lái)說(shuō)說(shuō) ref 和 reactive 的區(qū)別。

回顧

在 Vue3 版本之前，響應(yīng)數(shù)據(jù)在 data 函數(shù)中定義

<template>
  <h3>{{ title }}</h3>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

Vue2 會(huì)遍歷 data 中的所有屬性，使用 Object.defineProperty 把每個(gè) property 全部轉(zhuǎn)為 getter/setter，getter 用來(lái)收集依賴，setter 用來(lái)執(zhí)行 notify，發(fā)布更新事件。

Vue2 對(duì)每個(gè)屬性創(chuàng)建一個(gè) Dep 對(duì)象，作為訂閱發(fā)布模式的中間機(jī)構(gòu)來(lái)收集依賴。Vue 追蹤這些依賴，在其被訪問(wèn)和修改時(shí)通知變更。

Vue3

Vue3 中引入了 ref，reactive 來(lái)創(chuàng)建響應(yīng)式數(shù)據(jù)：

<template>
  <h3>{{ title }}</h3>
  <h4>{{ data.author }}</h4>
  <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 也可以是對(duì)象。后面我們?cè)僬f(shuō)。reactive 的作用就是將一個(gè)對(duì)象轉(zhuǎn)換成一個(gè)響應(yīng)式對(duì)象。

• ref：

ref 的作用就是將一個(gè)原始數(shù)據(jù)類型轉(zhuǎn)換成一個(gè)帶有響應(yīng)式特性的數(shù)據(jù)類型。

const title = ref("Hello, Vue 3!");

ref 接收參數(shù)并將其包裹在一個(gè)帶有 value 屬性的對(duì)象中返回，然后可以使用該屬性訪問(wèn)或更改響應(yīng)式變量的值，比如上面的代碼我們使用 count.value 去修改值，如下：

title.value = "Hello, Vue3!"

上面提到了 ref 也是可以接受對(duì)象類型

const data = ref({
    author: "青年碼農(nóng)",
    age: "18"
});

這種也是可以的，賦值的時(shí)候就會(huì)有點(diǎn)別扭了。

data.value.author = "nmgwap";

ref 響應(yīng)式原理是依賴于 Object.defineProperty()，因此如果是對(duì)象，還是建議用 reactive。

• reactive：

reactive 返回對(duì)象的響應(yīng)式副本, 它將解包所有深層的 refs，同時(shí)維持 ref 的響應(yīng)性。一般我們用來(lái)實(shí)現(xiàn)對(duì)象或者數(shù)組的響應(yīng)性。

const data = reactive({
    author: "青年碼農(nóng)",
    age: "18"
});

修改和普通對(duì)象沒(méi)區(qū)別，視圖會(huì)實(shí)時(shí)更新

data.author = "nmgwap"

注意：

ref 是針對(duì)原始數(shù)據(jù)類型 和 reactive 是用于對(duì)象 這兩個(gè) API 都是為了給 JavaScript 普通的數(shù)據(jù)類型賦予響應(yīng)式特性(reactivity)。

以上就是關(guān)于“Vue3 ref構(gòu)建響應(yīng)式變量失效怎么解決”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對(duì)大家有幫助，若想了解更多相關(guān)的知識(shí)內(nèi)容，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前名稱：Vue3?ref構(gòu)建響應(yīng)式變量失效怎么解決
標(biāo)題網(wǎng)址：http://jinyejixie.com/article32/gdpjsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App設(shè)計(jì)、網(wǎng)站制作、網(wǎng)站改版、外貿(mào)建站、小程序開發(fā)、定制開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)