vue一些容易混淆的名词

一、计算属性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 可选的第二个参数为当前项的索引。

2.v-for（对象）

• <div v-for="(value, key, index) in object">可以提供第二个的参数为键名
• 第三个参数为索引
  

<div v-for="item in items" :key="item.id"> 建议尽可能在使用 v-for 时提供 key，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

四、数组更新检测

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)