Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Diving into Vue.js Reactivity

Ignacio Anaya
July 28, 2018
57

Diving into Vue.js Reactivity

Ignacio Anaya

July 28, 2018
Tweet

Transcript

  1. Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Ambassador

    @Auth0 • Ambassador Na>veScript • Organizador @Vuenos_Aires Diving into Reac-vity - @ianaya89
  2. new Vue({ data () { return { hi: 'Hi !

    ' } }, template: `<h1>{{ hi }}</h1>` }) Diving into Reac-vity - @ianaya89
  3. let value = 1 let doubleValue = value * 2

    console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89
  4. let value = 1 let doubleValue = value * 2

    console.log(doubleValue) // 2 value = 2 console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89
  5. let value = 1 let doubleValue = value * 2

    console.log(doubleValue) // 2 value = 2 doubleValue = value * 2 console.log(doubleValue) // 4 Diving into Reac-vity - @ianaya89
  6. ! Reac&vidad en Frameworks: • Angular: Dirty checking • React:

    setState • Vue: Ge6ers y Se6ers Diving into Reac-vity - @ianaya89
  7. function r(obj) { const wrapped = {} for (let k

    in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89
  8. function r(obj) { const wrapped = {} for (let k

    in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89
  9. function r(obj) { const wrapped = {} for (let k

    in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } const reactiveData = r({ foo: 1 }) reactiveData.foo++ console.log(reactiveData.foo) Diving into Reac-vity - @ianaya89
  10. const component = { el: document.getElementById('app'), data: { hi: 'Hi

    ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() Diving into Reac-vity - @ianaya89
  11. const component = { el: document.getElementById('app'), data: { hi: 'Hi

    ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() Diving into Reac-vity - @ianaya89
  12. const component = { el: document.getElementById('app'), data: r({ hi: 'Hi

    ! '}), render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } Diving into Reac-vity - @ianaya89
  13. const component = { el: document.getElementById('app'), data: r({ hi: 'Hi

    ! '}), render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() component.data.hi = 'Bye ✌ ' component.render() Diving into Reac-vity - @ianaya89
  14. function r(obj, cb) { const wrapped = {} for (let

    k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89
  15. const component = { el: document.getElementById('app'), render () { this.el.innerHTML

    = `<h1>${this.data.hi}</h1>` } } component.data = r({ hi: 'Hi ' }, component.render.bind(component)) Diving into Reac-vity - @ianaya89
  16. function BiuSheiEs (vm) { const data = vm.data || {}

    const render = vm.render.bind(vm) vm.data = r(data, render) return vm } Diving into Reac-vity - @ianaya89
  17. const component = new BiuSheiEs({ el: document.getElementById('app'), data: { hi:

    'Hi ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } }) Diving into Reac-vity - @ianaya89
  18. function r(obj, cb) { const wrapped = {} for (let

    k in obj) { let value = obj[k] if (typeof value === 'object' && !Array.isArray(value)) { value = r(value, cb) } Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89
  19. const component = new BiuSheiEs({ el: document.getElementById('app'), data: { user:

    { name: '@ianaya89' } }, render () { this.el.innerHTML = `<h1>Welcome ${this.data.user.name}</h1>` } }) Diving into Reac-vity - @ianaya89