When making a vuejs project there might end up being situations in which I might want to make an object observable, or reactive. When it comes to making a vue data object such an object is often observable to begin with at least when it comes to the top level of the object. In some situations I might have to do something to make sure that nested objects in the data object become observable when I add them to the data object. However what if I want to make a plain old object outside of a vuejs instance completely observable? Well one way is the use the vue observable Global API method.
So this will be a quick post on using the vue observable global API method, and in the process of doing so I guess I will end up touching base the the subject of reactivity using vuejs also.
In this section I will be going over a basic example of the vue observable global API method. This example involves using the vue render option as a way to create and update a vue rather than a simple vue template. If you are not familiar with creating a render method let alone a static template in vuejs then you will want to brush up on that before hand.
So say I have a state object that is just a plain old object outside of a vuejs instance, and it is this object that I am using as a state for the project rater than the vue data object. If I do not make this state object observable then the vue will not just update each time a change is made to the object. However this can easily be fixed by just calling the Vue.observable method and passing the state object as the first argument for this method. Now when I make changes to the state object in one of my methods in the vuejs instance the change to the state object will cause the vue to render again.
What is nice about using something like vuejs is that I can hind all of this kind of stuff aware into an external file, and I can just focus more on what really matters in a project.
So the vue observable method is there for quickly turning a plain old external object into a reactive one. Often the use of the method is not need though at least I can not say I am using the method that often thus far. In most cases I use the vue data object option as a way to create a state for the vuejs instance, and each time that is the case the object becomes observable to begin with. It is only in cases where things are not working as expected with reactivity that the vue observable method might have to be used in order to get that feature of vuejs to work with a project.