vue学习笔记（一）

1. 计算属性

• vs模板表达式
  模板只能处理简单运算，在模板中多次引用应该使用计算属性computed
• vs methods
  结果相同，但是计算属性是基于它们的依赖进行缓存的，只有相关依赖发生改变时它们才会重新求值；每当触发重新渲染时，调用方法将总会再次执行函数
• vs watch
  监听属性watch代码重复
• 计算属性的getter
  计算属性默认只有getter，因为一般为展示元素，也可以提供setter

2. 监听器

watch选项响应数据的变化，当需要在数据变化时执行异步或开销比较大的操作时使用。

3. 用key管理可复用元素

Vue会复用已有元素，而非从头开始渲染，不同input框会共享已输入的内容，想要表达两个元素是完全独立的，不要复用他们，添加对应唯一的key值

4. v-if vs v-show

• v-if
  切换过程中条件块中的事件监听器和子组件会被销毁和重建；直到条件第一次为真时才会渲染条件块，更高切换开销
• v-show
  不管初始条件是什么，条件块总会被渲染，并且只是简单地基于CSS进行切换，更高初始开销

5. v-for优先级比v-if高

v-if可以重复运行于每个v-for循环中，可以选择性地渲染节点

<ul>
  <li v-for="todo in todos" v-if="!todo.isComplete">color</li>
</ul>

6. 数组变更检测

数组的变异方法，可以触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

数组的非变异方法，总是返回一个新数组，可以用新数组替换旧数组

• filter()
• map()
• concat()

由于js的限制，Vue不能检测以下变动的数组：

1. 使用索引值设置数组项目
   vm.items[index] = newValue
   ---> Vue.set(vm.items, index, newValue)
2. 修改数组的长度
   vm.length = newLengh
   ---> vm.splice(newLengh)

7. 对象变更检测