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 observable to begin with at least when it comes to the top level of the object. However this might not always end up being the case when it comes to nested objects in the data object, and it is also not the case when it comes to an object that is outside of a vuejs instance compleatly.
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. When it comes to those kinds of situations I might want to go with the vue set method. 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.
1 - Basic vuejs observable example
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.
2 - Avoding the use of Vue.observable
I try to do my best to avoid using methods like Vue.observable actually, because it seems like if I code things a certain way it is not needed. If I have an external state object as a single stand alone object, and I do not want to make that object part of a vue instance and keep it in its own separate place then maybe that is how I have to go about doing it. Still I think that an extremal state object should not just be a single state alone object but the result of the calling of a constructor function, or some kind of main create method in a module. This way I can call such a create method inside the body of a function that I use with the data option of the main vue constructor, this seems to work well for me.
3 - Getters and setters under the hood.
4 - conclusion
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.