Vue3 + TypeScript で 三目並べを作る
プログラミングをするパンダプロジェクトの作成
$ vue create tic-tac-toe
> tic-tac-toe@1.0.0 vue /Users/sample_program/vue/tic-tac-toe
> vue "create" "tic-tac-toe"
Vue CLI v5.0.0-alpha.0
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, TS, Lin
ter, Unit
? Choose a version of Vue.js that you want to start the project with 3.x (Previe
w)
? Use class-style component syntax? No
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfi
lls, transpiling JSX)? Yes
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Pick a unit testing solution: Jest
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? No
? Pick the package manager to use when installing dependencies: NPM
defineComponent でコンポーネントを作成するとTSが使える
プログラミングをするパンダサンプル
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
name: 'HelloWorld',
props: {
msg: String
}
})
</script>
computedってなんだろう？
プログラミングをするパンダTSで型指定するというより、onbject は type assertion を使う必要があるなど、補助的な使い方に見える
プログラミングをするパンダcomposition api を使いたい
プログラミングをするパンダcomputed は getter。local stateやdataのselector相当ということかな。
methods でも同様のことができるが、computedの結果はキャッシュされる。「リアクティブ」な依存がある場合は、依存する値が更新されたら、computedの結果も更新される。
結果だけ見れば、この2つのアプローチはまったく同じになりますが、算出プロパティはリアクティブな依存関係に基づいてキャッシュされるという違いがあります。算出プロパティはリアクティブな依存関係の一部が変更された場合にのみ再評価されるのです
「リアクティブ」ってどんな意味？
プログラミングをするパンダcomputedはsetterも定義できる
プログラミングをするパンダVueの「リアクティブ」とは
データと DOM は関連付けられ、すべてが リアクティブ（反応的） になっています。
おそらく、「値が変更されると、DOMも変化する」ということなら、local state 相当ということかな。
他にもmountedが出てきた。これはなんだろう。マウント時に実行するメソッドかな（componentDidMount相当？）
ぴったりな章を見つけた
リアクティブとは何か？
Vue の最大の特徴の 1 つは、控えめなリアクティブシステムです。モデルはプロキシされた JavaScript オブジェクトです。それらを変更するとビューが更新されます
やっぱりコンポーネント単位のlocal stateということみたい。「プロキシされたJSオブジェクト」ということはオブジェクトの更新について immer と発想が似ているのかな
プログラミングをするパンダ「プロキシ」とは、元オブジェクトの処理をinterceptできるオブジェクトのこと
本当に知っておく必要があることは プロキシは別のオブジェクトまたは関数を包み、操作を差し込むこと(intercept)ができるオブジェクトだということです。
MDN
プログラミングをするパンダProxyによるJSオブジェクトの更新は、ReactのsetStateやReduxのアプローチと異なる。
前者は、あるグローバルなオブジェクトの変更を監視しているが、React/Reduxでは古いオブジェクトを受け取り、更新関数が新しいオブジェクトを作成して返却する
プログラミングをするパンダmountedはやっぱりライフサイクルフックだった
Called after the instance has been mounted
プログラミングをするパンダライフサイクルダイアグラム。beforeFooがあるので多く見える。beforeと~ed のペア
プログラミングをするパンダcomposition API を調べる
propsがsetUpの中に渡される。setUpの返り値は computed, methods, templateなどで利用できる
setup オプションは props と後で紹介する context を受け付ける関数であるべきです。さらに、setup から返される全てのものは、コンポーネントの残りの要素 (computed プロパティ、methods、ライフサイクルフックなど) およびコンポーネントの template に公開されます。
プログラミングをするパンダrefを使うとstringやnumberといったプリミティブな値もreactiveにできる
import { ref } from 'vue'
const counter = ref(0)
console.log(counter) // { value: 0 }
console.log(counter.value) // 0
counter.value++
console.log(counter.value) // 1
composition api、思ってたのと違った
プログラミングをするパンダcomposition apiってcustom hooksと同じって思ってたけど、ロジックの切り出しは機能の一部でしかなかった
import { ref, computed } from 'vue'
const counter = ref(0)
const twiceTheCounter = computed(() => counter.value * 2)
counter.value++
console.log(counter.value) // 1
console.log(twiceTheCounter.value) // 2
最後まで読むとやっぱりcustom hooksだった
プログラミングをするパンダsetUpはcontextも受け取れる。
contextは attr, slots（プロパティ）, emit（メソッド）を持っている
プログラミングをするパンダpropsはリアクティブ。contextはリアクティブではない
プログラミングをするパンダ気になる機能をチェックできたので、基本的な使い方にざっと目を通す
プログラミングをするパンダmethods は event handler
data は local state。thisを通してアクセスする