使用Vue等框架的首要原因是为了开发效率，还是减少DOM操作的性能损失？

很多半吊子的程序员开口就喜欢谈论性能，动不动就是“这个框架性能不行，不如原生XX快”等等，如何评价这种说法呢？硬要说的话，速度确实是一个非常重要的因素，但是很多项目其实并不那么追求速度，大部分情况下，开发效率这个因素都要大于项目的运行速度，要明白，人的效率永远应该是第一需求。

前端开发也是这样，其实原来大家都用jQuery这些东西，简单粗暴，直接操作界面，想实现什么功能直接撸就完事了。但是在项目逐渐复杂起来之后，这样的开发方式就会出现一个问题：代码组织度极低，项目可维护性差，特别是当项目中很多页面有层级关系时候，很容易把自己绕晕。

因此Vue、React、Angular等框架应运而生了，他们利用MVVM等设计模式，在更高层级抽象页面开发逻辑，使用他们开发不再需要直接操作DOM了，而且相比于传统的开发方式，这些前端框架更加注重“数据流”。现在不应该把网页看做是一个网页，而是将它看做是一个网页形式呈现的应用。这样将数据和行为分开以后，前端开发也更加清晰了，这也是前端发展的一个重要标志。

虽然这些框架使用虚拟DOM等技术，相比于直接操作DOM要慢一点，但是因为采用了合理的抽象，因此开发效率是远远超过传统前端的。试想一下，这两种方法开发出来的项目运行效率差0.5%，但是传统开发要多一倍的bug，要是你的话，你会选哪种呢？

使用Vue等框架的首要原因是为了开发效率，还是减少DOM操作的性能损失？

为什么要使用框架？

软件系统发展到今天已经很复杂了，特别是服务器端软件（前端也是如此），涉及到的知识，内容，非常广泛。这样开发出完善健壮的软件，对程序员的要求将会非常高。如果采用成熟，稳健的框架，那么一些基础的通用工作，比如，事物处理，安全性，数据流控制等都可以交给框架处理，那么程序员只需要集中精力完成系统的业务逻辑设计，可以降低开发难度。

从程序员角度看，使用框架最显著的好处是重用，由于框架能重用代码，因此从一已有构件库中建立应用变得非常容易，因为构件都采用框架统一定义的接口，从而使构件间的通信简单。框架能重用设计。它提供可重用的抽象算法及高层设计，并能将大系统分解成更小的构件，而且能描述构件间的内部接口。这些标准接口使在已有的构件基础上通过组装建立各种各样的系统成为可能。只要符合接口定义，新的构件就能插入框架中，构件设计者就能重用构架的设计。框架还能重用分析。所有的人员若按照框架的思想来分析事物，那么就能将它划分为同样的构件，采用相似的解决方法，从而使采用同一框架的分析人员之间能进行沟通。

结论

框架的目的是为了提高工作效率，便于大规模团队协作，让开发人员更关注业务逻辑，还有就是避免一些通用问题的出现，当然，如果是高水平前端开发，某些场景直接操作dom可能代码效率更高。

因此，虽然框架是好东西，但基础的dom 操作必须要学，属于必备技能。

用了react或者vue，如何做SEO优化呢？

使用 React 或 Vue 做 SEO 优化需要借助 Nodejs 实现服务端渲染（SSR）。

而要实现服务端渲染需要先搭建一个脚手架，你可以自己从零开始搭建脚手架，但这很麻烦。最简单的就是使用开源的框架，它们一般内置就封装好了脚手架，比如基于 React 的 Next.js，和基于 Vue 的 Nuxt.js。你也可以借助开源的脚手架比如 Razzle 来实现 SSR 渲染。Razzle 是我用过的比较好用的工具，因为它灵活。下面以 React + Razzle 为例，讲讲如何做 SEO 优化（本文的示例代码放在GitHub：github.com/liamwang/react-starter）。

首先，使用 Razzle 搭建脚手架，使用如下命令安装 Razzle 并运行它：