[Vuejs]-Updating state of the app without touching the DOM – Vue.js

by

1👍

✅

One of the cornerstones of Vue.js is its simply implemented two-way data binding. This means that when a state or data value is changed within the Vue object/instance, it is also synced and changed in the DOM and vice versa without having to manually update both.

In a pure Javascript situation such as:

function changeData() {
  document.getElementById('data').innerHTML = "Second";
}
<div>
  <span id="data">First</span>
</div>

<button onclick="changeData()">Change Value</button>

In this, we are directly manipulating the DOM to change the text value of the span element, however, with Vue's two-way data binding, only the instance’s state/data must be changed for both to update.

👤m_callens

1👍

If I really simplify it, then I would say that it’s the data that’s used for your application. Which includes, for example, your reversed string.

Or for example:

State: { isSwitchedOn: false }
UpdateStateFunc: (state, value) => state.isSwitchedOn = value;

So, we can update isSwitchedOn using UpdateStateFunc, but that doesn’t mean we push that data to the DOM (ie. what’s visible to the user). Making it visible to the user would be, perhaps, another function.

👤Icid

Leave a comment