Vue Composition APIで使えるリアクティブ関連のAPI一覧

Vue Composition APIのリファレンスを見たらリアクティブ周りのAPIが大量に追加されていたのでまとめてみました。

この記事は以下バージョン時点の情報です。

• vuejs/composition-api: v1.0.0-beta.1
• vuejs/vue-next: v3.0.0-beta.17

Vue Composition APIのAPI Reference に掲載されているいくつかのAPIは、まだVue2系で使えるComposition APIのプラグイン（vuejs/composition-api）でサポートされていません。
そのAPIについては マークを末尾につけています。サポート対応状況についてはこちらの記載をもとにしています。

reactive

引数に渡したオブジェクトのリアクティブなプロキシを返します。
Vue2系のVue.observable()と同等の機能です。ネストされたオブジェクトもリアクティブな値として保持されます。

const obj = reactive({
  name: "Foo",
  address: {
    city: "Bar"
  }
})

obj.address.city = "Huga"
console.log(obj.address.city) // Huga

型定義

function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;

ref

プリミティブな値をrefオブジェクトに変換して返します。refオブジェクトはvalueプロパティでリアクティブな値にアクセスできます。
refの値としてオブジェクトが代入されている場合は、reactiveメソッドによってオブジェクトを深くリアクティブにします。

const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1

型定義

interface Ref<T = any> {
    [RefSymbol]: true;
    value: T;
}

function ref<T extends object>(value: T): T extends Ref ? T : Ref<UnwrapRef<T>>;
function ref<T>(value: T): Ref<UnwrapRef<T>>;
function ref<T = any>(): Ref<T | undefined>;

computed

コールバック関数を受け取り、戻り値をリアクティブでReadonlyなrefオブジェクトとして返します。
refオブジェクトの値は、コールバック関数内にあるリアクティブな値の変化に応じて再計算されます。
（getterとsetterを持つオブジェクトを渡して書き込み可能なrefオブジェクトを作ることもできます）

const count = ref(1)
const plusOne = computed(() => count.value + 1)

console.log(plusOne.value) // 2
count.value++
console.log(plusOne.value) // 3
plusOne.value = 4 // Error

型定義

// read-only
function computed<T>(getter: () => T): Readonly<Ref<Readonly<T>>>

// writable
function computed<T>(options: {
  get: () => T
  set: (value: T) => void
}): Ref<T>

readonly ️

オブジェクト（ref or reactive or プレーン）を受け取り、読み取り専用のリアクティブなプロキシを返します。
軽量な独自storeの周りの実装で使えそうです。

※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。

const original = reactive({ count: 0 })

const copy = readonly(original)
console.log(copy.count) // 0

original.count++
console.log(copy.count) // 1
console.log(isReactive(copy)) // true
copy.count++ // Error

型定義

function readonly<T extends object>(target: T): Readonly<UnwrapNestedRefs<T>>;

customRef

依存関係の追跡と更新のトリガーを明示的に制御するカスタマイズされたrefオブジェクトを返します。
限定された用途でリアクティブな値を使いたい時に良さそうです。

※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。

// 代入と参照時に必ずconsole.log()を実行するref
const useLoggerRef = (value: string) => {
  return customRef((track, trigger) => ({
    get() {
      console.log(value)
      track()
      return value
    },
    set(newValue: string) {
      console.log(newValue)
      value = newValue
      trigger()
    }
  }))
}

const foo = useLoggerRef("")

foo.value = "Hoge" // console.log("Hoge")が実行される
foo.value = "Bar" // console.log("Bar")が実行される
const bar = foo.value // console.log("Bar")が実行される

型定義

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>

type CustomRefFactory<T> = (
  track: () => void,
  trigger: () => void
) => {
  get: () => T
  set: (value: T) => void
}

markRaw

リアクティブ化されない（プロキシされない）オブジェクトを返します。
適宜markRawを使いプロキシ変換をスキップすることで、不変のデータソースを持つ大規模なリストのレンダリングなどでパフォーマンスを向上させることができます。

const foo = markRaw({
  baz: "baz"
})
const bar = reactive(foo)
isReactive(bar) // false reactive関数を実行してもリアクティブにならない

型定義

function markRaw<T extends object>(value: T): T

shallowReactive

浅いリアクティブなオブジェクトを返します。ネストされたオブジェクトはリアクティブ化されません。

const state = shallowReactive({
  foo: 1,
  nested: {
    bar: 2
  }
})

