General context
In the world of Web Development from around let’s say 2005, until 2013
there was intensely practiced programming called
Imperative Programming.
According to this approach code is written so that it lists out what to do
step by step.
In the world of Declarative Programming instead, there are some
rules listed out, that an
application should follow. Something called an initial state of an application is provided and those
rules define how an application behaves.
So in imperative programming we have step by step directions and let’s say an 'end product', a
result.
On the other hand in declarative programming we have an initial state (variables, objects, &c.), set
of rules that are applied to this state and the process of repeating this over and over until we
have an 'end product', a result.
In this process a state is being changed, and next this
state
is being taken and applied to the rules again with the assumption that there is a check which rule
to apply and which rule doesn’t apply, and which one has been already applied. And at the end of
this
process we have the final state (an 'end product', a result).
When it comes to Vue, in the case of declarative approach,
inside Vue Instance we can declare a data (state), then inside
this Vue Instance we define a set of
rules that tells this Vue Instance how it should behave when something occurs inside of application.
Declarative Applications with the Vue API
There are different properties that are defined in Vue Instance to
implement the approach:
data
At the very top, we start with the initial state.
In Vue Instance, we refer to this as a property defined as data.
So that it tells our instance what kind of starting data are inside our application.
Data property is to initialize data inside of an application - it defines initial state of Vue
Instance.
methods
The purpose of the methods property is to define a bunch of functions that are supposed to somehow
update the data.
All the functions that we’re going to see on methods is going to describe how we might update data
inside of application and what is being used inside of it.
So methods property is to change the data. It defines ways the state can be modified.
computed
Next, anytime we want to consume that data and get it into our actual Vue Template or actually show
it on the screen in some fashion, we’re going to use a computed property.
However, here inside of the computed object there are also functions defined
to turn the current, result data into viewable values.
new Vue({
el: ”#app”
data: { //initializes state
}
methods: { //functions to change the data
}
computed: { //turns data into viewable values
}
})
Generally, data, methods
and computed are parts of the
Vue API.