一、计算属性computed和侦听属性watch
1.计算属性computed
- 计算属性是基于它们的依赖进行缓存的,而调用方法总是每次重新计算。如果不需要缓存,就使用方法。
- 当你有一些数据需要随着其它数据变动而变动时,通常更好的做法是使用计算属性而不是命令式的 watch 回调。
2.侦听属性watch
- 当需要在数据变化时执行异步或开销较大的操作时,这个方式是最有用的。
二、v-if和v-show
1.v-if
- v-if是真正的条件渲染,它会确保在切换过程中,条件块内的事件监听器和子组件适当的被销毁和重建
- v-if是惰性的:如过在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块
- 适用于在运行时条件很少改变
2.v-show
- 不管初始条件是什么,元素总是会被渲染,并且只是简单的基于css进行切换(display)
- 适用于频繁的切换
三、v-for
1.v-for(数组)
- (item, index) in items 可选的第二个参数为当前项的索引。
- <div v-for="(value, key, index) in object">可以提供第二个的参数为键名
- 第三个参数为索引
四、数组更新检测
1.以下变动
不能触发对应元素更新
- 当你利用索引直接设置一个项时,例如:vm.items[indexOfItem] = newValue 替代方法:Vue.set(vm.items, indexOfItem, newValue) 或 vm.$set(vm.items, indexOfItem, newValue)
- 当你修改数组的长度时,例如:vm.items.length = newLength 替代方法:vm.items.splice(indexOfItem, 1, newValue)