## Vue 3 と Vite
slide: https://hackmd.io/@kt-party/HJy-8jZvu
---
## 近況
- 特に変化なし
- OSS 活動はじめてみた
- https://github.com/nodejs/node/pull/40792
- https://github.com/nodejs/node/pull/40876
---
## 目次
- Vue 3 とは？
- Vite とは？
---
## Vue 3 とは？
- Vue 2 の 3 です
---
## 注目の新機能
- Composition API ← 正味これだけで良い
- Teleport
- Fragments
- Emits Component Option
- SFC State-driven CSS Variables (`v-bind` in `<style>`)
---
## Composition API
ロジックをまとめたり切り分けたりできる機能
よく見る図
---
## Vue 2 での開発
以前の記述方法 Options API
関心事とコードが混在する
```vue
<script>
export default{
data() {
return{
modalOpen: false, // ← モーダルのロジック
snackbarOpen: false // ← スナックバーのロジック
}n
},
methods: {
handleModal() { // ← モーダルのロジック
this.modalOpen = !this.modalOpen // ← モーダルのロジック
},
handleSnackbar(){ // ← スナックバーのロジック
this.snackbarOpen = !this.snackbarOpen // ← スナックバーのロジック
}
}
}
</script>
```
---
## Composition API を使うと
`setup` の中に状態やロジックをかける
`setup` 内で定義した変数は `template` から参照できる
```vue
<script>
import { ref } from 'vue'
export default{
setup(){
// モーダルのロジック
const modalOpen = ref(false);
const handleModalOpen = () => {
modalOpen.value = !modalOpen.value
}
// スナックバーのロジック
const snackbarOpen = ref(false);
const handleSnackbarOpen = () => {
snackbarOpen.value = !snackbarOpen.value
}
}
}
</script>
<template>
<button @click="handleModalOpen">modal open</button>
<button @click="handleSnackbarOpen">snackbar open</button>
</template>
```
---
もはや setup だけで良いので <script setup> を使うともっとすっきり
```vue
<script setup>
import { ref } from 'vue'
// モーダルのロジック
const modalOpen = ref(false);
const handleModalOpen = () => {
modalOpen.value = !modalOpen.value
}
// スナックバーのロジック
const snackbarOpen = ref(false);
const handleSnackbarOpen = () => {
snackbarOpen.value = !snackbarOpen.value
}
</script>
```
---
ロジックだけ別ファイルに書いておいて使いまわしたりもできる
`modal.js`
```javascript
import { ref } from 'vue'
export const useModal = () => {
const modalOpen = ref(false);
const handleModalOpen = () => {
modalOpen.value = !modalOpen.value
}
return {
modalOpen,
handleModalOpen
}
}
```
---
## Teleport
- コンポーネントを描画する DOM tree を好きに選べる
```vue
<template>
<teleport to="#modal-area">
これは modal
</teleport>
</template>
```
```html
<body>
<div id="modal-area"></div>
</body>
```
---
## Fragments
- 今まで template 配下に複数の root node 書けなかったけど書けるようになる
今まで
```vue
<template>
<div>
<header>...</header>
<main>...</main>
<footer>...</footer>
</div>
</template>
```
これから
```vue
<template>
<header>...</header>
<main>...</main>
<footer>...</footer>
</template>
```
---
## Emits Component Option
- コンポーネント内でどのようなイベントを emit するのか宣言できる
```vue
<template>
<div>
<button v-on:click="$emit('clicked')">ボタン</button>
</div>
</template>
<script>
export default {
emits: ['clicked'] // ← 今までこれが書けなかった
}
</script>
```
---
## SFC State-driven CSS Variables (`v-bind` in `<style>`)
- v-bind を style の中で書けるようになる
```vue
<script setup>
const theme = {
color: 'red'
}
</script>
<template>
<p>hello</p>
</template>
<style scoped>
p {
color: v-bind('theme.color');
}
</style>
```
---
## Vite とは
- Web フレームワークの dev server やバンドルをやってくれるビルドツール
- Vue CLI の代わりになるもの
- React にも使える
- Vue の作者が作ってる
- esbuild を使ってるので早い
- https://esbuild.github.io/
---
## 軽くベンチマークテスト
project create
```sh
$ time vue create sample-vue-cli -d
Vue CLI v4.5.15
✨ Creating project in /Users/yoshiki/Development/sandbox/sample-vue-cli.
...
🎉 Successfully created project sample-vue-cli.
________________________________________________________
Executed in 20.73 secs fish external
usr time 8.67 secs 0.08 millis 8.67 secs
sys time 5.47 secs 1.29 millis 5.47 secs
```
```sh
$ time yarn create vite sample-vite --template vue
...
✨ Done in 0.56s.
________________________________________________________
Executed in 715.68 millis fish external
usr time 664.41 millis 0.08 millis 664.34 millis
sys time 293.44 millis 1.14 millis 292.30 millis
```
vite は node_module のインストールしないがインストール含めて早い
```sh
$ yarn
yarn install v1.22.10
...
✨ Done in 4.67s.
```
---
dev server の起動
vue
```sh
$ yarn serve
yarn run v1.22.10
$ vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 1182ms
```
vite
```sh
$ yarn dev
vite v2.6.14 dev server running at:
> Local: http://localhost:3000/
> Network: use `--host` to expose
ready in 205ms.
```
---
build
```sh
$ yarn build
...
DONE Build complete. The dist directory is ready to be deployed.
INFO Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html
✨ Done in 3.72s.
```
```sh
$ yarn build
yarn run v1.22.10
warning package.json: No license field
$ vite build
vite v2.6.14 building for production...
✓ 14 modules transformed.
dist/assets/logo.03d6d6da.png 6.69 KiB
dist/index.html 0.48 KiB
dist/assets/index.e1af3aa8.js 1.87 KiB / gzip: 1.00 KiB
dist/assets/index.16c4fe9c.css 0.20 KiB / gzip: 0.17 KiB
dist/assets/vendor.0f8d2e2f.js 49.63 KiB / gzip: 19.94 KiB
✨ Done in 0.61s.
```
---
## vue-cli vs vite
Vue CLI
- 豊富なプラグイン
- Vue 2 互換
- build ターゲットが豊富
- 遅い
Vite
- エコシステムが発展途上
- Vue 3 のみ
- ES2015 以上ターゲットなので古いブラウザお断り
- 速い
---
## 結論
Vue 3 やるなら Vite で良さそう
{"metaMigratedAt":"2023-06-16T15:22:16.665Z","metaMigratedFrom":"YAML","title":"KT#0XX-yoshiki Vue 3 と Vite","breaks":true,"slideOptions":"{\"theme\":\"sky\"}","contributors":"[{\"id\":\"4af5dd16-098f-44c1-bc14-a63a21ab4417\",\"add\":17230,\"del\":13308}]"}