主题：【原创】jquery 和 vue -- 铁手

西西河的网站前端开发，我以前主要用 jquery。因为前端后端都是自己做，所以知道该在什么地方用 jquery 作什么事情，自我感觉逻辑清晰，问题分隔比较清楚，一旦有什么问题，基本上能够很快找到地方，然后进行适当的修改，完工。

总体而言，我觉得 jquery 的主要好处是定点精细操作，不好的地方是如果程序大了，这些定点的唯一性比较难以把握，特别是在定型后添加新东西的时候。

本来我觉得用 jquery 基本上够用，只是最近几年来更新似乎停顿，网上有说法因为一些其他的前端工具的兴起，jquery 逐渐的被人放弃，我也只好看看其他的选择。其实，在我看来 jquery 简单明了，功能强大，不维持有点可惜。不过，也许是我的思维方式比较老套。

我现在决定选择用 vue js 作前端，主要原因是看起来容易上手，设计理念上也比较符合我的思路。

jquery 的时候，是对网页里的 dom 直接操作，需要通过选择定位，然后对那个定位进行操作，比如动画，比如添加新内容，取消旧内容，特别是通过 ajax 获得后台新内容时，直接了当。

用 Vue 的时候，思路上需要有一个比较根本性的转变。它的基本概念是：数据驱动的界面元素改变。我要做的，主要是提供数据，然后这些数据来驱动设定的模板来显示内容。最大的好处是，我只需要关心数据和显示的模板，具体的显示则交给 Vue 去实现，包括数据变动时的即时更新。 jquery 的时候，要自己去更新，除此之外，jquery 也基本上不做什么，所以客户端有没有瓶颈，瓶颈在什么地方，也容易知道。Vue 的话，显然它需要不断检测数据是否变动，所以除了更新显示以外，应该还需要消耗额外的资源来监测。但是没有看到有人抱怨这个，估计对性能没什么不良影响。

眼下看来，Vue 的确也很方便，对于单个页面来说，用 component 来组织页面，动态显示和更新的确很容易。不幸的是，我现在卡壳在怎么显示通过 ajax 载入的内容。

比如以一个弹出窗口为例子。如下的格式：

-- 标题 --

-- 内容 --

用 jquery 的话，就用 ajax 获得的内容直接更新就行了。Vue 不太好这么作。按我目前的理解，最好是建立一个模板，然后 ajax 更新的是其中相关的数据。问题是，jquery 可以用一个格式来塞各种内容。用 vue 的话，就需要对不同的内容套用不同的模板，感觉有些复杂。但话说回来，jquery 的时候，也可以看作是服务器在套各种模板，vue 则是简化服务器，客户端多了一些工作。也能说的过去。

最大的问题，目前还没有想通的是，比如以下的内容：

如果在一个完整页面上，显示没问题。vue 在页面载入后对这些 vue 相关的内容进行了处理，这些 component 被转换成相应的html来显示。那如果这段内容是通过 ajax 载入的话，怎么让它正常显示呢？

组件里面，加载时，发起网络请求，然后用数据填充html模版就可以了。这样的组件可以全站复用

新的JS语言标准已经内置了功能。比如 Fetch。并且浏览器现在基本就两大阵营：Chrome 和Firefox。这两家更新很快，对新标准支持很快。

我一般设计网站的方式是服务器只提供JSON数据。前端基于json数据画界面。这样前后端解耦合，可以独立开发验证。

用vue的时候，建议用axio做ajax。它的API是async。取回后可以绑定component的data或者用method预处理一下。可以针对一页（比如全看）一次取出，然后用一组嵌套的component一次render。也可以每一个component自己调一次axios（比如每一贴）。前者io交互少，后者数据流量小。

初学 Vue，还没仔细看 Vuex 和 Vuerouter。现在也不敢大规模改，只是对部分地方用 Vue 来实现一些功能的加强。

曾经考虑过服务器端只取数据，然后完全交给客户端来做显示，但是考虑到搜索引擎，我现在大致确定所有需要被搜索引擎检索的内容由服务器端送出，Vue 在客户端做一些点缀。

本来以为可以用 slot，只要搜索引擎 bot 能看到 slot 里面的内容就可以，不过看起来也只能是一个 slot 的情况下。用 named slot，那些内容就被忽略了。

所以暂时不能采用服务器送所有数据，然后由客户端的component 来显示。这个方案看上去的确很诱人，但是我不知道怎么对付搜索引擎的检索。按我的理解，目前为止，大概也就是google才会解析检索 javascript 形成的内容。或者专门做一个版本供搜索引擎检索？

你和 @少侠请留步 都提到 每个 component 自己调一次 ajax 来获得数据。我之前没想到这点，你们一提，有茅塞顿开的感觉，估计能解决我现在的问题。

以看单帖跳出来的这个窗口为例子。

现在的做法是，ajax 获得服务器来的内容，直接塞到弹出窗口里的一个 div。如果用 Vue 的话，是不是用一个 watcher 来响应用户的点击，然后去后台去数据？因为前面提到的搜索引擎的考虑，我现在没法在每个帖链接上做 vue 的 v-on:click。

单帖内容里，有一部分是另外的 component，这些也需要显示。现在大概有两个思路，一个是在前台做组件搭模板，后台只提供数据。不好的地方是，后台需要根据情况准备两个版本，完整页面一个版本，弹出一个版本。另外一个思路，应该是老思路了，就是后台只有一个版本，ajax 抓回来的内容想法让它融入到 Vue里，包括里面的 vue component。眼下这些返回的内容只被看作是纯字符串。我又看了一下 Vue 的文档，也许 Vue.extend() 再加上 $mount 可以实现这个方案？ Vue.extend, Vue.compile 有什么差别？

