How to Build Your Own Reactivity System

Too Long; Didn't Read

A couple of months ago, I attended an in-person meetup at <a href="https://medium.com/@FrontendMasters" data-anchor-type="2" data-user-id="1b199ed2dfd" data-action-value="1b199ed2dfd" data-action="show-user-card" data-action-type="hover" target="_blank">Frontend Masters</a> called <em>Vue.js Advanced Features from the Ground Up</em>. It was really awesome because we got to learn about <a href="https://medium.com/@vuejs" data-anchor-type="2" data-user-id="9b930cf6db26" data-action-value="9b930cf6db26" data-action="show-user-card" data-action-type="hover" target="_blank">Vue.js</a> from its creator, <a href="https://medium.com/@youyuxi" data-anchor-type="2" data-user-id="4f198f5f1f12" data-action-value="4f198f5f1f12" data-action="show-user-card" data-action-type="hover" target="_blank">Evan You</a>. Instead of just teaching us how to use Vue, he showed us how to actually implement a few parts of it. Reactivity was the part that interested me the most, so, after the class, I dug into <a href="https://github.com/vuejs/vue" target="_blank">Vue’s source code</a> to learn more about exactly how its reactivity system works. In this guide, I’ll explain how Vue’s reactivity system is implemented, and show how you to make your own working reactivity system.