Welcome to the presenter console!
Wunderdog: Consultancy, cool place Vuejs before it was cool: that is before v2
Any notes?
For this, we need to talk about the limitations of Vue2:
New functionalities usually impact mutliple places like data, methods, computed properties, etc. This spreads all the pieces all over the component. It would be nicer to be able to organise things by logical concerns
Oh no, he said the M-Word!
notes?
✅ Organised by logical concerns
❌ Prone to cause conflicts
❌ Relationships are shady
❌ Reusability is very limited
❌ Implicit Property additions
❌ No access to this
The M-Word again?!
✅ (still) Organised by logical concerns
✅ Easily reusable
✅ Clearer relationships
❌ Namespacing works but is hard
❌ Implicit Property additions
❌ Still no access to this
Explain the difference to Mixins: Functions (factories) that create namespaced mixins to avoid conflicts and to make relationships more clear Namespacing is hard because it requires stricter conventions
✅ Organised by logical concerns
✅ Solves most of the issues with Mixins
❌ Moves configuration into template
❌ Hard to reach from the code
❌ Performance might become an issue (because more components)
Any notes?
✅ the config is now in our component code
✅ Solves all of the issues with Mixins
import useCoolStuff from '@my/cool-stuff' import useFunctionality from '@my/functionality' export default { setup () { const coolStuff = useCoolStuff({/* config */}) const actualStuff = useFunctionality({/* config */}) return { coolStuff, actualStuff } } }
✅ It's just a function that provides the scope for the template
<template> <h1>Hello {{ toWhom }}!</h1> </template> <script> export default { setup () { return { toWhom: "World" } } } </script>
Okay, better make this reactive
<template> <h1>Hello {{ toWhom }}!</h1> </template> <script> import { ref } from 'vue' export default { setup () { const toWhom = ref("World") // reactive string return { toWhom } } } </script>
Lets add an input field:
<template> <h1>Hello {{ toWhom }}!</h1> <input v-model="toWhom" /> </template> <script> import { ref } from 'vue' export default { setup () { const toWhom = ref("World") return { toWhom } } } </script>
But this should be a computed value!
<template> <h1>{{ greeting }}</h1> <input v-model="toWhom" /> </template> <script> import { ref, computed } from 'vue' export default { setup () { const toWhom = ref("World") const greetung = computed(() => `Hello ${toWhom.value}!`) return { toWhom } } } </script>
Watching and Methods
<template> <div> <h2>{{ greeting }}</h2> <input v-model="toWhom"> <button v-if="danger" @click="callPolice">Call Police</button> </div> </template> <script> import { ref, computed, watch } from "@vue/composition-api"; export default { setup() { const toWhom = ref("World"); const danger = ref(false); const greeting = computed(() => `Hello ${toWhom.value}!`); const callPolice = () => { console.log("Bad name detected. Police is informed!"); }; const nameWatcher = watch(toWhom, newName => { if (newName === "bad") { danger.value = true; toWhom.value = "good"; } }); return { toWhom, greeting, danger, callPolice }; } }; </script>
In Vue3 the composition API is the underlying technology and the component syntax builds on top of it.