vue中必会的API

数据相关的

Vue.set

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。
使用方法： Vue.set(target, propertyName/index, value)
范例：批量设置商品价格

<template>
<!--添加批量价格更新-->
<p>
<input v-model.number="price">
<button @click="batchUpdate">批量更新价格</button>
</p>
<div class="course-list" v-else>
<div v-for="c in courses" :key="c.name">
<!--添加批量价格更新-->
{{ c.name }} - ￥{{c.price}}
</div>
</div>
</template>
<script>
function getCourses() {
return new Promise(resolve => {
setTimeout(() => {
// 修改返回数据结构为对象
resolve([{ name: 'web全栈' }, { name: 'web高级' }])
}, 2000);
})
}
const app = new Vue({
data() {
return {
price: 0 // 增加价格数据
}
},
methods: {
// 添加批量价格更新方法
batchUpdate() {
this.courses.forEach(c => {
// c.price = this.price; // no ok
Vue.set(c, 'price', this.price); // ok
})
}
},
} <
/script>

Vue.delete

删除对象的属性，如果对象是响应式的，确保删除能触发更新视图

使用方法： Vue.delete(target, propertyName/index)

事件相关API

vm.$on

监听当前实例上的自定义事件。事件可以由 vm.$emit 触发。回调函数会接收所有传入事件触发函数的
额外参数。

vm.$on('test', function (msg) {
console.log(msg)
})

vm.$emit

触发当前实例上的事件。附加参数都会传给监听器回调。

vm.$emit('test', 'hi')

典型应用：事件总线

vm.$once

监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除

vm.$on('test', function (msg) {
console.log(msg)
})

vm.$off

移除自定义事件监听器。如果没有提供参数，则移除所有的事件监听器；如果只提供了事件，则移除该事件所有的监听器；如果同时提供了事件与回调，则只移除这个回调的监听器。

组件或元素引用

ref和vm.$refs
ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通
的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件

注意：
ref 是作为渲染结果被创建的，在初始渲染时不能访问它们
$refs 不是响应式的，不要试图用它在模板中做数据绑定
当 v-for 用于元素或组件时，引用信息将是包含 DOM 节点或组件实例的数组。