Reactivity Learning by accident 

¯ Accidents “Happy little accidents” Photo by marco forno on Unsplash 

¯ Photo by Jeremy Bishop on Unsplash Gotcha #1 Adding and removing properties 

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 }, }, }

{{ total }}

TOTALLY WORKING CODE 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY TREE! quantity price total {{total}} 10 3 30 '30' 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY TREE! quantity price total {{total}} 3 5 15 '15' 

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 }, }

{{ total }}

TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/yKpzPJ 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY ISLAND? quantity price total {{total}} 10 3 30 '30' 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DEPENDENCY ISLAND? quantity price total {{total}} 3 30 '30' 5 

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 },

{{ total }}

TOTALLY FIXED WORKING CODE 

¯ Photo by Annie Spratt on Unsplash Gotcha #2 Modifying array indices 

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') }, }, } Add

• {{ todo }}

TOTALLY WORKING CODE 

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' }, }, } Update

• {{ todo }}

TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/geoGeJ 

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 

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') }, }, } 

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 

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') }, }, } Update

• {{ todo }}

TOTALLY FIXED WORKING CODE 

¯ Photo by Gabriel Jimenez on Unsplash Gotcha #3 Relying on immediate DOM updates 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident export default { methods: { focusInput () { this.$refs.focus() }, }, } Focus TOTALLY WORKING CODE 

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() }, }, } Show + Focus TOTALLY NOT WORKING CODE https://codepen.io/jeffschenck/pen/aYELPY 

Vue Reactivity https://speakerdeck.com/jeffschenck/vue-reactivity-learning-by-accident DOM UPDATES ARE ASYNC! • Buffered • Deduplicated • Efficient 

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() }) }, }, } Update

• {{ todo }}

TOTALLY FIXED WORKING CODE 

¯ Photo by Guillaume Jaillet on Unsplash Proxy A bold new future 

Jeff Schenck Meetup meetup.com/vue-sf Email [email protected] Slides goo.gl/P9L4dZ