https://segmentfault.com/a/1190000019623624 可以参考这篇文章。我没有在实际案例中使用过，所以不敢保证是否有大坑，仅供参考。

vue的话，更多开发理解落在业务逻辑上，将细节的渲染脱藕了。我做的项目基本上前端就是个静态页面，靠数据来刷新，负载均衡什么变得容易多了。

可惜我的工作是一阵阵的，一会儿这一会儿那，VUE已经快一年多没有去摸了，虽然开发还是我去指导，细节这个只能是具体干活时候才会深入。

vue这块侧重于业务逻辑，具体到手机还是PC机浏览器这里，这还是CSS编程的范畴，图省事，上bootstrap，有grid编排布局，响应式的，对各种终端有比较好的适配。复杂一点，应该是css-less这种，将CSS当做编程语言对待，需要编译一下，作为生产环境使用。

不要把VUE当做样式布局对待，除非对布局没啥追求，土土的干也行，比如硬插一个DIV；VUE侧重于业务逻辑，数据驱动逻辑。

另外我开发企业内部网站比较多。对于大流量像西西河这样不是很有经验。

下面是我的理解，没有读过vue源码，不一定正确，主要是建立一个理解它思想模型。

1. Vue vs. div

一个Vue相当于一个div元素的。一个HTML通常从一个div开始嵌套，一个Vue工程也是一个new Vue()开始，然后里面再一个个Vue对象嵌套。Component 是一个定制化的Vue对象。当你开始用脚手架开始，用.vue文件来开发时，表现得特别明显。

一个.vue文件包含 模板（HTML）， JS代码（预先定义好原形的类method）, css 。模板顶级element有并且，只能有一个顶级div.

总结一下， vue 就是一个加强版的div, 使得对这个div的style，attributes， event等好处理。把Vue对象一一对应起来有助于整齐思考网页的设计。

2. vue.component(), vue.extend(), vue.component()

一个.vue文件对应于一个component，这是一种IDE友好的可视化写法，比vue.component()这种纯代码直观的多。也有利于组织源代码。

但是这不是标准的js语法，所以Vue需要先把这个文件作为普通的字符串，装载再语法解析，翻译成标准的js文件，再生成DOM树，当然夹杂很多优化，不然就没有意义了。这个事情有vue.compile()来完成。

所以如果你用.vue文件来写component, 基本不需要使用compile, extend etc. 脚手架就是一个自动调用这些api的框架，用来解释自己的DSL(domain specific language)，那些.vue文件。

3. vuex,router

这些客户端路由主要用于SPA（single page application）,西西河更类似行为网站，而不是应用Application，没有太多客户端状态需要保留和切换，不是很有用。这些客户端路由基本上是利用业内跳转(#),或者history api(浏览器的前进后退按钮来实现）。西西河目前的API挺好，只需要把他们转换成返回数据I，用component发送ajax访问就好了。

4. SEO

我做intranet网站多，所以没什么经验。

Google 的爬虫是爬下来，用chrome render后才索引的，我觉得西西河不用担心js使用太多这个问题。其他主流估计也差不多。

另外vue也只支持server 端 render。但是要用node js。不知道西西河的后端是是什么。

是一个版本供人和引擎一起用，还是人一个版本，引擎一个版本。我眼下考虑就一个版本算了，只要保证搜索引擎忽略 javascript 的情况下，能够检索到干货内容就可以。

css 上目前也是有些问题，主要是桌面上的 hover 效果怎么更方便的在触摸设备上能够简便体现。

对于搜索引擎，我最大的顾虑，一是内容能不能被检索，二是搜索引擎会不会因为特定版本认为我作弊。

眼下我考虑暂时还是用网页骨干内容 + VUE前面动态或点缀的方式，可惜不能完全利用 Vue 的优势。

你的第一点看得相当透彻。这些天下来，碰壁无数次后，我也是有这个模糊印象，铁手:【原创】菜鸟初学 Vue js，之一，为什么是它，不过你说的更清楚。特别是 vue component 基本上就是个加强版的 div 这点。

我前面的问题现在用 vue.extend，然后 $mount 暂时解决了。感觉上基本就是 .innerHTML="内容" 的加强版。不同的是，$mount 是用返回的内容完全替代 mount 点，而不是填入。还有一个关键点是里面的data用了全局变量，后台不用变化。这种做法大概和推荐的 vue 做法不太合路，所以我网上找了半天，都没有提到用 vue.extend 的方式来解决这类问题。但是初学者估计很容易会碰到这类问题。现在暂时解决了，以后再考虑专门的组件，然后在组件内去 ajax 取内容。

component 我现在是直接塞的，以后用单个的 vue，看来要涉及到 webpack，需要学习。

vuex, vuerouter 也要找时间学习。

seo 那块，我想多照应一下 duckduckgo。根据我现在的理解，只有 google 会在检索的时候同时运行 javascript。另外，也不知道 web archive 是怎么检索的，我觉得它的这个功能很有意思，所以也最好能照顾到。

后台没用 nodejs，一段时间内估计也不考虑ssr，除非我对 vue 已经很熟悉了。眼下来看，估计需要一段时间才能考虑。

PC网页这种hover觉得正常，但是在移动设备上，就很怪异了，UI设计从拟物转向扁平化已经很长时间了，这个还真要费心思推敲下，好维护，又能把要素表达清楚。

关于搜索引擎的友好问题，没有什么好办法，vue使得我们开发这个角度，语义抽象的不错，数据（文章内容）是动态的，你有期望传播的意图，我们做业务程序的除了推广页，不考虑这个需求。也许最质朴的办法是最合适的，那就定时or同步生成静态页面feed搜索引擎好了。