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

Question

我浏览了Vue.js指南，并且遇到了this段。它说：

  

请注意，在方法中我们只是更新应用的状态而不触及DOM

基本上，该方法只需在点击按钮时反转字符串即可。我无法理解的是Updating the state of app没有触及DOM的概念。这州的意思是什么？有人可以用外行的方式解释这个吗？

Answer 1

如果我真的简化它，那么我会说它是用于您的应用程序的数据。例如，其中包括您的反向字符串。

或者例如：

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

因此，我们可以使用isSwitchedOn更新UpdateStateFunc，但这并不意味着我们会将数据推送到DOM（即用户可见的内容）。让用户看到它可能是另一种功能。

Answer 2

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

在纯Javascript情况下，例如：

＆＃13;

＆＃13;

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

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

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