addeventlistener事件参数_Vue的钩子事件和程序化侦听

addEventListener 事件参数

addEventListener 接受三个参数，第一个参数是事件类型，第二个参数是事件触发时要执行的函数，第三个参数是一个布尔值，用来指定事件是否在捕获或冒泡阶段执行。例如：

element.addEventListener('click', () => {
  console.log('clicked')
}, false)

Vue的钩子事件和程序化侦听

Vue的钩子事件是在组件生命周期中预定义的函数，例如 beforeCreate、created、beforeMount、mounted 等等。这些钩子会在特定的时刻自动调用，从而给开发者提供了灵活性和可扩展性。例如：

export default {
  beforeCreate() {
    console.log('beforeCreate')
  },
  created() {
    console.log('created')
  },
  beforeMount() {
    console.log('beforeMount')
  },
  mounted() {
    console.log('mounted')
  }
}

程序化侦听是使用 Vue 提供的 $on 方法手动添加事件侦听器。$on 方法接受两个参数，第一个参数是事件名称，第二个参数是要执行的函数。例如：

export default {
  mounted() {
    this.$on('click', () => {
      console.log('clicked')
    })
  }
}

需要注意的是，程序化侦听器需要手动移除，否则可能会导致内存泄漏。可以使用 $off 方法来移除事件侦听器。例如：

export default {
  mounted() {
    const handleClick = () => {
      console.log('clicked')
    }
    this.$on('click', handleClick)
    // 移除事件侦听器
    this.$off('click', handleClick)
  }
}