Vue3移除的API

按键修饰符

  • 不再反对keycode作为v-on的修饰符
  • 不再反对config.keyCode
<!-- 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,用来创立在整个应用程序中可用的全局事件监听器

// vue2.x// eventHub.jsconst eventHub = new Vue()export default eventHub// ChildComponent.vueimport eventHub from './eventHub'export default {  mounted() {    eventHub.$on('custom-event', () => {      console.log('Custom event triggered!')    })  },  beforeDestory() {    eventHub.$off('custom-event')  }}// ParentComponent.vueimport eventHub from './eventHub'export default {  methods: {    callGlobalCustomEvent() {      eventHub.$emit('custom-event')      // 当 ChildComponent 被挂载,控制台中将显示一条音讯    }  }}

在Vue3中,从实例中齐全移除了 $on、$off 和 $once 办法。$emit 依然蕴含于现有的 API 中,因为它用于触发由父组件申明式增加的事件处理函数

删除过滤器

<!-- 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 中,过滤器已删除,不再反对。能够应用计算属性或调用办法替换他们

<!-- 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

移除内联个性

<!-- 2.x --><!-- inline-template属性能够将其外部内容用作模板,而不是将其作为散发内容 --><my-component inline-template>  <div>    <p>它们被编译为组件本人的模板</p>    <p>不是父级所蕴含的内容。</p>  </div></my-component>

vue3中已移除,不再反对

$children 已移除

$children 实例 property 已从 Vue 3.0 中移除,不再反对。

<template>  <div>    ![](./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 组件的生命周期。