《vue3第六章》其他，包含：全域性API的轉移、其他改變

刘大猫26發表於2024-10-30
VueAPI

@

目錄
  • 六、其他
    • 1.全域性API的轉移
    • 2.其他改變

六、其他

1.全域性API的轉移

  • Vue 2.x 有許多全域性 API 和配置。

例如：註冊全域性元件、註冊全域性指令等。

//註冊全域性元件
Vue.component('MyButton', {
  data: () => ({
    count: 0
  }),
  template: '<button @click="count++">Clicked {{ count }} times.</button>'
})

//註冊全域性指令
Vue.directive('focus', {
  inserted: el => el.focus()
}
  • Vue3.0中對這些API做出了調整：

將全域性的API，即：Vue.xxx調整到應用例項（app）上

2.其他改變

  • data選項應始終被宣告為一個函式。

  • 過度類名的更改：

Vue2.x寫法

.v-enter,
.v-leave-to {
  opacity: 0;
}
.v-leave,
.v-enter-to {
  opacity: 1;
}

Vue3.x寫法

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

.v-leave-from,
.v-enter-to {
  opacity: 1;
}

  • 移除keyCode作為 v-on 的修飾符，同時也不再支援config.keyCodes

  • 移除v-on.native修飾符

父元件中繫結事件

<my-component
  v-on:close="handleComponentEvent"
  v-on:click="handleNativeClickEvent"
/>

子元件中宣告自定義事件

<script>
  export default {
    emits: ['close']
  }
</script>

注意點1：
使用emits宣告的就是自定義事件，未宣告的就當做原生事件

  • 移除過濾器（filter）

    過濾器雖然這看起來很方便，但它需要一個自定義語法，打破大括號內表示式是 “只是 JavaScript” 的假設，這不僅有學習成本，而且有實現成本！建議用方法呼叫或計算屬性去替換過濾器。

  • ......

相關文章