每天三道前端题（1）

一、为什么Vue中的 v-if 和 v-for 不建议一起用？

1、作用方面做对比：

v-if是用于条件性的渲染一块内容，当判断指令返回为true时，才会进行渲染

v-for 是基于一个数组来渲染一个列表。v-for 指令需要使用 item in list 形式和特殊语法，其中 list 是源数据数组或对象，而 item 则是被迭代的数组元素的别名。

v-for建议设置 key 值，保证每个key 值是独一无二的，这样的话 便于 diff 算法进行优化

两者的用法实例：

<div v-if="isShow"></div>

<div>
   <li v-for="item in list :key="item.id"">
      {{ item.name }}
   </li>
</div>

2、优先级上做对比

优先级主要是要看源码是怎么写的。

vue2中v-for的优先级高于v-if，当v-for和v-if写在同一个标签上时，仍然会渲染出列表，然后再在每个列表上判断各个v-if。

vue3中由于做了改动，将v-if的优先级高于v-if，所以当v-for和v-if写在同一个标签上时，会报错；因为优先级的问题，所以在执行的v-if是找不到item的，所以会报错。

3、注意事项

3.1、永远不要把v-if 和v-for同时在同一个元素上使用，会带来性能方面的浪费（每次渲染都会先循环再做条件判断）

3.2、如果避免出现这种情况，则在外层嵌套 template（页面渲染不生成dom节点），在这一层进行v-if的判断，然后 再到内部进行 v-for的循环。（先判断 再循环）

<template v-if="isShow">

        <p v-for="item in list"> {{ item.name }}</p>

</template>        

3.3、如果条件出现在循环内部，可以通过计算属性computed提前过滤掉那些不需要显示的项

computed:{

        list : function(){

                return this.filter(item => item.isShow)

        }

}

二、display:none 和 visibility: hidden 有什么区别？

表面上：

        display：none是彻底消失，不会再文档流中占位置，浏览器也不会解析该元素

        visibility：hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素

性能上：

        使用visibility：hidden比display：none性能上更好。

        display：none切换显示时，页面产生回流（当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等，页面重新构建，此时就是回流。所有页面第一次加载时需要产生一次回流）。

        visibility：hidden切换是否显示时 不会引起回流。

三、下面这行代码输出什么？

console.log(String.raw`Hello\nworld`);

 

String.raw函数是用来获取一个模板字符串的原始字符串的，它返回一个字符串，其中忽略了转义符（\n,\v,\t 等）。但反斜杠可能造成问题，因为你会遇到下面这种类似情况：

const path = `C:\Documents\Projects\table.html`

String.raw`${path}`

 这将导致"C:DocumentsProjects able.html" 直接使用String.raw

String.raw`C:\Documents\Projects\table.html`

 他会忽略转义字符并打印：

C:\Documents\Projects\table.html 上述情况，字符串是Hello\nworld被打印出。