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
110
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
460
Rompiendo Paradigmas Otra Vuez! 🔨📜3️⃣
ianaya89
0
130
Security is not a feature!
ianaya89
1
330
What's next in Vue 3? 🖖 3️⃣
ianaya89
0
260
Vue.js, PWA & The Subway Dilemma
ianaya89
0
170
PWA with PWF
ianaya89
0
69
Decentralizing the Web with JavaScript
ianaya89
0
120
hey-devs-time-to-care-about-web-apps-security.pdf
ianaya89
0
96
A Token Walks into SPA
ianaya89
0
550
Other Decks in Programming
See All in Programming
XStateを用いた堅牢なReact Components設計~複雑なClient Stateをシンプルに~ @React Tokyo ミートアップ #2
kfurusho
1
910
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
210
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
GAEログのコスト削減
mot_techtalk
0
120
Grafana Cloudとソラカメ
devoc
0
170
もう僕は OpenAPI を書きたくない
sgash708
5
1.8k
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
0
210
ML.NETで始める機械学習
ymd65536
0
100
DROBEの生成AI活用事例 with AWS
ippey
0
130
AIの力でお手軽Chrome拡張機能作り
taiseiue
0
170
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
170
sappoRo.R #12 初心者セッション
kosugitti
0
260
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Embracing the Ebb and Flow
colly
84
4.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Building an army of robots
kneath
303
45k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
960
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