Target-the original object which you want to proxy,
Handler-object has methods or traps that control the target object.
Inside the handler, methods are called traps. To modify the proxy, we define functions on the handler object. Let's start with an example.
Here target object is intercepted by the getting method. Handler functions sometimes behave as traps. Here get() method is a trap. We can assign a proxy.name=”newString” and we will get the latest value output. The proxy can access all properties of the target object. Below is an example.
here whenever we create the proxy object the “intercept “ output is coming in the console.
There are many proxy traps.get,set,apply,has,construct,and etc.
Let's look at the set proxy trap. The set trap must return true if the value was assigned successfully, otherwise false. Set contains three parameters.
- target – is the target object
- property – property name,
- value– property value,
let's look at an example.
Here we are setting the counter value as 22 .so output is “ not valid” according to the logic. but proxyTest.counter is getting 6.Here we are trapping the counter using the set method.
in this article, we have seen basic ideas about proxy and proxy traps (set and get). There is another feature called reflect we will look at that one in another article. These features are very important for Vue 3 reactivity system. Vue 3 reactivity was implemented by proxies and reflect concept.