vue指令相关的问题

v-for和v-if不建议一起用的原因

1）当v-if和v-for处于同一个节点时，v-for的优先级比v-if更高，这意味着v-if将分别重复运行于每个v-for循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费

2）这种场景建议使用计算属性，先对数据进行过滤

注意：3.X版本中v-if总是优先与v-for生效。由于语法上存在歧义，建议避免在同一元素上同时使用两者。比起在模板层面管理相关逻辑，更好的办法是通过创建计算属性筛选出列表，并以此创建可见元素

v-for中key的作用

1）key的作用是为了在diff算法执行时更快的找到对应的节点，提高diff速度，更高效的更姓虚拟DOM

2）为了在数据变化时强制更新组件，避免‘就地复用’

当Vue.js用v-for 更新已渲染过的元素列表时，它默认用”就地复用"策略。如果数据项的顺序被改变, Vue将

不会移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲

染过的每个元素。复的key会造成渲染错误。

v-if和v-show的区别

（1）v-if：是组件真正的渲染和销毁，控制DOM节点是否存在，来控制元素的显示隐藏
（2）v-show：通过设置DOM元素的display样式，block为显示，none为隐藏

v-if常用于一次性改变，v-show常用于频繁切换状态

常用的指令及其语法

1. v-html：按照HTML格式进行解析，显示对应的内容，后面接string类型
   1）在网站上动态渲染任意html是非常危险的，容易导致xss攻击
   2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上
2. v-once：元素和组件只渲染一次，后面不需要表达式子
3. v-bind：单向绑定动态数据，绑定一个或者多个属性值，向另一个组件传递props值。语法糖：
4. v-on：绑定事件。语法糖：@
5. v-for：循环遍历
6. v-if和v-show：条件渲染指令
7. v-model：实现表单元素和数据的双向绑定