一、数据相关api
1、Vue.set
1、向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
使用方法: Vue.set(target, propertyName/index, value)
别名：vm.$set();
methods: {
// 添加批量价格更新方法 batchUpdate() {
this.courses.forEach(c => {
// c.price = this.price; // 当this.price 变换时候 no ok
Vue.set(c, 'price', this.price); // ok
})
}
2、Vue.delete
1、删除对象的属性。如果对象是响应式的，确保删除能触发更新视图。
使用方法: Vue.delete(target, propertyName/index)
别名：vm.$delete();
// 传统的 delete obj['property']; 页面视图 no ok
二、事件相关api
1、vm.$on
监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的 额外参数。
<child-xxx-component @test="xxxx()"></child-xxx-component>
// 效果同上
vm.$on('test', function (msg) {
console.log(msg)
})
告诉我们这样2件事情：
1、由此可见：虽然vm是写在父级里面，但是（事件的派发者和监听者是同一个实例（子级））。
2、典型应用：事件总线（this.$on）
2、vm.$emit
触发当前实例上的事件。附加参数都会传给监听器回调。
3、vm.$once
监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除
4、vm.$off
移除自定义事件监听器。
如果没有提供参数，则移除所有的事件监听器;
如果只提供了事件，则移除该事件所有的监听器;
如果同时提供了事件与回调，则只移除这个回调的监听器。
vm.$off() // 移除所有的事件监听器
vm.$off('test') // 移除该事件所有的监听器
vm.$off('test', callback) // 只移除这个回调的监听器
5、事件总线
通过在Vue原型上添加一个Vue实例作为事件总线，实现组件间相互通信，而且不受组件间关系的影响
Vue.prototype.$bus = new Vue();
> 这样做可以在任意组件中使用this.$bus 访问到该Vue实例
> 监听：this.$bus.$on('xxx',fn);
> 派发：this.$bus.$emit('xxx');
在没有引入 vuex 全局状态之前，这是一个比较好的解决方案！
example：批量清除多个消息窗口
// 弹窗组件
Vue.component('message', {
// 监听关闭事件
mounted () {
this.$bus.$on('message-close', () => {
this.$emit('update:show', false)
})
},
})
// 派发关闭事件
<div class="toolbar">
<button @click="$bus.$emit('message-close')">清空提示框</button>
</div>
三、组件或者元素引用api
1、ref和vm.$refs
给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。
ref 注意点：
如果在 普通的DOM元素上，引用指向的就是 DOM元素;
如果在 子组件上，引用就指向组件
vm.$refs 注意点：
1、ref 是作为渲染结果被创建的，在初始渲染时 $refs 不能访问，至少在mounted之后用。
2、$refs 不是响应式的，不要试图用它在模板中做数据绑定
3、当 v-for 用于元素或组件时，引用信息将是包含 DOM 节点或组件实例的数组。
example:
<input type="text" ... ref="inp">
mounted(){
this.$refs.inp.focus()
}
