乐趣区

关于javascript:Vue3移除的API

jiezi

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.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 中，因为它用于触发由父组件申明式增加的事件处理函数

删除过滤器 

<!-- 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 组件的生命周期。

退出移动版