宣言的レンダリング

概要

宣言的レンダリングとはVueの中核となる機能である。具体的にはHTMLを拡張したテンプレート構文を利用してJSの状態に基づいてHTMLはどう見えるかを記述することができる。状態が更新されるとHTMLも自動的に更新される。
FlutterのsetStateである。

reactive

変更したときに反映したいものはVueのreactive()APIを使用する。このAPIによって状態遷移を実現している。

reactiveは基本的に非プリミティブ型に対して動作する。

以下に例を示す。

import { reactive } from 'vue'
 
const conuter = reactive({
	count: 0
})
 
console.log(counter.count)
counter.count++

ref

ref()はプリミティブ型に対して使用することができる。
アクセスするにはvalueを介して行う。

import { ref } from 'vue'
 
const message = ref("hello world")
 
console.log(message.value)
mesage.value = "changed"

HTMLに埋め込むならこうなる。

<script setup>
import { reactive, ref } from 'vue'
 
const counter = reactive({ count: 0 })
const message = ref('Hello World!')
</script>
 
<template>
  <h1>{{ message }}</h1>
</template>

その際はvalueを省略することができる。