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 用於對可選引數。