vue常用指令及原理

1 v-if 判断表达式是否为真，如果为真则插入DOM。v-show 则是通过控制css样式来控制是否显示。

如果要显示的元素中含有图片，使用 v-show 可以在显示之前提前加载，当值为 true 时就显示。使用 v-if 时图片会直到显示时才开始加载。

2 v-for 指令可以用来遍历一个数组或对象

对于数组例子：v-for="(it, index) in cars" :key="it" 。其中顺序是(value, key)

3 vue 的响应式限制

3.1 为对象添加新属性。因 getter/setter 方法是vue对象初始化的时候添加，因此已存在的属性是响应式，因此直接为对象添加新属性时不会使该属性成为响应式。

3.2 设置数组元素。不能直接使用索引来设置数组元素，使用.splice()方法移除旧元素并添加新元素。例如

 

this.cars.splice(1, 1, '黄河')

 

3.3 设置数组长度。js 中可以设置数组长度，自动让空元素填充数组至该长度。vue中不可以设置data中的数组，因为 vue 不能检测到该操作对数组的任何更改。