更新应用程序的状态，而不触及DOM - Vue.js

Question

我正在通过Vue.js指南，我碰到this段落。它说：在方法

注意，我们只是不沾DOM

基本方法简单地逆转上的一个按钮的点击字符串更新我们的应用程序的状态。我无法理解的是Updating the state of app的概念，而不涉及DOM。这里的国家是什么意思？有人可以用通俗的话来解释这一点吗？

Answer 1

Vue.js的基石之一是其简单实施的双向数据绑定。这意味着当状态或数据值在对象/实例内更改时，它也会在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's只有实例的状态/数据必须改变才能更新。

Answer 2

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

或者例如：

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

因此，我们可以使用更新UpdateStateFuncisSwitchedOn，但这并不意味着我们推送数据到DOM（即什么是对用户可见）。也许，使其对用户可见是另一个功能。