主题：【原创】jquery 和 vue -- 铁手
家园 【原创】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-component1></vue-component1>
一些内容
<vue-component2></vue-component2>
一些内容
<vue-component3></vue-component3>
如果在一个完整页面上，显示没问题。vue 在页面载入后对这些 vue 相关的内容进行了处理，这些 component 被转换成相应的html来显示。那如果这段内容是通过 ajax 载入的话，怎么让它正常显示呢？
家园 VUE的设计理念比较适合国人思维。 家园 jquery 过时是因为它提供的便利性已经成为语言特性 新的JS语言标准已经内置了功能。比如 Fetch。并且浏览器现在基本就两大阵营：Chrome 和Firefox。这两家更新很快，对新标准支持很快。
我一般设计网站的方式是服务器只提供JSON数据。前端基于json数据画界面。这样前后端解耦合，可以独立开发验证。
用vue的时候，建议用axio做ajax。它的API是async。取回后可以绑定component的data或者用method预处理一下。可以针对一页（比如全看）一次取出，然后用一组嵌套的component一次render。也可以每一个component自己调一次axios（比如每一贴）。前者io交互少，后者数据流量小。
通宝推：敲门,mezhan,家园 正解，前端就像时装，不断有潮流 vue的话，更多开发理解落在业务逻辑上，将细节的渲染脱藕了。我做的项目基本上前端就是个静态页面，靠数据来刷新，负载均衡什么变得容易多了。
可惜我的工作是一阵阵的，一会儿这一会儿那，VUE已经快一年多没有去摸了，虽然开发还是我去指导，细节这个只能是具体干活时候才会深入。
家园 太感谢了，一并请教 初学 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 有什么差别？
通宝推：mezhan,家园 我不是一个vue的重度使用者，虽然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。不知道西西河的后端是是什么。
通宝推：铁手,家园 多谢。前面的问题通过 vue.extend 暂时解觉了 你的第一点看得相当透彻。这些天下来，碰壁无数次后，我也是有这个模糊印象，铁手:【原创】菜鸟初学 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 已经很熟悉了。眼下来看，估计需要一段时间才能考虑。
通宝推：mezhan,
家园 一个版本足以，CSS这块估计要综合考虑 vue这块侧重于业务逻辑，具体到手机还是PC机浏览器这里，这还是CSS编程的范畴，图省事，上bootstrap，有grid编排布局，响应式的，对各种终端有比较好的适配。复杂一点，应该是css-less这种，将CSS当做编程语言对待，需要编译一下，作为生产环境使用。
不要把VUE当做样式布局对待，除非对布局没啥追求，土土的干也行，比如硬插一个DIV；VUE侧重于业务逻辑，数据驱动逻辑。
家园 嗯，前面提的版本主要是针对搜索引擎 是一个版本供人和引擎一起用，还是人一个版本，引擎一个版本。我眼下考虑就一个版本算了，只要保证搜索引擎忽略 javascript 的情况下，能够检索到干货内容就可以。
css 上目前也是有些问题，主要是桌面上的 hover 效果怎么更方便的在触摸设备上能够简便体现。
家园 hover是交互工程师需要考虑的问题 PC网页这种hover觉得正常，但是在移动设备上，就很怪异了，UI设计从拟物转向扁平化已经很长时间了，这个还真要费心思推敲下，好维护，又能把要素表达清楚。
关于搜索引擎的友好问题，没有什么好办法，vue使得我们开发这个角度，语义抽象的不错，数据（文章内容）是动态的，你有期望传播的意图，我们做业务程序的除了推广页，不考虑这个需求。也许最质朴的办法是最合适的，那就定时or同步生成静态页面feed搜索引擎好了。
家园 vue其实也有SEO方案的 https://segmentfault.com/a/1190000019623624 可以参考这篇文章。我没有在实际案例中使用过，所以不敢保证是否有大坑，仅供参考。
家园 多谢，我看了一下，觉得有点复杂 对于搜索引擎，我最大的顾虑，一是内容能不能被检索，二是搜索引擎会不会因为特定版本认为我作弊。
眼下我考虑暂时还是用网页骨干内容 + VUE前面动态或点缀的方式，可惜不能完全利用 Vue 的优势。
家园 组件里面请求数据并渲染就可以了 组件里面，加载时，发起网络请求，然后用数据填充html模版就可以了。这样的组件可以全站复用