前端框架必备基础知识点

什么是虚拟DOM

用一个普通的Javascript对象来描述真实的DOM节点，虚拟DOM对象通常描述如下

{
  tag: 'div',
  props: {
    class: 'container'
  },
  chidren: [
    {
      tag: 'p',
      props: {
        className: 'info'
      },
      children: [
        'Hello World'
      ]
    },
    '1024nav.com'
  ]
}

从上面可以简单看出，一个 div，class 为 container，有两个子元素，一个是 p 标签包含一个文本，一个是纯文本，上面的对象可以表示成下面的 html 结构

<div className="container">
  <p className="info">
    Hello World
  </p>
  1024nav.com
</div>

当然这里只是一个简单的例子，声明的方式有多种，只需要能够描述一个DOM树结构即可。

为什么需要虚拟DOM

浏览器真实的DOM结构非常复杂，我们如果直接批量操作DOM的时候，代价会非常昂贵，这时候如果能在内存中维护一个虚拟的DOM，当状态变更，可以再创建一个对象，通过新旧对象来对比，就可以把差异找出来，再更新到真实的DOM上，这样效率会大大提高

参考资料

什么是虚拟DOM

什么是双向绑定

数据模型-视图相互影响，数据模型既可以渲染视图，视图也可以通知模型改变数据。

举个例子，有一个表单，定义一个 data 对象，通过JS渲染到表单上，如果表单输入框改变，自动更新 data 对象的数据，就是一个双向绑定的流程了。

Vue跟React对比

相同点

1. 都是通过虚拟DOM来描述真实的DOM树，数据驱动视图更新。
2. 拥有相同的状态管理数据流
3. 拥有自身的路由系统，history/hash路由
4. 都有自身的一套生命周期管理组件

不同点

1. react提供了一套jsx语法给我们开发，vue更像是原始的html，script，vue，css单独分开编写
2. vue有提供一些自定义指令，react则没有