setup+ref+reactive實現vue3響應式功能

Posted on by

setup 是用來寫組合式 api ，內部的數據和方法需要通過 return 之後，模板才能使用。在之前 vue2 中，data 返回的數據，可以直接進行雙向綁定使用，如果我們把 setup 中數據類型直接雙向綁定，發現變量並不能實時響應。接下來就看看setup如何實現data的響應式功能？

一、ref

setup 內的自定義屬性不具備響應式能力，所以引入瞭 ref ，ref 底層通過代理，把屬性包裝值包裝成一個 proxy ，proxy 內部是一個對象，使得基礎類型的數據具備響應式能力，使用之前必須引入。

示例1：ref 使用

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref("此時心情好差呀！")
  setTimeout(()=>{
   mood.value = "心情要變的像人一樣美"
  },3000)
  return{
   mood
  }
 }
}
</script>

此時可以在 setup 模板內任意編輯 mood，可以保證實時響應。實例在修改 mood 的值加瞭 value ，是因為 ref 的工作原來：

let mood = ref(“此時心情好差呀！”)

修改成：let mood = proxy({value:”此時心情好差呀！”})

二、reactive

上述的 ref 讓基礎數據類型具備瞭響應式，但是如果我們換成引用類型的數據，就會失效。所以引入瞭 reactive。

reactive 通過底層包裝，將引用類型數據包裝到 proxy 內，使用原理如：

let me = reactive({
 single:true,
 want:"暖的像火爐的暖男"
})

// 運行結果為
let me = proxy : { single: true, want:"暖的像火爐的暖男" }

引用的時候，直接使用 me.want 就可以瞭。

示例2：reactive 使用

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火爐的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化瞭"
  },3000)
  return{
   me
  }
 }
}
</script>

通過 setup + ref + reactive 就可以完全實現 vue2 中 data 的響應式功能，所以 setup 完全可以替換掉 data。

三、toRefs 、toRef 應用

setup + ref + reactive 實現瞭數據響應式，不能使用 ES6 解構，會消除響應特性。所以需要 toRefs 解構，使用時，需要先引入。

它的工作原理為：

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"暖的像火爐的暖男"
})
//運行為
let me = proxy : { single: true, want:"暖的像火爐的暖男" }

const { single, want } = toRefs( me )
// 運行為
single : proxy({ value:true })
want : proxy({ value:"暖的像火爐的暖男" })

toRefs 把 single 和 want 解構成兩個 proxy ，所以是響應式的。

示例3：toRefs 解構數據

<template>
 <div>
  {{want}}
  <input type="text" v-model="want">
 </div>
</template>
<script>
import { ref , reactive, toRefs } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火爐的暖男"
  })
  setTimeout(()=>{
   me.want = "夏天容易化瞭"
  },3000)
  // 解構
  const {single,want} = toRefs(me)
   return{
    single,
    want
   }
  }
}
</script>

toRef作用：將對象某一個屬性，作為引用返回。比較難理解，可以打印查看下結果更容易理解。

let me = reactive({
 single:true,
 want:"暖的像火爐的暖男"
})
let lv = toRef( me, 'love' )
console.log('love',love);
//打印結果
ObjectRefImpl {
 __v_isRef: true
 _key: "love"
 _object: Proxy {single: true, want: "暖的像火爐的暖男"}
 value: undefined
 [[Prototype]]: Object
}

toRef 是組件之間進行傳值值，對可選參數進行處理，運行時，先查看 me中是否存在 love ，如果存在時就繼承 me 中的 love ，如果不存在時就創建一個 love ，然後解構賦值給變量 lv。

示例4：toRef 使用

<template>
 <div>
  {{want}}
 <input type="text" v-model="want">
</div>
</template>
<script>
import { ref , reactive, toRefs, toRef } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"暖的像火爐的暖男"
  })
 setTimeout(()=>{
  me.want = "夏天容易化瞭"
 },3000)
 const {single,want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return{
  single,
  want
  }
 }
}
</script>

四、總結

ref 讓基礎數據類型具備響應式，而 reactive 讓引用類型的數據具備響應式。setup + ref + reactive 完全實現 vue2 中 data 響應式功能。

toRefs 解構 reactive 包裝的數據，toRef 用於對可選參數。

以上所述是小編給大傢介紹的通過setup+ref+reactive實現vue3響應式功能，希望對大傢有所幫助。在此也非常感謝大傢對WalkonNet網站的支持！

推薦閱讀：