【Vue.js】宣言的レンダリング 深掘り

まず、

Vue.jsってなんぞ？

JavaScriptのフレームワーク

💻 画面が自動で変わる
データが変わると、ページ更新なしで表示も変わる！

⚙️ 部品ごとに分けて作れる
パーツを組み合わせて画面を作るから管理しやすい

👯‍♂️ 入力と表示が連動する
フォームに打った文字がリアルタイムで反映される！

宣言的レンダリング　

Vueの中核を担う機能
→HTMLを拡張したようなテンプレート構文を使用して

JavaScriptの状態に基づいてHTMLがどう見えるかを記述できる
状態が変更されるとHTMLは自動的に更新される

SFC　再利用可能な自己完結型のコードブロックのこと
→HTML CSS JavaScriptをひとまとめにして（カプセル化）して
.vueというファイル内に保管する

リアクティブな状態の宣言　reactive　ref

reactive() は「オブジェクト専用」
ref() は「何でもOK」

変更された時の更新のトリガーになる状態はリアクティブという
ややこしいですが、refを使っている時もリアクティブと呼びます！

reactive() で生成されるオブジェクトはJavaScriptのプロキシで
通常のオブジェクトと同様に動作します

簡単にいうと、
プロキシ（Proxy）とは、「値へのアクセスや変更を監視する代理人」です。

vue.js

import { reactive } from 'vue'
// ↓
reactive関数を読み込む

const counter = reactive({
  count: 0
})
// ↓
countが0のリアクティブオブジェクトを作る

console.log(counter.count)
// ↓
0を表示

counter.count++
// ↓
countを1増やす

console.log(counter.count)
// ↓
1を表示

reactiveはそのほかに　配列　Map Setなどにも対応している。

ref() は、任意の値の型を取り、.value プロパティの下で
内部の値を公開するオブジェクトを作成できる

vue.js

import { ref } from 'vue'
// Vueのref()を使用できるようにする
const message = ref('Hello World!')
// refの中の'Hello World!'を持つ「refオブジェクト」を作成する
console.log(message.value)
// valueの中身を取り出して表示する
message.value = 'Changed'
// valueの中身を'Changed'に変更する

scriptとtemplate

vue.js

<script setup>
// <script setup> </script>の中にJavaScriptを書く
// データや処理を定義する場所
import { ref } from 'vue'
// Vueのref()を使用できるようにする
const message = ref('Hello')
</script>

<template>
// 画面に表示する内容を書く場所
  <h1>{{ message }}</h1>
</template>

script setupが必要な理由

の中の
{{ message }}
だけでは、message が何なのかわからない

そこで、
script setup内で
「message というデータがありますよ」と定義する

そうすることで messageを表示できる

まとめると
１：script setup でデータの用意
２：template内でそのデータを使う
３：画面に Hello　と表示される
の流れ

ちなみに　{{ }}　これはマスタッシュ構文という
髭に見えるかららしい

mustaches の内側の内容は識別子やパスだけではなく
有効な JavaScript の式であれば何でも使うことができる

template
<h1>{{ message.split('').reverse().join('') }}</h1>

なぜわざわざref と reactive分ける必要があるのか

結論だけいうと、

書きやすさのためです。

ref()

何でも入れられる

const user = ref({
  name: '太郎'
})

user.value.name

---

reactive()

オブジェクト専用。

const user = reactive({
  name: '太郎'
})

user.name

	ref()	reactive()
扱えるもの	何でもOK	オブジェクト専用
値の取り出し	.value が必要	不要
例	count.value	user.name

1つの値を扱うなら ref()、オブジェクトを扱うなら reactive()