javascript - 在不接触 DOM 的情况下更新应用程序的状态 - Vue.js

Question

我正在浏览 Vue.js 指南，发现 this段落。它说:

Note in the method we simply update the state of our app without touching the DOM

基本上，该方法只需单击按钮即可反转字符串。我无法理解的是在不接触 DOM 的情况下更新应用程序状态的概念。这里的国家是什么意思呢？有人可以用通俗的语言解释一下吗？

Answer 1

Vue.js 的基石之一是其简单实现的双向数据绑定(bind)。这意味着当 Vue 对象/实例中的状态或数据值发生更改时，它也会在 DOM 中同步和更改，反之亦然，而无需手动更新两者。

在纯 Javascript 情况下，例如:

function changeData() {
  document.getElementById('data').innerHTML = "Second";
}

<div>
  <span id="data">First</span>
</div>

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

在此，我们直接操作 DOM 来更改 span 元素的文本值，但是，使用 Vue 的双向数据绑定(bind)，只能更改实例的状态/数据必须更改才能更新。