Vue3 ref建構響應式變數失效如何解決

vue3 ref建構響應式變數失效

問題描述

在Vue3中使用ref宣告響應式變量，同時用函數對值進行變化，但是無法響應式改變值

<template>
  <p>{{userName}}</p>
  <button @click=&#39;change()&#39;>change</button>
</template>

<script>
  //引入定义响应式数据的函数
  import {reactive} from &#39;vue&#39;;
  import {ref} from "@vue/reactivity"; //!!!!!注意，这里有个坑，ref必须是引用自vue，而非@vue/reactivity
  export default {
  name: &#39;App&#39;,
  //为Vue3的新特性提供统一入口，代码都会在这个函数中添加
  //在beforecreated之前进行，因此无法访问this，亦即无法访问data和method
  setup(){
    //定义响应式数据：数据变化，模板中渲染会自动刷新
    // const obj=reactive({
    //   userName:&#39;jack&#39;,
    // });
    //只定义一个变量,可以使用ref将变量定义为响应式
    let userName=ref(&#39;jack&#39;)
    console.log(userName);
    const change=()=> {
      userName.value=&#39;rose&#39;     //注意修改的是ref对象的value属性，但是在template中使用的时候不需要再加value
      console.log(userName);
    }

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

解決方案

不知道為什麼，當引用為

import {ref} from "@vue/reactivity"

時，就會出現不回應的情況，但是只需要改為

import {ref} from "vue"

vue3響應式API之ref和reactive

我們知道ref 函數和reactive 函數用於實現資料的響應性。但是開發中如何選擇使用 ref 和 reactive 呢？來說說 ref 和 reactive 的差別。

回顧

在Vue3 版本之前，回應資料在data 函數中定義

<template>
  <h2 id="nbsp-title-nbsp">{{ title }}</h2>
</template>
 
<script>
  export default {
    data() {
      return {
        title: "Hello, Vue!"
      };
    }
  };
</script>

Vue2 會遍歷data 中的所有屬性，使用Object.defineProperty 把每個property 全部轉為getter/setter，getter 用來收集依賴，setter 用來執行notify，發布更新事件。

Vue2 對每個屬性建立一個 Dep 對象，作為訂閱發布模式的中間機構來收集依賴。 Vue 追蹤這些依賴，在其被存取和修改時通知變更。

Vue3

Vue3 中引入了 ref，reactive 來建立響應式資料：

<template>
  <h2 id="nbsp-title-nbsp">{{ title }}</h2>
  <h3 id="nbsp-data-author-nbsp">{{ 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: "青年码农",
        age: "18"
      });
 
      return { title, data, changeTitle };
    }
  };
</script>

從上面的程式碼我們大概可以看出差異。 ref 的功能是將一個原始資料型別轉換成一個響應式數據，原始資料型別共有 7 個，分別是：String、Number、BigInt、Boolean、Symbol、Undefined、Null。但有個奇淫技巧，就是 ref 也可以是物件。後面我們再說。 reactive 的作用就是將一個物件轉換成一個響應式物件。

• ref：

#ref 的作用是將一個原始資料型別轉換成一個帶有回應式特性的資料型態。

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

ref 接收參數並將其包裹在一個帶有value 屬性的物件中返回，然後可以使用該屬性存取或更改響應式變數的值，例如上面的程式碼我們使用count. value 去修改值，如下：

title.value = "Hello, Vue3!"

上面提到了ref 也是可以接受物件型別

const data = ref({
    author: "青年码农",
    age: "18"
});

這種也是可以的，賦值的時候就會有點彆扭了。

data.value.author = "nmgwap";

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

• reactive：

reactive 傳回物件的回應式副本, 它將解包所有深層的refs，同時維持ref 的響應性。一般我們用來實現物件或陣列的回應性。

const data = reactive({
    author: "青年码农",
    age: "18"
});

修改和普通物件沒有區別，視圖會即時更新

data.author = "nmgwap"

注意：

ref 是針對原始資料類型和reactive是用於物件這兩個API 都是為了給JavaScript 普通的資料類型賦予響應式特性(reactivity)。

以上是Vue3 ref建構響應式變數失效如何解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！