一次寫程式碼引發的vue資料驅動思考

本文只是前端小白在一次寫程式碼時突然的思考，不太嚴謹哈哈

今天在用vue+node+socket.io寫一個線上多人聊天網頁的程式碼時，遇到一個小問題，那就是基於以前用jq來寫前端程式碼時事件驅動的限制，導致今天下午用vue寫程式碼遇到的問題。
以前的事件驅動方式來操作檢視的基本步驟：

1. 獲取dom物件
2. 獲取資料（如常見的ajax）
3. 用新的資料來"修改"dom物件，或者用新的資料來新增新的dom物件
4. 更新dom

今天用這種方式來寫vue時就發現自己新新增的dom物件沒有被vue渲染例如：

var addHTML = '<p>{{newData}}</p>';
document.getElementById("id").innerHTML += addHTML;

此時如果你看瀏覽器頁面就會發現vue並沒有把dom渲染成vue的“虛擬”的dom元素而是<p>{{newData}}</p>這樣的真實dom元素。網上也沒找到什麼好的解決方式，但是突然想想既然選擇了使用vue就應該使用vue的資料驅動模式來發開而不應該拘泥與以往的事件驅動模式開發。
例如上面所說的例子就應該用一個vue的data屬性來繫結後臺獲取的資料來渲染到vue的“虛擬”dom元素。

this.data = newData; //newData從後臺獲取

把精力放在資料的操作上，當修改資料時vue已經幫你完成了資料的更新，而不是自己寫事件去獲取dom元素來更新。