一次写代码引发的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元素来更新。