vue入门系列之条件，列表渲染

条件渲染

• 条件渲染其实就是v-if，v-else，v-else-if，v-show，通过数据条件来决定，dom元素是否渲染
• 值得注意的一点就是 v-if 和 v-show 的区别
  • v-if 所谓的惰性，就是只有当条件达成他才会进行第一次渲染。他有更高的切换开销，因为每次条件的改变他都是真正的销毁和渲染这个元素
  • v-show 相对来 v-if 他没有惰性，不论条件真还是假DOM元素都渲染了，只是display的值根据条件变化而已，所以他具有更高的初始渲染开销，但是只有很低的切换开销。
  • 因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
• 用 key 管理可复用的元素
  • Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外，还有其它一些好处。
  • 因为这一点，所以我们可以在相同的元素绑定唯一的key，来表达“这两个元素是完全独立的，不要复用它们”

---

列表渲染

• 使用v-for指令进行列表渲染
• v-for循环渲染的数据，可以是数组，和对象
• 当是数组的时候，v-for ="(item, index) in items"�,item是数组中的元素，index是对应的索引
• 当是对象的时候，v-for ="(value, name, index)", value是属性值，name，是对应的属性名，index是对应的索引
• 建议尽可能在使用 v-for 时提供 key attribute，除非遍历输出的 DOM 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。

数组更新检测

• 变异方法
  1. Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括
     1. push(), 可以在数组的末属添加一个或多个元素
     2. pop(), 把数组中的最后一个元素删除,并且返回这个元素
     3. shift(), 把数组中的第一个元素删除,并且返回这个元素
     4. unshift(), 在数组的前端添加一个或多个元素
     5. splice(), 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原数组
        • arrayObject.splice(index,howmany,item1,.....,itemX)
        • index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
        • howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
        • item1, ..., itemX 可选。向数组添加的新项目。
     6. sort(), 数组在原数组上进行排序，不生成副本
        • arrayObject.sort(sortby)
        • sortby 可选。规定排序顺序。必须是函数。
        • 如果没有传入参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
        • 如果想按照其他标准进行排序，就需要提供比较函数。请看下列例子。
        • 从小到大还是从大到小排列和你传入的方法参数有关系
     7. reverse(), 用于颠倒数组中元素的顺序 改变原数组
  2. 使用这些数组方法，可以触发试图更新

function sortNumber(a, b)
{
  // return b - a // 结果1000,101,40,25,5,1
  return a - b  // 结果 1,5,25,40,101,1000
}
var arr = new Array(6)
arr[0] = "101"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
document.write(arr.sort(sortNumber))

• 替换数组

  • 上面的变异方法，顾名思义，会改变调用了这些方法的原始数组。相比之下，也有非变异 (non-mutating method) 方法，例如 filter()、concat() 和 slice() 。它们不会改变原始数组，而总是返回一个新数组。当使用非变异方法时，可以用新数组替换旧数组

• 注意事项

  • vue由于 JavaScript 的限制，Vue 不能检测以下数组的变动
    1. 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
    2. 当你修改数组的长度时，例如：vm.items.length = newLength
    3. 解决方法在下列例子中

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
// Vue.set 响应的
Vue.set(vm.items, indexOfItem, newValue)
// Array.prototype.splice 响应
vm.items.splice(indexOfItem, 1, newValue)
vm.$set(vm.items, indexOfItem, newValue)

// vm.items.length = newLength
vm.items.splice(newLength)

对象变更检测注意事项

• 还是由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除

var vm = new Vue({
  data: {
    a: 1,
    userProfile: {
      name: 'Anika'
    }
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

// 以下两种方式是响应的
Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)

// 有时你可能需要为已有对象赋值多个新属性，比如使用 Object.assign() 
// 以下是不响应的
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})
// 以下才是响应的
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

• 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。