BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. ジャバスクリプト
  4. javascriptのクラスライブラリ

vue3レスポンシブ対応のためのsetup+ref+reactive

2022-01-12 09:15:44

setupはcombinatorial apiを書くときに使うもので、内部データやメソッドを返してからでないとテンプレートは使えません。以前のvue2では、dataで返されるデータは、双方向に直接バインドすることができました。setupでデータ型を直接双方向にバインドすると、変数がリアルタイムに反応しないことがわかります。次に、setupでdataのレスポンシブ機能を実装する方法を見てみましょうか。

I. レフ

setup内部のカスタムプロパティはレスポンシブでないため、refを導入しています。 refはプロパティのラッパー値をオブジェクト内部にラップし、ベースタイプのデータをレスポンシブにするプロキシで、使用前に導入が必要です。

例1：refの使用 

<template>
 <div>
  <input type="text" v-model="mood">
  {{mood}}
 </div>
</template>
<script>
import { ref } from "vue"
export default{
 setup(){
  let mood = ref("In a bad mood at this point! ")
  setTimeout(()=>{
   mood.value = "mood to become as beautiful as people "
  },3000)
  return{
   mood
  }
 }
}
</script>

この時点で、リアルタイムのレスポンスを確保するために、セットアップテンプレートの任意の場所でムードを編集することができます。この例では、refが次のように動作するため、修正したmoodの値に値を追加しています。

let mood = ref("I'm in a bad mood!") （ムード = リフ）。

変更後：let mood = proxy({value: "I'm in a bad mood!"})

II. リアクティブ

上のrefはベースデータ型をレスポンシブにしていますが、参照型データに切り替えると失敗します。そこでリアクティブが導入される。

reactiveは，以下の原理で，参照型データを基礎となるラッパーを介してプロキシ内部に包み込みます． 

let me = reactive({
 single:true,
 want:"Warm as a fireplace warmers"
})

// Run the result as
let me = proxy : { single: true, want:"Warm as a fireplace warmer" }

参照する場合は、me.want を直接使用すればよい。

例2：リアクティブな使い方 

<template>
 <div>
  {{me.want}}
 </div>
</template>
<script>
import { ref , reactive } from "vue"
export default{
 setup(){
  let me = reactive({
   single:true,
   want:"warm as a fireplace warmer"
  })
  setTimeout(()=>{
   me.want = "Summer is easy to melt"
  },3000)
  return{
   me
  }
 }
}
</script>

vue2のdataのレスポンシブな機能は、setup + ref + reactiveで完全に実装できるので、setupはdataを完全に置き換えることができます。

iii. toRef、toRefのアプリケーション

setup + ref + reactive はデータレスポンシブを実装しており、ES6を使用して分解することができないため、レスポンシブ機能がなくなってしまう。だからtoRefsのデストラクチャリングが必要で、使うときは最初に導入する必要がある。

その仕組みは次の通りです。 

import { ref , reactive, toRefs } from "vue"
let me = reactive({
 single:true,
 want:"warm as a fireplace warmer"
})
//run as
let me = proxy : { single: true, want:"Warm as a fireplace warmer" }

const { single, want } = toRefs( me )
// run as
single : proxy({ value:true })
want : proxy({ value:"Warm as a fireplace warmer" })

toRefsはsingleとwantを2つのプロキシに分解するので、レスポンシブなんです。

例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:"warm as a fireplace warmer"
  })
  setTimeout(()=>{
   me.want = "Summer is easy to melt"
  },3000)
  // deconstruct
  const {single,want} = toRefs(me)
   return {
    single,
    want
   }
  }
}
</script>

toRef関数：オブジェクトのプロパティを参照として返す。わかりにくいので、結果をプリントして見るとわかりやすい。 

let me = reactive({
 single:true,
 want:"Warm as a fireplace warmers"
})
let lv = toRef( me, 'love' )
console.log('love',love);
// print the result
ObjectRefImpl {
 __v_isRef: true
 _key: "love"
 _object: Proxy {single: true, want: "Warm as a fireplace warmers"}
 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:"warm as a fireplace warmer"
  })
 setTimeout(()=>{
  me.want = "Summer is easy to melt"
 },3000)
 const {single,want } = toRefs(me)
 const love = toRef(me,'love')
 console.log('love',love);
 return{
  single,
  want
  }
 }
}
</script>

IV. まとめ

set + ref + reactive は、vue2 のデータ応答機能を完全に実装しています。

toRefs はリアクティブにラップされたデータを分解し、toRef はオプションのパラメータに使用されます。

以上、setup+ref+reactiveによるvue3のレスポンシブ機能を少し紹介しましたが、お役に立てれば幸いです。また、BinaryDevelopのウェブサイトをサポートしていただき、ありがとうございます。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します