更新應用程序的狀態，而不觸及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（即什麼是對用戶可見）。也許，使其對用戶可見是另一個功能。