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