事件

events 选项 移除

events 选项被弃用。事件处理器现在在 created 钩子中被注册。参考详细示例 $dispatch and $broadcast 迁移指南

Vue.directive('on').keyCodes 替换

新的简明配置 keyCodes 的方式是通过 Vue.config.keyCodes例如：

  1. // v-on:keyup.f1 不可用
  2. Vue.config.keyCodes.f1 = 112

升级方式

运行迁移工具找到过时的 keyCode 配置

$dispatch 和 $broadcast 替换

$dispatch 和 $broadcast 已经被弃用。请使用更多简明清晰的组件间通信和更好的状态管理方案，如：Vuex。

因为基于组件树结构的事件流方式实在是让人难以理解，并且在组件结构扩展的过程中会变得越来越脆弱。这种事件方式确实不太好，我们也不希望在以后让开发者们太痛苦。并且$dispatch 和 $broadcast 也没有解决兄弟组件间的通信问题。

对于$dispatch 和 $broadcast最简单的升级方式就是：通过使用事件中心，允许组件自由交流，无论组件处于组件树的哪一层。由于 Vue 实例实现了一个事件分发接口，你可以通过实例化一个空的 Vue 实例来实现这个目的。

这些方法的最常见用途之一是父子组件的相互通信。在这些情况下，你可以使用 v-on监听子组件上 $emit 的变化。这可以允许你很方便的添加事件显性。

然而，如果是跨多层父子组件通信的话，$emit 并没有什么用。相反，用集中式的事件中间件可以做到简单的升级。这会让组件之间的通信非常顺利，即使是兄弟组件。因为 Vue 通过事件发射器接口执行实例，实际上你可以使用一个空的 Vue 实例。

比如，假设我们有个 todo 的应用结构如下：

  1. Todos
  2. ├─ NewTodoInput
  3. └─ Todo
  4.    └─ DeleteTodoButton

可以通过单独的事件中心管理组件间的通信：

  1. // 将在各处使用该事件中心
  2. // 组件通过它来通信
  3. var eventHub = new Vue()

然后在组件中，可以使用 $emit, $on, $off 分别来分发、监听、取消监听事件：

  1. // NewTodoInput
  2. // ...
  3. methods: {
  4.   addTodo: function () {
  5.     eventHub.$emit('add-todo', { text: this.newTodoText })
  6.     this.newTodoText = ''
  7.   }
  8. }
  1. // DeleteTodoButton
  2. // ...
  3. methods: {
  4.   deleteTodo: function (id) {
  5.     eventHub.$emit('delete-todo', id)
  6.   }
  7. }
  1. // Todos
  2. // ...
  3. created: function () {
  4.   eventHub.$on('add-todo', this.addTodo)
  5.   eventHub.$on('delete-todo', this.deleteTodo)
  6. },
  7. // 最好在组件销毁前
  8. // 清除事件监听
  9. beforeDestroy: function () {
  10.   eventHub.$off('add-todo', this.addTodo)
  11.   eventHub.$off('delete-todo', this.deleteTodo)
  12. },
  13. methods: {
  14.   addTodo: function (newTodo) {
  15.     this.todos.push(newTodo)
  16.   },
  17.   deleteTodo: function (todoId) {
  18.     this.todos = this.todos.filter(function (todo) {
  19.       return todo.id !== todoId
  20.     })
  21.   }
  22. }

在简单的情况下这样做可以替代 $dispatch 和 $broadcast，但是对于大多数复杂情况，更推荐使用一个专用的状态管理层如：Vuex。

升级方式

运行迁移工具找出使用 $dispatch 和 $broadcast的实例。