Source: ryangjchandler.co.uk

The Magic Behind Reactivity - Proxies

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.
Newsletter

Get the latest Laravel/PHP jobs, events and curated articles straight to your inbox, once a week

Fathom Analytics | Fast, simple and privacy-focused website analytics. Fathom Analytics | Fast, simple and privacy-focused website analytics.
Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future. Achieve superior email deliverability with ToastMail! Our AI-driven tool warms up inboxes, monitors reputation, and ensures emails reach their intended destination. Sign up today for a spam-free future.
Community Partners