Vue.js 3 Complete Guide [2/10]

Next, let’s try the factory pattern. It returns us the opposite result as the singleton pattern.

We create a function. We name it infoFactory. Inside it, we return an object. In the returned object, we set the city property and set its value to London as well.

The returned object is defined inside the factory function. Every time we run the factory function, it returns us a new object. In other words, every time we run the factory function, we receive a new memory address.

We assign the invocation of the factory function to instanceA and instanceB.

Let’s output them. It seems that the two variables return us two identical objects. But these two objects are not the same. They just look identical.

If we reset the city name via instanceA, instanceB won’t be affected. Likewise, if we reset the city name via instanceB, instanceA won’t be affected either.

InstanceA and instanceB point to two independent objects. There is no connection…