Vue supports two-way binding through the excellent
v-model directive, and one-way binding using a
:value= syntax. Both have their uses within a Vue component. There are good enough reasons to use one over the other.
First, let’s look at an example of two-way binding -
v-model is a short form of
v-bind. The above statement is equivalent to -
When you change
message in input box, the variable value will change. If an external logic (or a computation) changes
message, the input box value will change. So 2-way binding literally binds the DOM element to the variable value in ViewModel (you do remember that Vue is MVVM, don’t you :)).
Next, this is how we do one-way binding.
As was the case in
v-model, this is equivalent to -
By this time you would probably understand that a
: in binding context is always equal to
v-bind:. Vue provides the shortcuts in form of
In the above 1-way bind statement, whenever the
message value in
data changes, the
input value will change. However, there is no functionality to update the
data variable when
input is changed (it just a ‘one-direction flow’).
At first, the two may seem confusing. Why go through the trouble of using a one-way binding? What is the advantage of one over the other? There are a few reasons -
Special Value Bindings
Consider this - you have to bind variable in the UI to a
data variable. However, any updates should apply a complex set of rules before updating the original variable. There is no way to do this in
v-model since it behaves like a simple
In the below example using Vuetify, password is a decrypted form of a hashed string. When password is updated, the string entered by user will be hashed and updated in the variable.
One way binding is advantageous in terms of performance. Vue does not have to track changes to the variable in UI when there is one-way binding. So - if you don’t care about changes to the variable (e.g. a read-only field, or throw-away value), use 1-way rather than 2-way binding.