前言

与Vue结缘已一年有余，趁闲暇之际，想进一步探索这门框架的魅力，借此做个简单记录分享。当拿到一门框架想进一步探究其庐山真面目时，应该如何下手是一些新手面临的难题，笔者也不列外。此本分享还未涉及到Vue各模块实现思路，重点在于讨论视图层框架设计方面内容。

什么是编程范式？

命令式

  let stylee = document.createElement('style')
  stylee.type = 'text/css'
  stylee.innerHTML =data.styleSheet
  document.getElementsByTagName('head').item(0)!.appendChild(stylee)

声明式

  const getValHtml = () => {
  valueHtml.value = editor.getContents()
  return valueHtml.value 
}

既然命令式性能优于声明式，Vue最终为什么选择了声明式？

原因就在于声明式代码的可维护性更强。在采⽤命令式代码开发的时候，我们需要维护实现⽬标的整个过程，包括要⼿动完成 DOM 元素 的创建、更新、删除等⼯作。⽽声明式代码展⽰的就是我们要的结 果，看上去更加直观，⾄于做事⼉的过程，并不需要我们关⼼，Vue.js 都为我们封装好了。

Vue的性能如何提升？

前面脑图上有简单总结，命令式性能是优于编程式，假设命令式更新代码消耗性能为A，声明式更新时去寻找差异化消耗性能为B，找到后更新性能为A，则最终性能=A+B，结果大于A。通过这个公式很容易发现，Vue性能提升的发力点就在于去减小B的性能消耗，当B无线接近于0时，声明式性能则无线接近于命令式。

思考

做为一名优秀框架，除了要考虑性能还需要考虑可维护性，二者间寻得一个平衡点才是最佳

虚拟DOM

接触过Vue的人大体都了解或知道虚拟DOM这个概念，而它的作用就是用于去减小前面提到的B寻找DOM差异性能消耗

什么是虚拟DOM？

虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）

实际上它只是一层对真实DOM的抽象，以JavaScript 对象 (VNode 节点) 作为基础的树，用对象的属性来描述节点，最终可以通过一系列操作使这棵树映射到真实环境上

在Javascript对象中，虚拟DOM 表现为一个 Object对象。并且最少包含标签名 (tag)、属性 (attrs) 和子元素对象 (children) 三个属性，不同框架对这三个属性的名命可能会有差别

创建虚拟DOM就是为了更好将虚拟的节点渲染到页面视图中，所以虚拟DOM对象的节点与真实DOM的属性一一照应。

真实DOM：

<div id="app">
    <p class="p">节点内容</p>
    <h3>{{ foo }}</h3>
</div>

虚拟DOM：

{return _c('div',{attrs:{"id":"app"}},[_c('p',{staticClass:"p"},
[_v("节点内容")]),_v(" "),_c('h3',[_v(_s(foo))])])}

对比

总结