v-for,响应式,v-for和v-if的权重

v-for的值语法必须是alias in expression,或用of代替in,它会根据遍历数组项的次数,来渲染元素

​ 遍历对象用 for…in

​ 遍历数组用 for…of

<!--循环字符串时可以得到两个值 字符串成员,字符串成员索引-->
<p v-for="(value,index) of msg">{{val}} {{i}}</p>
<!--循环数组时可以得到两个值 数组成员,数组成员索引-->
<p v-for="(value,index) of arr">{{val}} {{i}}</p>
<!--可以直接循环数字,让元素循环指定的次数,也可以获得value,index,value从1开始-->
<p v-for="(value,index) of 18">{{val}} {{i}}</p>
<!--循环对象时可以得到三个值 属性值,属性名,索引-->
<p v-for="(value,name,index) in styleData">{{value}} {{name}} {{index}</p>
<!--v-for内部节点默认使用的原则就是"就地更新",如果使用v-for渲染的数据项顺序被改变,Vue不会移动dom元素来匹配数据项的顺序,而是就地更新每个元素,为了给Vue一个提示,从而重用和重新排序现有元素,需要为每项提供一个唯一 :key="value"-->
<li v-for="value in msg":key="value">{{value}}</li>

响应式

​ 修改数组的length和索引,并不能让数组在视图中更新

​ 添加删除对象的属性,不能让对象在视图中更新

​ 修改对象属性的值,可以更新,增删数组的项,可以更新

同时使用v-for v-if:

​ v-for的优先级比v-if高(它会先循环元素,然后通过v-if判断是否渲染)

​ v-for和v-if不建议用在一个元素上,这样每次在渲染之前都会先遍历再判断,造成性能上的浪费,可以在computed中用filter方法提前将需要的值储存下来,然后遍历渲染

​ 如果是有条件的跳过循环的执行,v-if最好写在外层