请问： v-once 到底是个啥玩意？😂

[xiangyuecn]

刚学 vue，感觉离入门到放弃不远了😂😂😂 太难了，看好几遍 cn.vuejs.org 中的那坨 guide，还是没明白用 Vue 一把梭到底能解决什么 G 点。。。

回到 v-once 这个指令，我就想在页面里面输出一行行带当前时间的 log，不知道是不是缺陷还是我写的有毛病：

//循环的 obj 里面没有额外存时间，也拒绝存时间（ idx 是倒序索引，妥协加上的）
<div v-for="obj in logs" :key="obj.idx">
    <template v-once>[{{ getTime() }}]</template> //无效，每个周期都会进行一次计算导致节点发生变更，
                                                  //导致所有已显示的日志都会被重新计算成当前时间
    <span v-once>[{{ getTime() }}]</span> //有效，但需要多输出一个标签（细思极恐）

我们会发现 template + v-once 并不会起反应，v-once 的文档里也并没有写和 template 结合有什么效果。

---

但是，没有对比就没有伤害，看 v-if 文档：

> 如果元素是 <template> ，将提出它的内容作为条件块。

# 在 <template> 元素上使用 v-if 条件渲染分组

因为 v-if 是一个指令，所以必须将它添加到一个元素上。但是如果想切换多个元素呢？此时可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。

这算不算在赤裸裸的歧视 v-if 是一个另类😂 细思这也许是个什么缺陷，或者这就是别人写的代码该有的样子。

---

那么问题来了，v-once 这个目测也算是非常重要的指令，为什么就不能学学 v-if 特殊对待一下；或者说类似我这种类似静态方法的调用有别的手段？ 静态方法，嗯，还是无参的静态方法（例子里面不要指望我会去额外存储一份时间，其他类似的结果会变化的方法调用估计也会产生此类问题）😂

太难学了，不容易入门，再不学好就要被扫地出门了😂

[xiangyuecn]

@nxy006 #14 #15 嗯嗯，感谢你的解答😊。但目测你应该没有理解我的问题，请看一下#20 楼这幅图，你就明白了，一个不在 v-for 里，一个在 v-for 里，代码基本相同，但表现不一样。

[nxy006]

@azh7138m 确实，试了一下里面放变量也有一样的效果，是有点不对劲。从没写过 v-for 里套 template v-once 的代码，等晚上有时间了再查一下。=_=

一般不会写 <template v-once> 这种结构，如果需要应该写成 <template><div v-once> 结构。虽然没研究过这种规范具体是为什么，结果来看还是有道理的。

[santom]

<div><div><span>[6.738]</span> 日志
[58.447] 日志

|||| <span>[6.738]</span> 日志
</div></div>


这是渲染之后的实际 dom
temeplate 标签作为无意义标签，我记得之前好像是为了布局优化去除很多无意义包裹层标签（其他层面不太了解），才允许在 temeplate 标签里可以不放置顶级标签的 。
在此之前 loader 解析时会直接抛错。

所以现在渲染结构中“[]”里面想渲染一次，此处添加的 v-once 应该是需要作用到实质标签上。
具体 v-if 为何效果不同，不太了解了 可能和楼上说的 VNode 及渲染解析有关系吧

[rabbbit]

这应该是个 bug,不过还需要研究研究

[xiangyuecn]

@Curtion #10 不是#8021 这个问题，它是 component 组件中的 template 属性，我的是 template 标签，完全不一样。

不过有个 vuejs 的 Contribution 同样拿这个问题来怼我，欢迎来观战，看我怎么用中式英语来怼死他，https://github.com/vuejs/vue/issues/10892

[crs0910]

@xiangyuecn #25 那个人没有怼你啦。你也不要因此影响自己心情，感觉已经和他对立起来了。
建议弄个最小的 demo 再提一次 issue 就好了，你那个 demo 搞的有点复杂了。

[xiangyuecn]

@crs0910 哈哈，谢谢你啦😊。可能是我在 #25 用“怼”这个词不当，我并没有针对那个协作者，只是觉得他们处理 issue 的有欠妥当。那个 demo 我是把发现的问题和没有问题的对比代码都写进去了，也没多少，应该不好精简了。

[gz911122]

另外附：完全新手入门 vue，遇到困难总是会有的，不过先入门还是要的，遇到麻烦直接就放弃就不太好了。不过，仅阅读 https://cn.vuejs.org/v2/guide/ （阅读的纯文本，不含外链 和 video ），完全搭建不出能运行的实用环境（不是学习测试，是实战，要写实际逻辑代码的），这个是事实，里面起步 明确写到 请注意我们不推荐新手直接使用 vue-cli , 我新学也不爱去用生成工具，手写配置对学习更有益。然后你会发现整篇 guide 就没有写 .vue 文件该要怎么个规范去写，需要什么样的环境才能编译成 js 在浏览器运行。

你以为有了 vue-loader 就够了，实际上还要 vue-template-compiler，文档有没有告诉你？没有。仅有 css-loader 还不够，你还要 style-loader，编译 es6 额外要 dependencie babel，有这些才能搭建起基本的编译环境。我还是通过问别人 和 另外运行 vue-cli 得到有效的配置分析后 才搞定环境配置，新手手写也许是哪里路子不对。


这点深有同感