Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
What's next in Vue 3? 🖖 3️⃣
Search
Ignacio Anaya
August 29, 2019
Programming
0
130
What's next in Vue 3? 🖖 3️⃣
Ignacio Anaya
August 29, 2019
Tweet
Share
More Decks by Ignacio Anaya
See All by Ignacio Anaya
Security is not a feature‼️
ianaya89
2
500
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
140
Security is not a feature!
ianaya89
1
360
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
290
Vue.js, PWA & The Subway Dilemma
ianaya89
0
200
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
140
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
120
A Token Walks into SPA
ianaya89
0
590
Other Decks in Programming
See All in Programming
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
ioquatix
4
2.5k
AkarengaLT vol.38
hashimoto_kei
1
110
CSC509 Lecture 07
javiergs
PRO
0
240
CSC305 Lecture 06
javiergs
PRO
0
270
EMこそClaude Codeでコード調査しよう
shibayu36
0
300
Claude CodeによるAI駆動開発の実践 〜そこから見えてきたこれからのプログラミング〜
iriikeita
0
320
Introduce Hono CLI
yusukebe
6
3k
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
uma31
0
330
CSC509 Lecture 08
javiergs
PRO
0
230
チームの境界をブチ抜いていけ
tokai235
0
210
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
3
230
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Code Reviewing Like a Champion
maltzj
526
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
Designing Experiences People Love
moore
142
24k
Rails Girls Zürich Keynote
gr2m
95
14k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
31
2.7k
The Cult of Friendly URLs
andyhume
79
6.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
What's next in Vue3 ! ! @ianaya89 What's next in
Vue3? - @ianaya89 1
! Nacho Anaya ! @ianaya89 • JavaScript Engineer @BloqInc •
Ambassador @Auth0 • Tech Speaker @MozTechSpeakers • Organizador @Vuenos_Aires What's next in Vue3? - @ianaya89 2
! What's next in Vue3? - @ianaya89 3
! What's next in Vue3? - @ianaya89 4
! Vue 3 What's next in Vue3? - @ianaya89 5
! Totalmente Re-escrito What's next in Vue3? - @ianaya89 6
! Simple y Explícito What's next in Vue3? - @ianaya89
7
! Performance What's next in Vue3? - @ianaya89 8
! Monorepo What's next in Vue3? - @ianaya89 9
! Paquetes Individuales What's next in Vue3? - @ianaya89 10
!" Facilita Contribuir What's next in Vue3? - @ianaya89 11
➕ Extensible What's next in Vue3? - @ianaya89 12
! Tree-Shakeable Global API What's next in Vue3? - @ianaya89
13
! 10 KB gzipped v2.x ~20 KB What's next in
Vue3? - @ianaya89 14
! TypeScript What's next in Vue3? - @ianaya89 15
☢ Reac&vity Engine What's next in Vue3? - @ianaya89 16
☢ Que es Reac)vidad? What's next in Vue3? - @ianaya89
17
What's next in Vue3? - @ianaya89 18
What's next in Vue3? - @ianaya89 19
☢ " Antes (2.x) Object.defineProperty() What's next in Vue3? -
@ianaya89 20
☢ " Antes (2.x) <template> <h1>{{ name }}</h1> </template> <script>
export default { data () { return { name: 'Nacho', foo: 'bar' } } } </script> What's next in Vue3? - @ianaya89 21
☢ " Antes (2.x) <script> export default { data ()
{ return { object: { name: 'Nacho' }, array: ['string'] } }, created () { this.$set(this.object, 'lastName', 'Anaya') this.$delete(this.object, 'lastName') this.$set(this.array, 1, 'new string') } } </script> What's next in Vue3? - @ianaya89 22
☢ " Antes (2.x) <script> export default { data ()
{ return { object: { name: 'Nacho' }, array: ['string'] } }, created () { this.$set(this.object, 'lastName', 'Anaya') this.$delete(this.object, 'lastName') this.$set(this.array, 1, 'new string') } } </script> What's next in Vue3? - @ianaya89 23
☢ " Ahora (3.x) new Proxy(target, handler) What's next in
Vue3? - @ianaya89 24
! Proxy const handler = { get: (object, property) =>
object[property] || 'Default Value' } const p = new Proxy({}, handler) p.a = 1 p.b = undefined console.log(p.a, p.b) // 1, 'Default Value' What's next in Vue3? - @ianaya89 25
☢ " Ahora (3.x) // this.$set(this.object, 'lastName', 'Anaya') // this.$delete(this.object,
'lastName') // this.$set(this.array, 1, 'new string' this.object.lastName = 'Anaya' delete this.object.lastName this.array[1] = 'new string' What's next in Vue3? - @ianaya89 26
☢ " Ahora (3.x) ! "Reac'vity Caveats" What's next in
Vue3? - @ianaya89 27
☢ " Ahora (3.x) Map - Set - WeakMap -
WeakSet What's next in Vue3? - @ianaya89 28
! IE11 What's next in Vue3? - @ianaya89 29
! Build custom para IE11 (sin Proxy) What's next in
Vue3? - @ianaya89 30
What's next in Vue3? - @ianaya89 31
❓ Class API class App extends Vue { static template
= ` <div @click="increment"> {{ count }} {{ plusOne }} </div> ` count = 0 created() { console.log(this.count) } get plusOne() { return this.count + 1 } increment() { this.count++ } } What's next in Vue3? - @ianaya89 32
⚰ Class API What's next in Vue3? - @ianaya89 33
What's next in Vue3? - @ianaya89 34
What's next in Vue3? - @ianaya89 35
! Hace dos dias... What's next in Vue3? - @ianaya89
36
! Func&on API What's next in Vue3? - @ianaya89 37
What's next in Vue3? - @ianaya89 38
! Composi(on API Composicion flexible basada en funciones What's next
in Vue3? - @ianaya89 39
! Reac&vity API import { reactive } from vue What's
next in Vue3? - @ianaya89 40
! Reac&vity API import { reactive } from 'vue' const
state = state({ count: 0 }) console.log(state.count) What's next in Vue3? - @ianaya89 41
! Reac&vity API import { reactive, watch } from 'vue'
const state = reactive({ count: 0 }) watch(() => { document.body.innerHTML = `count is ${state.count}` }) What's next in Vue3? - @ianaya89 42
! Reac&vity API import { reactive, watch, computed } from
'vue' const state = reactive({ count: 0, double: computed(() => state.count * 2) }) watch(() => { document.body.innerHTML = `count is ${state.double}` }) What's next in Vue3? - @ianaya89 43
! Reac&vity API import { reactive } from 'vue' const
state = reactive({ count: 0 }) function increment() { state.count += 1 } document.body.addEventListener('click', increment) What's next in Vue3? - @ianaya89 44
! Hello Vue3! setup(props, context) What's next in Vue3? -
@ianaya89 45
<template> <button @click="increment"> Count is: {{ state.count }}, double is:
{{ state.double }} </button> </template> <script> import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count += 1 } return { state, increment } } } </script> What's next in Vue3? - @ianaya89 46
<script> export default { props: { name: String }, setup(props,
context) { console.log(props.name) context.attrs context.slots context.refs context.emit context.parent context.root } } </script> What's next in Vue3? - @ianaya89 47
! Depreacados data - computed - methods - watch -
inject - mixins - extends - hooks What's next in Vue3? - @ianaya89 48
♻ Dynamic Lifecycle Injec/on What's next in Vue3? - @ianaya89
49
♻ Dynamic Lifecycle Injec/on import { onMounted, onUpdated } from
'vue' export default { setup () { onMounted(() => console.log('Mounted')) onUpdated(() => console.log('Updated')) } } What's next in Vue3? - @ianaya89 50
♻ Dynamic LifeCycle Injec0on import { onMounted, onUpdated } from
'vue' export default { setup () { // attachar un hook para otro componente onMounted(() => console.log('Mounted...'), otherComponent) } } What's next in Vue3? - @ianaya89 51
♻ Dynamic LifeCycle Injec0on <child-component @hook:update="myUpdateHook" /> What's next in
Vue3? - @ianaya89 52
What's next in Vue3? - @ianaya89 53
! Mo$vación • Escalabilidad • Inferencia de Tipos • Organizacion
• Performance • ! Logic Composi+on " What's next in Vue3? - @ianaya89 54
! Reac&vity API + ♻ Dynamic Lifecycle Injec/on + λ
Composi)on API = ! Logic Composi+on What's next in Vue3? - @ianaya89 55
! Patrones Actuales • Mixins • HOC • Renderless Components
What's next in Vue3? - @ianaya89 56
! Composi(on Func(ons import { reactive, onMounted, onUnmounted } from
'vue' export default function useMousePosition() { const position = reactive({ x: 0, y: 0 }) function updatePosition(e) { position.x = e.pageX position.y = e.pageY } onMounted(() => window.addEventListener('mousemove', update)) onUnmounted(() => window.removeEventListener('mousemove', update)) return position } What's next in Vue3? - @ianaya89 57
! Logic Composi+on <template> <div>{{ position.x, position.y }}</div> </template> <script>
import useMousePosition from './useMousePosition' import useOtherLogic from './useOtherLogic' export default { setup() { const position = useMousePosition() const other = useOtherLogic() return { position, other } } } </script> What's next in Vue3? - @ianaya89 58
! SE ROMPE TODO! What's next in Vue3? - @ianaya89
59
What's next in Vue3? - @ianaya89 60
! Se rompe todo? What's next in Vue3? - @ianaya89
61
What's next in Vue3? - @ianaya89 62
! Builds • Standard Build • Compa1bility Build (v2.x !
) What's next in Vue3? - @ianaya89 63
What's next in Vue3? - @ianaya89 64
! Más! • Mul%ples root elements • v-model automágico (y
mul%ple) • Propagación de atributos • Herramienta de migración (~5min) • Sintaxis de slots What's next in Vue3? - @ianaya89 65
! Demo What's next in Vue3? - @ianaya89 66
What's next in Vue3? - @ianaya89 67
! github.com/vuejs/rfcs What's next in Vue3? - @ianaya89 68
! What's next in Vue3? - @ianaya89 69
Nacho: "When Vue 3.0 will be ready?" Evan: "When it’s
ready" What's next in Vue3? - @ianaya89 70
! Q4 2019 (?) What's next in Vue3? - @ianaya89
71
Gracias! ! @ianaya89 What's next in Vue3? - @ianaya89 72
! Preguntas? ! @ianaya89 What's next in Vue3? - @ianaya89
73