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
100
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
440
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
120
Security is not a feature!
ianaya89
1
320
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
250
Vue.js, PWA & The Subway Dilemma
ianaya89
0
160
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
110
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
90
A Token Walks into SPA
ianaya89
0
530
Other Decks in Programming
See All in Programming
카카오페이는 어떻게 수천만 결제를 처리할까? 우아한 결제 분산락 노하우
kakao
PRO
0
110
Jakarta EE meets AI
ivargrimstad
0
200
subpath importsで始めるモック生活
10tera
0
310
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
Arm移行タイムアタック
qnighy
0
330
距離関数を極める! / SESSIONS 2024
gam0022
0
280
ペアーズにおけるAmazon Bedrockを⽤いた障害対応⽀援 ⽣成AIツールの導⼊事例 @ 20241115配信AWSウェビナー登壇
fukubaka0825
6
2k
Jakarta EE meets AI
ivargrimstad
0
650
聞き手から登壇者へ: RubyKaigi2024 LTでの初挑戦が 教えてくれた、可能性の星
mikik0
1
130
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
110
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
540
Featured
See All Featured
How to Ace a Technical Interview
jacobian
276
23k
BBQ
matthewcrist
85
9.3k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Being A Developer After 40
akosma
87
590k
Docker and Python
trallard
40
3.1k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Producing Creativity
orderedlist
PRO
341
39k
What's new in Ruby 2.0
geeforr
343
31k
Documentation Writing (for coders)
carmenintech
65
4.4k
Typedesign – Prime Four
hannesfritz
40
2.4k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
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