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
React への依存を最小にするフロントエンド設計
takonda
12
3.3k
Flutterを言い訳にしない!アプリの使い心地改善テクニック5選🔥
kno3a87
1
210
Duckdb-Wasmでローカルダッシュボードを作ってみた
nkforwork
0
130
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
Nurturing OpenJDK distribution: Eclipse Temurin Success History and plan
ivargrimstad
0
1k
Quine, Polyglot, 良いコード
qnighy
4
650
C++でシェーダを書く
fadis
6
4.1k
A Journey of Contribution and Collaboration in Open Source
ivargrimstad
0
1k
最新TCAキャッチアップ
0si43
0
200
Hotwire or React? ~アフタートーク・本編に含めなかった話~ / Hotwire or React? after talk
harunatsujita
1
120
どうして僕の作ったクラスが手続き型と言われなきゃいけないんですか
akikogoto
1
120
初めてDefinitelyTypedにPRを出した話
syumai
0
420
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Writing Fast Ruby
sferik
627
61k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
YesSQL, Process and Tooling at Scale
rocio
169
14k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Side Projects
sachag
452
42k
Making Projects Easy
brettharned
115
5.9k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Gamification - CAS2011
davidbonilla
80
5k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
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