為什么vue避免了dom操作？

什么屬于操作dom？需要回答這個這個問題，首先，我們必須明白什么是dom；DOM 是 Document Object Model（文檔對象模型）的縮寫；

那么，有哪些dom操作呢？比如查找節點、添加節點、刪除節點、修改節點屬性，修改節點內容等等

對于為什么vue避免了dom操作，其實，根據我的理解，并不是vue避免了dom操作，而是vue的架構中，已經幫我們完成了這些操作，亦或者說是，它是通過數據的改變，去自動驅動dom的改變，在我們平常看來，我們只需要修改數據，那么整個dom結構，文檔內容都會自動完成，就好像我們沒有進行dom操作一樣，其實不然，只是當我們進行數據改變的時候，vue已經幫我們完成了dom操作而已；

這也就是所謂的雙向綁定，數據驅動；

比如，當我們需要在對某個元素進行數據綁定時，我們都知道，直接在元素上添加"v-text='text' "當text值變化時，對應元素的內容也就改變了；那么，它里面具體干了些什么呢？

首先，我們應該明白，“v-text”其實是vue中的一個指令，也就是directive；源碼如下：

也就是在將v-text綁定到元素上時，首先會判斷此元素的元素類型，如果nodetype是3，也就是文本節點時，如果是文本節點，則通過修改其data屬性去修改文本內容；如果是其他節點，則通過修改其textContent去修改節點的值；當值變化時，就會執行“this.el[this.attr] = _toString(value)”去修改節點內容；

所以，其實vue并不是避免了dom操作，它其實也進行了dom操作，只是包含在框架內，讓我們沒有明顯感知到而已