JSFoo: VueDay 2019

A day spent discussing Vue.js, developments in the Vue ecosystem and component architecture

Understanding Vue's Reactivity System by Building One

Submitted by Praveen Puglia on May 2, 2019

Section: Full talk (40 mins) Technical level: Intermediate Status: Confirmed & Scheduled


Understanding how Vue implements its reactivity system from ground up, its gotchas and what’s coming in future.


  • What is reactivity?
  • Why do we care
  • Events in the DOM world.
  • Building a solution
  • Scaling the solution
  • Solving problems with automatic dependency collection and event management.
  • Caveats
  • Future and things Proxy based reactivity system solves.


  • Intermediate JS knowledge
  • Basics of Vue

Speaker bio

Love CSS & Vue. Working on Machine Learning & Visualizations at Voicezen.





  • Abhishek Balaji (@booleanbalaji) a year ago (edited a year ago)

    Hi Praveen,

    We need your slides and preview video before 28 May to evaluate your proposal. Please make sure your slides cover the following:

    • Clear problem statement, about a challenge that is generally applicable and not a company specific problem.
    • Approach to solving the problem.
    • Deep dive.
    • One clear takeaway.
  • Swapnil Agarwal (@swapagarwal) a year ago (edited a year ago)

    Hello Praveen! 👋
    Did you get time to work on the slides by any chance? 😇
    You can post a work-in-progress draft here as well, and we can work on refining the content. Let me know either way! 😅

  • Praveen Puglia Proposer a year ago

    Hey Swapnil,
    I haven’t really created slides for it just yet. Gonna work on them this weekend and have a draft put up here.

  • Praveen Puglia Proposer a year ago

    I just added the link to the slides that I have just started working on.

  • Abhishek Balaji (@booleanbalaji) 11 months ago

    Hi Praveen, thanks for taking the time to do the rehearsal, here’s the feedback:

    Time taken: ~13 mins
    - Text on the slides needs to be made bigger, for clarity and readability.
    - Use better font colors when showing code; use syntax highlighting
    - Show a summary of the topics you’d be covering
    - Add more examples or show different approaches in explaining reactivity.
    - Elaborate on reactivity for those new to Vue
    - Add explanation on the varuous ways you can use the computed properties. Explain the under the hood properties and get into a couple of recipes for using the propertoes you’ve used in the code base.
    - Show code written in Vue to elaborate on your points
    - Instead of a,b, console.log show a visual example of reactivity like the vuejs getting started guide
    - Put in a small disclaimer, onmousemove is an example, and in real world production will demolish performance if we actually do that
    - Outside in approach instead of inside out, as people might get distracted when internals of handlers are discussed, and they don’t know yet how it connects to Vue data watchers
    - Talk was very fast paced and difficult to follow for someone new. Slides are distracting because of code shown and too much text
    - Answer the fundamental question of using Reactivity in Vue
    - When mentioning proxies for the future, expected a takeaway there. Even if it is repetition, it should be in the presentation.

    Please send in your revised slides by 23 August with the updated content.

    • Praveen Puglia Proposer 11 months ago

      Hi! I have updated the slides on the same URL. Feedback please!

Login to leave a comment