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
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
Go Conference 2025: Goで体感するMultipath TCP ― Go 1.24 時代の MPTCP Listener を理解する
takehaya
8
1.6k
育てるアーキテクチャ:戦い抜くPythonマイクロサービスの設計と進化戦略
fujidomoe
1
170
Devvox Belgium - Agentic AI Patterns
kdubois
1
110
Swift Concurrency - 状態監視の罠
objectiveaudio
2
510
非同期jobをtransaction内で 呼ぶなよ!絶対に呼ぶなよ!
alstrocrack
0
670
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
970
Web Components で実現する Hotwire とフロントエンドフレームワークの橋渡し / Bridging with Web Components
da1chi
3
2k
Flutterで分数(Fraction)を表示する方法
koukimiura
0
130
チームの境界をブチ抜いていけ
tokai235
0
160
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.5k
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
YesSQL, Process and Tooling at Scale
rocio
173
14k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Docker and Python
trallard
46
3.6k
Side Projects
sachag
455
43k
The Language of Interfaces
destraynor
162
25k
Optimizing for Happiness
mojombo
379
70k
The Cult of Friendly URLs
andyhume
79
6.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
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