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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容