编程中的优雅艺术：学习Vue源码（1）——手写与事件相关的实例方法

2023-12-17 22:29:15

让我们从Vue的原型说起。Vue的原型是一个对象，它包含了Vue实例的所有方法和属性。当我们使用new Vue()创建Vue实例时，这个实例就会继承Vue原型的所有方法和属性。

Vue的原型中包含了许多方法，其中与事件相关的实例方法包括：

_init() ：这是Vue实例的初始化方法，它会在new Vue()时被调用。这个方法会执行一系列初始化操作，包括创建Vue实例的data、methods、computed和watch属性等。
$on() ：这个方法用于给Vue实例绑定事件监听器。当事件发生时，绑定的事件监听器就会被触发。
**once()** ：这个方法类似于on()方法，但它只会在事件发生一次后就被自动移除。
$off() ：这个方法用于从Vue实例中移除事件监听器。

这些方法都是Vue实例的重要组成部分，它们帮助Vue实例处理事件，并与用户交互。

让我们通过一个简单的例子来了解这些方法是如何工作的。假设我们有一个Vue实例，它的模板如下：

<div id="app">
  <button @click="handleClick">点击我</button>
</div>

在这个模板中，我们定义了一个按钮，当按钮被点击时，就会触发handleClick方法。

在Vue实例中，我们可以使用$on()方法来给按钮绑定handleClick方法：

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count++
    }
  }
})

当我们点击按钮时，handleClick方法就会被触发，count变量就会增加1。

我们也可以使用$once()方法来给按钮绑定一个只执行一次的事件监听器：

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count++
    }
  }
})

app.$once('click', handleClick)

当我们点击按钮时，handleClick方法就会被触发一次，然后就会被自动移除。

最后，我们可以使用$off()方法来从Vue实例中移除事件监听器：

const app = new Vue({
  data() {
    return {
      count: 0
    }
  },
  methods: {
    handleClick() {
      this.count++
    }
  }
})

app.$on('click', handleClick)

// 在某个时间点，我们想要移除事件监听器
app.$off('click', handleClick)