Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
R.H
Slide 5
Slide 5 text
No content
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
•
•
•
•
Slide 9
Slide 9 text
No content
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
[
{
"id": "11112222",
"list_data_A": [
"ABC",
"DEF",
"GHI"
],
"object_data_A": {
"key1": "value1",
"key2": "value2"
},
"value": 10000,
// …以降40件のプロパティ
},
// …最大1000件のデータ
]
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
- {{ item }}
Slide 16
Slide 16 text
const emit = defineEmits<{
(e: 'change-value', value: string): void
}>()
const temporaryValue = ref('')
const emitValue = () => {
emit('change-value', temporaryValue.value)}
- { reactiveItems[idx].editValue = val}" />
Slide 17
Slide 17 text
const obj = {
key1: "value1",
key2: "value2",
}
Object.freeze(obj);
new Vue({
el: '#app',
data: obj,
})
Slide 18
Slide 18 text
{{ value }}
{{ heavyMethod() }}
{{ value }}
Slide 19
Slide 19 text
Slide 20
Slide 20 text
// Vue2
Vue.component('async-example', function (resolve,
reject) {
setTimeout(function () {
resolve({
template: '
I am async!
'
})
}, 1000)
})
//Vue3
import { defineAsyncComponent } from 'vue'
const AsyncComp = defineAsyncComponent(() => {
return new Promise((resolve, reject) => {
// ...サーバーからコンポーネントを読み込む
resolve(/* 読み込まれたコンポーネント */)
})
})
// ... `AsyncComp` を普通のコンポーネントと同じように
使用する
Slide 21
Slide 21 text
No content
Slide 22
Slide 22 text
https://ja.vuejs.org/api/reactivity-advanced#reactivity-api-advanced
const state = shallowRef({ count: 1 })
// 初回実行時に一度だけ 1 をログ出力する
watchEffect(() => {
console.log(state.value.count)
})
// 変更をトリガーしない
state.value.count = 2
// 変更をトリガーする
state.value = { count: 5 }
// この時点では”10”はログ出力されない
state.value.count = 10
// "10" が出力される
triggerRef(state)
const scope = effectScope()
scope.run(() => {
const doubled = computed(() =>
state.value.count * 2)
watch(doubled, () =>
console.log(doubled.value))
watchEffect(() => console.log('Count: ',
doubled.value))
})
// スコープ内のすべてのエフェクトを破棄
scope.stop()
Slide 23
Slide 23 text
https://vueuse.org/shared/computedWithControl/
https://vueuse.org/shared/watchDebounced/
import { computedWithControl } from '@vueuse/core'
const source = ref('foo')
const counter = ref(0)
const computedRef = computedWithControl(
() => source.value, // watch source, same as
`watch`
() => counter.value // computed getter, same as
`computed`
)
import { watchDebounced } from '@vueuse/core'
watchDebounced(source,
() => {
console.log('changed!')
},
{ debounce: 500, maxWait: 1000 })
Slide 24
Slide 24 text
https://ja.vuejs.org/api/built-in-directives#v-memo
-
{{ item.label }}
{{ item.key }}
Slide 25
Slide 25 text
https://ja.vuejs.org/guide/essentials/watchers
https://v2.ja.vuejs.org/v2/guide/computed#%E3%82%A6%E3%82%A9
%E3%83%83%E3%83%81%E3%83%A3
watch(postSource, callback, {
flush: 'post', //主コンポーネントのDOM更新後に実行
})
watch(syncSource,
(newValue, oldValue) => {
// Vue管理の更新と同期的に実行される
},
{ flush: 'sync' })
watch(eagerSource,
(newValue, oldValue) => {
// すぐに実行され、`source` が変更されると再び実
行される
},
{ immediate: true })
Slide 26
Slide 26 text
https://enterprisevue.dev/blog/deep-dive-vue-watchers/
https://vueuse.org/shared/watchPausable/#watchpausable
https://blog.vuejs.org/posts/vue-3-5#onwatchercleanup
const stopWatcher = watch(valueToWatch, (newValue,
oldValue) => {
// Watcher function logic
})
// Stop the watcher
stopWatcher()
import { watch, onWatcherCleanup } from 'vue'
watch(id, (newId) => {
const controller = new AbortController()
fetch(`/api/${newId}`, { signal:
controller.signal }).then(() => {
// callback logic
})
onWatcherCleanup(() => {
// abort stale request
controller.abort()
})
})
Slide 27
Slide 27 text
•
•
•
•
•
•
•
https://blog.vuejs.org/posts/vue-3-5
Slide 28
Slide 28 text
No content
Slide 29
Slide 29 text
No content
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
No content
Slide 34
Slide 34 text
No content