Vue3移除的API

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 組件的生命週期。