国庆Vue基础补全（二）

v-if

下面代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素， 不会被替换掉——仅仅是替换了它的 placeholder，因为Vue为了高效渲染元素，对已有元素不会重新渲染

加了唯一值key属性的元素 不会复用 会重新渲染,如下面的input，由于label没有加key 所以还是会复用

v-if vs v-show

一般来说，v-if 有更高的切换开销，因为每次切换事件监听器和子组件都会适当地销毁和重建。
而 v-show 有更高的初始渲染开销，因为v-show会渲染出来，然后切换css属性。
因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

v-for跟v-if 不推荐同时使用 v-for优先级更高一些

key

v-if的key attribute 跟v-for的key attribute有为不同，v-if加上key attribute是为了让当前标签重新渲染，v-for的key attribute是为了给Vue提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素

数组变异方法

Vue 对下面的数组方法进行了包裹，所以它们也将会触发视图更新
push()
pop()
shift() //数组元素第一个值删除 被返回第一个元素
unshift()//数组开头添加元素
splice()// 方法向/从数组中添加/删除项目，然后返回被删除的项目
sort()
reverse()

数组非变异方法

非变异方法 它们不会改变原始数组，而总是返回一个新数组
filter()
concat()//方法用于连接两个或多个数组。
slice()

数组注意

由于 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.splice(newLength)

对象变更检测

在data里面没有初始化的 后续新增属性是不具有响应式的

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

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

可以通过以下方式解决

//在data定义一个对象 然后用vue的静态方法或实例方法添加 就是响应式的
var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})
Vue.set(vm.userProfile, 'age', 27)
//vm.$set(vm.userProfile, 'age', 27)

//添加多个属性
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})