例：vue3x-new-features-ref

基本構文

ref() 関数は、指定された値に基づいてレスポンシブ・データ・オブジェクトを作成するために使用します。 ref() 関数呼び出しの返り値は、.value 属性のみを含むオブジェクトです：

import { ref } from '@vue/composition-api'
// レスポンシブデータオブジェクトcountを作成する。
const count = ref(0)
// 例： ref()で作成されたレスポンシブ・データ・オブジェクトの値にアクセスしたい場合は、.valueを渡さなければならない。.value 属性は
console.log(count.value) // 0を出力する
// 例：countの値を+1
count.value++
// countの値を再度表示する
console.log(count.value) // 出力1

テンプレート内の参照によって作成されたレスポンシブデータへのアクセス

1. setup() でレスポンシブ・データを作成します：

   import { ref } from '@vue/composition-api'
   setup() {
    const count = ref(0)
    return {
    count,
    name: ref('zs')
    }
   }
   

2. テンプレート内のレスポンシブデータにアクセスします：

   <template>
    <p>{{count}} --- {{name}}</p>
   </template>
   

リアクティブオブジェクトのrefによって作成されたレスポンシブデータへのアクセス

ref()で作成されたレスポンシブデータオブジェクトがreactive()にマウントされると、自動的にレスポンシブデータオブジェクトが元の値に展開され、例えば.valueなしで直接アクセスできるようになります：

const count = ref(0)
const state = reactive({
 count
})
console.log(state.count) // 0を出力する
state.count++ //  .value 元の値に直接アクセスできる
console.log(count) // 出力1

注：新しいrefは古いrefを上書きします：

// refを作成し、reactiveにマウントする
const c1 = ref(0)
const state = reactive({
 c1
})
// refを再度作成し、名前をc2とする。
const c2 = ref(9)
// 例：古いref c1を新しいref c2に置き換える
state.c1 = c2
state.c1++
console.log(state.c1) // 出力10
console.log(c2.value) // 出力10
console.log(c1.value) // 0を出力する

例