五分钟带你快速了解Vue的常用实例方法

什么是Vue实例方法

Vue实例是Vue应用中最基本的组成部分，实例是通过创建Vue实例对象来实现的。Vue实例方法是在Vue实例对象中定义的方法，这些方法可以让我们方便地操作Vue实例对象。

Vue实例的常用实例方法

1. $set

$set方法是用来在Vue实例中设置一个新的属性或修改一个已有的属性的值。这个方法可以让我们在不修改整个Vue实例对象的情况下，动态地更新我们的UI界面。

举个例子，在Vue模板中，我们可以这样写：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

在Vue实例定义中，我们可以这样写：

export default {
  data () {
    return {
      message: 'hello, vue'
    }
  },
  methods: {
    updateMessage () {
      this.$set(this, 'message', 'updated!');
    }
  }
}

这样一来，当我们点击“更新消息”按钮时，就会触发updateMessage方法，这个方法会使用$set方法来动态修改message属性的值，从而实现更新UI的目的。

2. $on

$on方法是用来监听Vue实例的自定义事件的。我们可以在Vue实例中使用该方法设置一个回调函数，当我们自定义的事件被触发时，该回调函数就会被执行。

举个例子，在Vue实例定义中，我们可以这样写：

export default {
  created () {
    this.$on('my-event', () => {
      console.log('my-event被触发了');
    });
  }
}

在这个例子中，我们在Vue实例的created生命周期钩子函数中，通过$on方法监听了一个名为“my-event”的自定义事件，并设置了一个回调函数来做相应的处理。

当我们需要触发该事件时，可以这样写：

this.$emit('my-event');

这样一来，当我们调用$emit方法触发my-event事件时，绑定在该事件上的回调函数就会被执行，从而实现我们想要的处理。

以上是Vue实例的两个常用实例方法，通过这些实例方法，我们可以更加方便地对Vue实例进行操作，使我们的代码更加简洁和易懂。