vue高階特性

語言: CN / TW / HK

highlight: a11y-light theme: channing-cyan


一、自定義v-model

(1)概念: - v-model可以看成是value+input方法的語法糖。

  • 元件的v-model就是value+input方法的語法糖。

  • 可以繫結v-model的有:input,checkbox,select,textarea,radio  (2)如何實現自定義v-model,詳細附程式碼
    父元件:

image.png

子元件:

image.png

二、$nextTick

  • Vue是非同步渲染
  • 非同步渲染:vue的data改變之後,DOM不會立刻渲染
  • $nextTick會在DOM渲染之後被觸發,以獲取最新DOM節點

image.png

三、slot

在此只針對具名插槽和作用域插槽示例:
具名插槽: 有具體名字的插槽,使用時指定替換模板中哪個插槽的內容,需要多個插槽時,可以利用<slot> 元素的一個特殊的特性:name來定義具名插槽

image.png 作用域插槽: 可以理解為子元件中的作用域插槽可以為父元件中的插槽的顯示提供資料
父元件:

image.png 子元件:

image.png

四、動態元件

  • :is = "component-name" 用法
  • 需要根據資料,動態渲染的場景。即元件型別不確定

image.png

image.png

image.png

五、vue如何非同步載入元件

  • import()函式
  • 按需載入,非同步載入大元件

image.png

六、vue如何快取元件 keep-alive

  • 快取元件
  • 頻繁切換,不需要重複渲染
  • Vue常見效能優化

七、mixin

  • 多個元件有相同的邏輯,抽離出來
  • mixin並不是完美的解決方案,會有一些問題

    • 變數來源不明確,不利於閱讀
    • 多mixin可能會造成命名衝突
    • mixin和元件出現多對多的關係,複雜度較高
  • vue3提出的Composition API旨在解決這些問題 MixinDemo.vue:

image.png

mixin.js

image.png

「其他文章」