重读Vuejs文档

这是学习笔记，仅供自己学习使用。

重读之后，一些细小的点（只是补缺自己所缺的点）。

所有的声明周期钩子自动绑定this上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着*你不能使用箭头函数来定义一个声明周期方法#。这是因为箭头函数绑定了父上下文。因此this与你期待的Vue实例不同。

（注：箭头函数的this根据所在环境，换句话说，就是上下文；普通函数的this指向声明时的对象，就是调用函数的对象。）

mounted: function () {
    this.$nextTick(function () {
        // Code that will run only after the entire view has been rendered
    })
}

v-model.trim 绑定属性，将不能输入空格。（可用于表单验证）
只有当实例被创建时就已经存在于data中的属性才是响应式的。（如果你知道你会在晚些时候需要一个属性，但是一开始它为空或不存在，那么你仅需要设置一些初始值。）
计算属性、侦听器、方法：
1）计算属性是基于响应式依赖进行缓存的，也就是说，只有在相关响应式依赖发生改变时才会重新求值；
2）侦听器用在数据变化时执行异步或开销较大的操作时；
3）能用计算属性就用计算属性。
动态class：<div :class=”[{ active: isActive }, errorClass]”></div>
绑定内联样式：<div :style=”{ color: activeColor, fontSize: fontSize + ‘px’ }”></div>(emmm这个一般会用，写了内敛样式是要被人揍得！)
Vue会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。若是想要改变如此状况，可以使用key管理可复用的元素。
v-if和v-show：
1）v-if是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建；
2）v-show不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。
3）v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，需要非常频繁地切换，则使用v-show较好；如果在运行时条件很少改变，则使用v-if较好。

1、动态参数 …

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

1）当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue;
2）当你修改数组的长度时，例如：vm.items.length = newLength

举个例子：

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

为了解决第一类问题，以下两种方式都可以事项和vm.items[indexOfItem] = newValue相同的效果，同时也将在响应式系统内触发状态更新：

// Vue set
Vue.set(vm.items, indexOfItem, newValue)

// Array.prototype.splice
vm.items.splice(indexOfItem, 1, newValue)

为了解决第二类问题，可以使用splice。

vm.items.splice(newLength)

平时中用过索引直接设置一个数组时无效的，一路set到底才有效，现在才知道是怎么回事了！！！！

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

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

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

对于已经创建的实例，Vue不允许动态添加根级别的响应式属性。但是，可是使用Vue.set(object, propertyName, value)方法向嵌套对象添加响应式属性。
若需要为已有对象赋值多个新属性，比如使用Object.assign()或_.extend()。

Object.assign(vm.obj, {
    xxx: 'xxx',
    yyy: 'yyy',
})