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

Diving into Vue.js Reactivity

Avatar for Ignacio Anaya Ignacio Anaya
July 28, 2018
64

Diving into Vue.js Reactivity

Avatar for Ignacio Anaya

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