vue的一些小记录

Posted 2021-02-13 wayneliu007

1.在一个标签中，不推荐v-for 与 v-if 同时用

//当 v-if 与 v-for，v-for 具有比 v-if 更高的优先级。

//当它们处于同一节点（同一标签 一起使用时），v-for 的优先级比 v-if 更高，

这意味着 v-if 将分别重复运行于每个 v-for 循环中。

当你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，如下：

<li v-for="todo in todos" v-if="!todo.isComplete">
  {{ todo }}
</li>

 

 

2.watch监听路由参数的变化不会再执行created()//即是不会刷新页面

例如：http://xiaoshuo.com/page=1,改变为http://xiaoshuo.com/page=2时,页面不会刷新

 

3.v-if 和 v-show的区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换，是否显示。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

 

参考：

https://cn.vuejs.org/v2/guide/conditional.html#v-if-vs-v-show