这个问题算是spa的通用典型问题吗？

水木社区手机版

主题:这个问题算是spa的通用典型问题吗？
楼主|xiatianup|2018-12-23 21:27:45|只看此ID
<div class="cd" id="cd">
    {{cd}}
</div>

<script>
var cd=new Vue({
    el:".cd",
    data:{
        cd:0
    }
});

(function(){
    setInterval(function(){
        cd.cd++;
    },1000);
})();
</script>

打开这个页面，会有一瞬间能清楚的看到显示的是{{cd}}，然后才按部就班的变成0并递增。

记得以前学ng的时候，也有这个问题，刚载入页面的一瞬间，它显示的是这些不应该被用户看到的内容，不知道react有没有这个问题。

想问下，这个有没有解法？
--
FROM 119.79.81.*
1楼|eGust|2018-12-24 05:40:51|只看此ID
v-cloak

【在 xiatianup (李，只是期待夏天！！) 的大作中提到: 】
: <div class="cd" id="cd">
: {{cd}}
: </div>
: ...................
--
FROM 125.237.49.*
2楼|eGust|2018-12-24 05:42:11|只看此ID
这种问题只有在使用传统方式开发时才存在。如果不是老项目的话，实在是想象不出任何理由不使用 vue-cli/webpack/parcel 进行 vue 的开发。代码不好写，runtime 更大，需要额外时间加载模板 html 代码和解析模板，真的是想不出来任何优点……

react 这边，早就没有简单办法使用传统方式进行开发了，所以你问的是不存在的问题

【在 xiatianup (李，只是期待夏天！！) 的大作中提到: 】
: <div class="cd" id="cd">
: {{cd}}
: </div>
: ...................
--
FROM 125.237.49.*
3楼|xiatianup|2018-12-24 13:14:53|只看此ID
我今天搜了下，还有个v-test，不过文本节点有多个双大括号的情况下，v-text就麻烦些了。

【在 eGust 的大作中提到: 】
: v-cloak
:
--
FROM 61.183.136.*
4楼|xiatianup|2018-12-24 13:18:23|只看此ID
这不是传不传统的问题，网络慢的情况下也有这个问题。

【在 eGust 的大作中提到: 】
: 这种问题只有在使用传统方式开发时才存在。如果不是老项目的话，实在是想象不出任何理由不使用 vue-cli/webpack/parcel 进行 vue 的开发。代码不好写，runtime 更大，需要额外时间加载模板 html 代码和解析模板，真的是想不出来任何优点……
: react 这边，早就没有简单办法使用传统方式进行开发了，所以你问的是不存在的问题
:
--
FROM 61.183.136.*
5楼|eGust|2018-12-24 13:41:44|只看此ID
来，给你看一个 vue-cli 项目的典型 html 输出：
<!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Demo</title><link href=/css/index.94ca199f.css rel=preload as=style><link href=/js/index.ca10a738.js rel=modulepreload as=script><link href=/css/index.94ca199f.css rel=stylesheet></head><body><div id=app></div><script type=module src=/js/index.ca10a738.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/js/index-legacy.ca10a738.js nomodule></script></body></html>

你觉得网络慢的时候它应该会有什么显示问题？

【在 xiatianup (李，只是期待夏天！！) 的大作中提到: 】
: 这不是传不传统的问题，网络慢的情况下也有这个问题。
--
FROM 125.237.49.*
6楼|xiatianup|2018-12-24 17:38:38|只看此ID
你这就是组件化啊，我是考虑SEO才没组件式引入，直接写页面上。

【在 eGust 的大作中提到: 】
: 来，给你看一个 vue-cli 项目的典型 html 输出：
: <!DOCTYPE html><html><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Demo</title><link href=/css/index.94ca199f.css rel=preload as=style><link href=/js/index.ca10a738.js rel=modulepreload as=script><link href=/css/index.94ca199f.css rel=stylesheet></head><body><div id=app></div><script type=module src=/js/index.ca10a738.js></script><script>!function(){var e=document,t=e.createElement("script");if(!("noModule"in t)&&"onbeforeload"in t){var n=!1;e.addEventListener("beforeload",function(e){if(e.target===t)n=!0;else if(!e.target.hasAttribute("nomodule")||!n)return;e.preventDefault()},!0),t.type="module",t.src=".",e.head.appendChild(t),t.remove()}}();</script><script src=/js/index-legacy.ca10a738.js nomodule></script></body></html>
: 你觉得网络慢的时候它应该会有什么显示问题？
: ...................
--
FROM 183.92.250.*
7楼|eGust|2018-12-24 17:52:41|只看此ID
你知道自己在说什么吗？画一堆 {{ ... }} 出来你说是 seo？

正确的处理是 ssr，如果 back-end 不容易直接支持 ssr 的话，也有很多的替代技术。比如 google 推出 puppeteer 就做过一个小的 ssr 演示，对于更新频率不高的网站来说，已经是够用了，对于搜索引擎的更新频率来说已经绰绰有余了。

【在 xiatianup (李，只是期待夏天！！) 的大作中提到: 】
: 你这就是组件化啊，我是考虑SEO才没组件式引入，直接写页面上。
--
FROM 125.237.49.*
8楼|xiatianup|2018-12-25 08:15:15|只看此ID
双大括号虽然是占位置，但它未必就是关键信息。好歹比一个空的什么都没有的，靠外部引入组件拼起来的“空”页面对SEO友好。

我没听说过ssr吗？

我既然上面提到vue的seo问题，难道没看过相关方案？

你的回答让我很无语。

【在 eGust 的大作中提到: 】
: 你知道自己在说什么吗？画一堆 {{ ... }} 出来你说是 seo？
: 正确的处理是 ssr，如果 back-end 不容易直接支持 ssr 的话，也有很多的替代技术。比如 google 推出 puppeteer 就做过一个小的 ssr 演示，对于更新频率不高的网站来说，已经是够用了，对于搜索引擎的更新频率来说已经绰绰有余了。
:
--
FROM 113.57.244.*
9楼|eGust|2018-12-25 08:31:36|只看此ID
主流技术新项目上使用 react、vue 之类框架，都会用 webpack 做编译的，出来的结果就是一个空的 html，所以你在主题里说的问题是不存在的。

主流 spa 技术针对弱智搜索引擎的抓取，最简单直接的办法是 ssr，因为不需要对客户端做任何改动。尽管 ssr 本身不是干这个用的，但我不知道天朝主流搜索引擎技术能不能处理 spa，至少墙外的主流引擎是不用担心的。既然说要 seo，那自然还得上个 react-helmet、vue-meta 之类的东西，做些额外的处理，不然怎么好意思自称优化？但这方面具体怎么操作，跟是不是 spa 就已经没有关系了。

夏总啊，真心没法想象，你做的是怎样的研究。为什么会搞出一些让人完全看不懂的操作，去实现一个不相干的功能，然后你居然还有是普遍问题的自信……

你拿带 {{ ... }} 的页面说是做 seo 反正我是惊到了，不知道你期望搜索引擎显示出来是什么样的结果，但反正我搜到这样的页面是肯定没兴趣去点的

【在 xiatianup (李，只是期待夏天！！) 的大作中提到: 】
: 双大括号虽然是占位置，但它未必就是关键信息。好歹比一个空的什么都没有的，靠外部引入组件拼起来的“空”页面对SEO友好。
: 我没听说过ssr吗？
: 我既然上面提到vue的seo问题，难道没看过相关方案？
: ...................
--
修改:eGust FROM 125.237.49.*
FROM 125.237.49.*