vue3 ref、reactive、toRef、toRefs 使用

ref、reactive、toRef、toRefs 使用

 

觸發頁面更新(ref,reactive)

ref ： 復制，修改響應式數據不會影響原始數據 ，一次只能定義一個ref響應式數據

let age = ref(20);//響應式數據,ui更新

 

響應式原理：ref 則是用把數據給包裝成 ref 對象, .value 的方式去訪問其數據,在 setup 中嗎,在模板中不需要, 因為會自動添加.value。vue 強烈建議 ref 用來處理 非指針類型的數據類型, string number 等, 通過給 value 屬性添加 getter/setter 來實現對數據的劫持

 

reactIve：用來處理對象，數組，等指針類型的數據

響應式原理：reactive 是利用 proxy 來實現

• ref可用於任何類型的數據創建響應式，reactive(obj|array)只用於創建引用類型數據的響應式。

<template>
    <div>
        <div @click="name='李四'">{{name}}</div>
        <div @click="age=21">{{age}}</div>
    </div>
</template>
<script>
import { reactive, ref, toRefs } from 'vue';
export default {
    name:'Page2',
    setup(){
        const state = reactive({
            name:"張三",
            age:20
        })
        return{
            ...toRefs(state)//解構賦值后數據就會失去響應式，需要用toRefs讓對象擁有ref響應式屬性，UI才會視圖更新
        }
    }
}

注意:還有一種情況是，如果直接給響應的引用數據賦值，數據會變化但是ui不會更新

<script setup>
import {toRef,toRefs,reactive} from 'vue'

let dataObj = reactive({
  trade_url:'',
  twitter_url:'',
  telegram_url:'',
  msn_url:''
})
const change = ()=>{
    let obj = { 
        trade_url:'1',
        twitter_url:'2',
        telegram_url:'3',
        msn_url:'4'
    }
    dataObj = obj;

    console.log(dataObj); //數據都變化了，視圖不會更新，沒有檢測到數據的變化

　　
 　　
　　 // Object.assign(dataObj,obj)  
    //這樣會檢測到數據的變化更新ui,assign方法類似於對對象的每個屬性賦值，此時vue會檢測到變化,等效於下方的操作。
    // dataObj.trade_url = obj.trade_url;
    // dataObj.twitter_url = obj.twitter_url;
    // dataObj.telegram_url = obj.telegram_url;
    // dataObj.msn_url = obj.msn_url;

　　//如果是數組的話直接=也是不會更新。可使用concat，或者其他數組方法

 

不會觸發頁面更新（toRef,toRefs）

toRef:

使用toRef將某個對象中的屬性變成響應式數據，修改響應式數據是會影響到原始數據的。但是需要注意，如果修改通過toRef創建的響應式數據，並不會觸發UI界面的更新。 所以，toRef的本質是引用，與原始數據有關聯

import {toRef} from 'vue';
export default {
  name:'App'
  setup(){
    let obj = {name : 'alice', age : 12};
    let newObj= toRef(obj, 'name');
    function change(){
      newObj.value = 'Tom';
      console.log(obj,newObj)
    }
    return {newObj,change}
  }
}

 

上述代碼，當change執行的時候，響應式數據發生改變，原始數據obj也會改變，但是UI界面不會更新

上面兩個介紹了，ref 和 reactive 可以改變頁面。接下來這兩個則不能去改變頁面，但是數據還是會遵循響應式。

小結：

ref和toRef的區別、特點： (1). ref本質是拷貝，修改響應式數據不會影響原始數據；toRef的本質是引用關系，修改響應式數據會影響原始數據 (2). ref數據發生改變，界面會自動更新；toRef當數據發生改變是，界面不會自動更新 (3). toRef傳參與ref不同；toRef接收兩個參數，第一個參數是哪個對象，第二個參數是對象的哪個屬性

(4).toRef 用於創建對象指定的屬性響應式，換句話說就是只能控制一個對象中的一個屬性。

(5).toRefs 用於創建對象響應式。

(6).他們對響應式的處理你可以理解為： toRef 類似 ref， toRefs 類似 reactive

類型	是否觸發頁面改變	是否可以結構
ref	是	否
reactive	是	否
toRef	否	否
toRefs	否	是