v-if
下面代码中切换 loginType 将不会清除用户已经输入的内容。因为两个模板使用了相同的元素，<input> 不会被替换掉——仅仅是替换了它的 placeholder，因为Vue为了高效渲染元素，对已有元素不会重新渲染
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address">
</template>
加了唯一值key属性的元素 不会复用 会重新渲染,如下面的input，由于label没有加key 所以还是会复用
<template v-if="loginType === 'username'">
<label>Username</label>
<input placeholder="Enter your username" key="username-input">
</template>
<template v-else>
<label>Email</label>
<input placeholder="Enter your email address" key="email-input">
</template>
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提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素
<div v-for="item in items" v-bind:key="item.id">
<!-- 内容 -->
</div>
数组变异方法
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'
})
