条件渲染
- 条件渲染其实就是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 内容非常简单，或者是刻意依赖默认行为以获取性能上的提升。
数组更新检测
- 变异方法
- Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括
- push(), 可以在数组的末属添加一个或多个元素
- pop(), 把数组中的最后一个元素删除,并且返回这个元素
- shift(), 把数组中的第一个元素删除,并且返回这个元素
- unshift(), 在数组的前端添加一个或多个元素
- splice(), 向/从数组中添加/删除项目，然后返回被删除的项目。该方法会改变原数组
- arrayObject.splice(index,howmany,item1,.....,itemX)
- index 必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
- howmany 必需。要删除的项目数量。如果设置为 0，则不会删除项目。
- item1, ..., itemX 可选。向数组添加的新项目。
- sort(), 数组在原数组上进行排序，不生成副本
- arrayObject.sort(sortby)
- sortby 可选。规定排序顺序。必须是函数。
- 如果没有传入参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
- 如果想按照其他标准进行排序，就需要提供比较函数。请看下列例子。
- 从小到大还是从大到小排列和你传入的方法参数有关系
- reverse(), 用于颠倒数组中元素的顺序 改变原数组
- 使用这些数组方法，可以触发试图更新
- Vue 将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新。这些被包裹过的方法包括
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 不能检测以下数组的变动
- 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
- 解决方法在下列例子中
- vue由于 JavaScript 的限制，Vue 不能检测以下数组的变动
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'
})
- 有时，我们想要显示一个数组经过过滤或排序后的版本，而不实际改变或重置原始数据。在这种情况下，可以创建一个计算属性，来返回过滤或排序后的数组。