isReactive(state) // true
isReactive(state.nested) // false

型定義

function shallowReactive<T extends object>(target: T): T;

shallowRef

浅いリアクティブなrefオブジェクトを返します。ネストされたオブジェクトはリアクティブ化されません。

const foo = ref({})
const bar = shallowRef({})

isReactive(foo.value) // true
isReactive(bar.value) // false

型定義

function shallowRef<T>(value: T): T extends Ref ? T : Ref<T>;

shallowReadonly

浅いreadonlyなオブジェクトを返します。ネストされたオブジェクトはreadonlyになりません。

※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。

const state = shallowReadonly({
  foo: 1,
  nested: {
    bar: 2
  }
})

// mutating state's own properties will fail
state.foo++
// ...but works on nested objects
isReadonly(state.nested) // false
state.nested.bar++ // works

型定義

function shallowReadonly<T extends object>(target: T): Readonly<{
    [K in keyof T]: UnwrapNestedRefs<T[K]>;
}>;

toRaw

プロキシされたリアクティブなオブジェクトの生データを返します。

const foo = {}
const reactiveFoo = reactive(foo)

isReactive(toRaw(reactiveFoo)) // false
toRaw(reactiveFoo) === foo // true

型定義

function toRaw<T>(observed: T): T;

unref

引数がrefの場合はref.valueの値を、それ以外だったら引数自体を返します。
val = isRef(val) ? val.value : val の糖衣構文です。

const foo = ref(1)
const bar = 1

unref(foo) // 1
unref(bar) // 1

型定義

function unref<T>(ref: T): T extends Ref<infer V> ? V : T;

toRef

reactiveなオブジェクトの指定のプロパティをrefオブジェクトに変換して返します。
propsの値をリアクティブを切らず、setup関数外のコンポーザブルな関数に渡すときなどに使えます。

const state = reactive({
  foo: 1,
  bar: 2
})

const fooRef = toRef(state, 'foo')
isRef(fooRef) // true

型定義

function toRef<T extends object, K extends keyof T>(object: T, key: K): Ref<T[K]>;

toRefs

reactiveなオブジェクトの全てのプロパティをrefオブジェクトに変換したオブジェクトを返します。

const state = reactive({
  foo: 1,
  bar: 2
})

const stateAsRefs = toRefs(state)
isRef(stateAsRefs.foo) // true
isRef(stateAsRefs.bar) // true

型定義

type ToRefs<T = any> = {
    [K in keyof T]: Ref<T[K]>;
};
function toRefs<T extends object>(object: T): ToRefs<T>;

isRef

refオブジェクトでラップされているかどうかを判定します。

const foo = ref("foo");
const bar = reactive({
  bar: "bar"
});

isRef(foo) // true
isRef(bar) // false

型定義

isRef<T>(value: any): value is Ref<T>;

isReactive

reactiveかどうか判定します。reactiveで作られたオブジェクトをラップしたreadonlyなオブジェクトの場合にもtrueを返します。

const foo = ref("foo");
const bar = reactive({
  bar: "bar"
});
const baz = readonly(bar);
const hoge = readonly(foo)

isReactive(foo) // false
isReactive(bar) // true
isReactive(baz) // true
isReactive(hoge) // false

型定義

function isReactive(value: unknown): boolean;

isReadonly

オブジェクトがreadonlyかどうか判定します。

※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。

const foo = ref("foo");
const bar = reactive({
  bar: "bar"
});
const baz = readonly(bar);

isReadonly(foo) // false
isReadonly(bar) // false
isReadonly(baz) // true

型定義

function isReadonly(value: unknown): boolean;

isProxy

オブジェクトがProxyか判定します。reactiveかreadonlyで作成したオブジェクトが該当します。

※ 2020/07/03現在、vue-composition-apiプラグインではサポートされてません。

const foo = ref("foo");
const bar = reactive({
  bar: "bar"
});
const baz = readonly(bar);

isProxy(foo) // false
isProxy(bar) // true
isProxy(baz) // true

型定義

function isProxy(value: unknown): boolean;

終わりに

以上「Vue Composition API v1-beta で使えるリアクティブ関連のAPI一覧」でした。思った以上にAPIが多いですね。
業務ではref, reactive, toRef, toRefs, isRefくらいしか使ってなかったです。
今後はどんどん活用していきたいです。

参考

• https://composition-api.vuejs.org/api.html
• https://github.com/vuejs/composition-api