1.响应式数据的追踪
一般情况下，data的属性变化，视图也会发生变化。但当用object.freeze()时会阻止修改属性,系统也无法再继续追踪，例如：
var obj = {
foo: 'bar'
}
Object.freeze(obj)
new Vue({
el: '#app',
data: obj
})
<div id="app">
<p>{{ foo }}</p>
<!-- 这里的 `foo` 不会更新！ -->
<button v-on:click="foo = 'baz'">Change it</button>
</div>
2.生命周期
- beforeCreate 组件刚刚创建好，但是属性并没有被绑定
- create 属性被绑定成功，$el未存在，dom也没生成
3.视图更新
当组件运用了v-once，data值更新的时候，被绑定的视图不会更新，v-once只能执行一次性地插值，当数据改变时，插值处的内容不会更新。
<span v-once>这个将不会改变: {{ msg }}</span>
4.条件渲染
v-if当渲染条件为假时，组件则不会被渲染，当第一次条件为真时才会渲染为真。 v-show不论条件如何，组件都会被渲染，只是进行简单的css切换。 v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。 v-for 具有比 v-if 更高的优先级
5.v-for与key
使用v-for的时候为了便于跟踪每个节点的身份，需要为每一项提供一个唯一的key值，每项唯一的id值。例如：
<div v-for="item in items" :key="item.id">
<!-- 内容 -->
</div>
6.变异方法--会改变原来的数组
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
7.替换数组
- filter()
- slice()
- concat() 当利用索引值设置一个项时、当修改数组的长度时,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 实例方法，该方法是全局方法 Vue.set 的一个别名：
vm.$set(vm.items, indexOfItem, newValue)
Vue 不能检测对象属性的添加或删除
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不能动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
});
//可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
//还可以使用 vm.$set 实例方法，它只是全局 Vue.set 的别名：
vm.$set(vm.userProfile, 'age', 27)
有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。在这种情况下，你应该用两个对象的属性创建一个新的对象。
vm.userProfile = Object.assign({}, vm.userProfile, {
age: 27,
favoriteColor: 'Vue Green'
})
8.处理原生dom
可以通过函数将$event作为参数传递进去，进而访问原生dom事件。
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}
9.v-model 表单输入绑定
修饰符
- .number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number修饰符
<input v-model.number="age" type="number">
- .trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<input v-model.trim="msg">
