Vue Reactivity: Learning By Accident

Lightning talk at VueConf US 2018 in New Orleans.

Vue's reactivity system makes it dead simple to write components in a readable declarative syntax. But how does it actually work? We'll use the annoying gotchas in the system as an excuse to go deeper and really learn how it works under the hood.

Transcript

1. Reactivity Learning by accident
2. ¯ Accidents “Happy little accidents” Photo by marco forno on Unsplash
3. ¯ Photo by Jeremy Bishop on Unsplash Gotcha #1 Adding and removing properties
4. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { price: 10, quantity: 3, } }, computed: { total () { return this.price * this.quantity }, }, } <p>{{ total }}</p> TOTALLY WORKING CODE
5. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY TREE! quantity price total {{total}} 10 3 30 '30'
6. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY TREE! quantity price total {{total}} 3 5 15 '15'
7. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { quantity: 3, } }, computed: { total () { return this.price * this.quantity }, }, created () { this.price = 10 }, } <p>{{ total }}</p> TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/yKpzPJ
8. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY ISLAND? quantity price total {{total}} 10 3 30 '30'
9. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY ISLAND? quantity price total {{total}} 3 30 '30' 5
10. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { price: null, quantity: 3, } }, computed: { total () { return this.price * this.quantity }, }, created () { this.price = 10 }, <p>{{ total }}</p> TOTALLY FIXED WORKING CODE
11. ¯ Photo by Annie Spratt on Unsplash Gotcha #2 Modifying array indices
12. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { todos: ['eat', 'sleep', 'vue'], } }, methods: { addTodo () { this.todos.push('more vue') }, }, } <button @click="addTodo()"> Add </button> <ul> <li v-for="todo in todos"> {{ todo }} </li> </ul> TOTALLY WORKING CODE
13. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { todos: ['eat', 'sleep', 'vue'], } }, methods: { updateTodo () { this.todos[0] = 'coffee' }, }, } <button @click="updateTodo()"> Update </button> <ul> <li v-for="todo in todos"> {{ todo }} </li> </ul> TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/geoGeJ
14. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident Object.defineProperty(obj, key, { get: function reactiveGetter () { const value = getter ? getter.call(obj) : val if (Dep.target) { ... } return value }, set: function reactiveSetter (newVal) { const value = getter ? getter.call(obj) : val if (newVal === value ...) return val = newVal childOb = !shallow && observe(newVal) dep.notify() } }) GETTERS/SETTERS! https://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/index.js#L156
15. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident BUT WAIT............................ export default { data () { return { todos: ['eat', 'sleep', 'vue'], } }, methods: { addTodo () { this.todos.push('more vue') }, }, }
16. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident PATCHED ARRAY METHODS! // Totally patched arr.push(...) arr.pop(...) arr.shift(...) arr.unshift(...) arr.splice(...) arr.sort(...) arr.reverse(...) // Totally NOT patched // ...because you totally can't arr[i] = ... arr.length = ... https://github.com/vuejs/vue/blob/v2.5.16/src/core/observer/array.js#L11
17. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { todos: ['eat', 'sleep', 'vue'], } }, methods: { updateTodo () { this.$set(this.todos, 0, 'coffee') }, }, } <button @click="updateTodo()"> Update </button> <ul> <li v-for="todo in todos"> {{ todo }} </li> </ul> TOTALLY FIXED WORKING CODE
18. ¯ Photo by Gabriel Jimenez on Unsplash Gotcha #3 Relying on immediate DOM updates
19. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { methods: { focusInput () { this.$refs.focus() }, }, } <button @click="focusInput()"> Focus </button> <input ref="input"> TOTALLY WORKING CODE
20. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { shown: false, } }, methods: { showInput () { this.shown = true this.$refs.input.focus() }, }, } <button @click="showInput()"> Show + Focus </button> <input v-if="shown" ref="input"> TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/aYELPY
21. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DOM UPDATES ARE ASYNC! • Buffered • Deduplicated • Efficient
22. Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { data () { return { shown: false, } }, methods: { showInput () { this.shown = true this.$nextTick(() => { this.$refs.input.focus() }) }, }, } <button @click="updateTodo()"> Update </button> <ul> <li v-for="todo in todos"> {{ todo }} </li> </ul> TOTALLY FIXED WORKING CODE
23. ¯ Photo by Guillaume Jaillet on Unsplash Proxy A bold new future
24. Jeff Schenck Meetup meetup.com/vue-sf Email jmschenck@gmail.com Slides goo.gl/P9L4dZ