点数
79点
感想
ref関数、reactive関数、ProvideとInjectなどVue.js3の新機能がしっかり説明されていた。
ただし、大半は新機能以外の内容であった。
基本
リアクティブシステム
ref関数
- ref関数で生成されたオブジェクトをRef変数と呼び、生の値をRef変数にすることをラップすると言う。
- Ref変数に値を代入してしまうとリアクティブの性質が解除されてしまうため、値はvalueプロパティに代入しなければならない。
num.value = 100; - テンプレートからRef変数を参照する際は暗黙的にアンラップされるため.valueは不要。
{{ num.value }}ではなく{{ num }}
<script setup>
import { ref } from 'vue';
const num = ref(0);
num.value = 5;
</script>reactive関数
- reactive関数にオブジェクトを渡すと、リアクティブ化されたReactive変数が返される。
- Ref変数とは異なり値へのアクセスに.valueは不要。
- reactive関数は関連する値をひとつのオブジェクトで管理したい場合に使う。
<script setup>
import { reactive } from 'vue';
const user = reactive({name: 'hoge'});
user.name = 'hogehoge';
</script>算出プロパティとメソッドの使い分け
- 算出プロパティは依存するRef変数、Reactive変数が変更された場合のみ評価される。
- まずは算出プロパティを使うことを基本とし、値を常に更新したい場合だけメソッドを使うと良い。
ファイルアップロード
<input type="file">要素は双方向バインディングができないため、changeイベントやボタンのclickイベントで処理をする。- input要素にref属性を追加し<script>内で同名のRef変数を定義すると、2つが紐づく。
（ref関数の初期値はnullで構わない）
これにより、Ref変数.valueでinput要素を取得できるようになる。
<script setup>
import { ref } from 'vue'
const result = ref('')
const upfile = ref(null)
const onclick = () => {
const file = upfile.value.files[0]
const form = new FormData()
form.append('upfile', file, file.name)
fetch('upload.php', {
method: 'POST',
body: form
})
.then(function(response) {
return response.text()
})
.then(function(text) {
result.value = text
})
}
</script>
<template>
<form>
<input type="file" ref="upfile" />
<input type="button" value="アップロード" v-on:click="onclick" />
</form>
<div>{{ result }}</div>
</template>