Vue3 移除的 API

按键修饰符

  • 不再支持 keycode 作为 v-on 的修饰符
  • 不再支持 config.keyCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- 2.x -->
<!-- 键码版本 -->
<input v-on:keyup.13="submit" />
<!-- 别名版本 -->
<input v-on:keyup.enter="submit" />
<!-- 通过全局 config.keyCodes 选项 -->
<script>
  Vue.config.keyCodes = {
    f1: 112,
  };
</script>
<input v-on:keyup.112="showHelpText" />
<input v-on:keyup.f1="showHelpText" />
<!-- 3.x -->
<!-- 新规范中keyCode不再被推荐，推荐使用按键名 -->
<!-- https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode -->
<input v-on:keyup.delete="confirmDelete" />

$on，$off 和 $once 实例方法被移除

在 vue2.x 中，可以通过指令方式添加处理函数（$on, $once, $off）, 这可以创建 event hub，用来创建在整个应用程序中可用的全局事件监听器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// vue2.x

// eventHub.js
const eventHub = new Vue()

export default eventHub

// ChildComponent.vue
import eventHub from './eventHub'

export default {
  mounted() {
    eventHub.$on('custom-event', () => {
      console.log('Custom event triggered!')
    })
  },
  beforeDestory() {
    eventHub.$off('custom-event')
  }
}

// ParentComponent.vue
import eventHub from './eventHub'

export default {
  methods: {
    callGlobalCustomEvent() {
      eventHub.$emit('custom-event')
      // 当 ChildComponent 被挂载，控制台中将显示一条消息
    }
  }
}

在 Vue3 中，从实例中完全移除了 $on、$off 和 $once 方法。$emit 仍然包含于现有的 API 中，因为它用于触发由父组件声明式添加的事件处理函数

删除过滤器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 2.x中，开发者可以使用过滤器来处理通用文本格式 -->
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountBalance | currencyUSD }}</p>
</template>
<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true,
      },
    },
    filter: {
      currentUSD(value) {
        return "$" + value;
      },
    },
  };
</script>

在 3.x 中，过滤器已删除，不再支持。可以使用计算属性或调用方法替换他们

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!-- 3.x -->
<template>
  <h1>Bank Account Balance</h1>
  <p>{{ accountInUSD }}</p>
</template>
<script>
  export default {
    props: {
      accountBalance: {
        type: Number,
        required: true,
      },
    },
    computed: {
      accountInUSD() {
        return "$" + this.accountBalance;
      },
    },
  };
</script>

内联模板 Attribute

移除内联特性

1
2
3
4
5
6
7
8
<!-- 2.x -->
<!-- inline-template属性可以将其内部内容用作模板，而不是将其作为分发内容 -->
<my-component inline-template>
  <div>
    <p>它们被编译为组件自己的模板</p>
    <p>不是父级所包含的内容。</p>
  </div>
</my-component>

vue3 中已移除，不再支持

$children 已移除

$children 实例 property 已从 Vue 3.0 中移除，不再支持。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<template>
  <div>
    <img alt="Vue logo" src="./assets/logo.png" />
    <my-button>Change logo</my-button>
  </div>
</template>

<script>
  import MyButton from "./MyButton";
  export default {
    components: {
      MyButton,
    },
    mounted() {
      console.log(this.$children); // [VueComponent]
    },
  };
</script>

在 vue3 中，如果要访问子组件实例，建议使用$refs

$destory 实例方法已删除

用户不应再手动管理单个 Vue 组件的生命周期。