3 years ago

Category: PHP, javascript

In this short series of blog posts, I'm going to be showing you how reactive JavaScript frameworks such as Alpine.js and Vue.js work under the hood. We'll begin by understanding the Proxy object in JavaScript and create our own budget version of Alpine.reactive().

It allows you to intercept the basic operations on an object, for example retrieving a property, setting a property or deleting a property.

We can recursively call reactive for each of the properties on our original object when they're typeof is object.

When we set the value of a property, we'll also pass the value through reactive to ensure that any objects are wrapped in a Proxy too.