owned this note   changed 5 years ago  
Linked with GitHub

Vue.js Patterns - Component 演進之路 - 許富棋

歡迎來到 MOPCON 2019 共筆

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More →

共筆入口：https://hackmd.io/@mopcon/2019
手機版請點選上方 按鈕展開議程列表。

會場 wifi-SSID: mopcon-2019
會場 wifi-PASSWD: mopcon-2019

tags: MOPCON 2019

副標題 - 101 種不用 Vuex 的作法。

Pattern

  • 模式（Pattern），在物體或事件上，產生的一種規律變化與自我重複的樣式之過程。 - wiki - pattern

Design Pattern

  • 在軟體工程中，設計模式（design pattern）是對軟體設計中普遍存在（反覆出現）的各種問題，所提出的解決方案。 - wiki - design pattern

  • Component 化的的好處

    • 整理樣板
    • 能夠解耦合

由於只有後端才能寫 micro service ，前端是不能撰寫的。但我認為 component 就是前端的 micro service。

Vue Component

  • Vue Instance
  • Vue Component - SFCs (Single-files Components)

延伸問題

  • 元件間溝通(Componets Communication)
  • 樣板簡化(Template Simplify)
  • 樣式重用 (Style Reuse)

家家有本難唸經

  • PROPS DRILLING

    • 樹狀結構愈深
    • 非自用 Props 愈多 - 這不是好現象

  • 存取特定 VM

    • 直接存取上下層 VM
    • 透過 $ref 掛載點存取 VM

  • $ref

    • 與樹狀結構解耦
    • 避免 ref 掛載到 DOM

  • 簡化接口宣告

    • v-model 語法糖
    • 簡化 v-bind:prop 宣告
    • 簡化 v-on:envent 宣告
    • 透過 Event Bus

  • 簡化 V-BIND

    • inheritAttrs:false 關掉預設行為
    • $attrs -> 對應一整包 props，當作 Object 傳下去

  • 簡化 V-ON

    • $listeners

  • EVENT EMITTER / LISTENER

    • 手動註冊 listener
    • vm.\(on / vm.\)emit
    • vm.$off
    • vm.$once

  • EVENT BUS

    • 與樹狀結構解偶
    • 視需要，再註冊 lisener
    • 簡化白手套 v-on listener 宣告

  • 簡化接口宣告

    • v v-model 語法糖
    • v 簡化 v-bind:prop 宣告
    • v 透過 Event Bus

你聽過 Provide / inject

家產繼承
你要就拿，不拿也罷

在最上層提供(Provide)，在最下層想要就拿(inject)

  • Provide /inject 坑

    • vue 的 props, data 是 observed

  • MIXIN 恩恩怨怨

    • 切割已穩定的邏輯
    • 分拆元件前置準備
    • 用於翻修年久失修的元件

  • SLOT

    • 解決部分條件渲染的 V-if / v-else
    • 當你需要動態抽換時，起碼換掉兩個 props

React 部分

HOC 坑 -> 小心 Context 綁錯

難用: Render props

  • 從 Parent 換掉 Child Templete
  • Vue 有 inline-template

擴充邏輯

  • smisin

  • extent

  • 分拆多個 mixin 切割後再包 Component

  • 狀態網 vues 丟

  • 跨多層共用狀態

    • x Smart /Dumb
    • Vuex （推薦）
    • Privide / Inject (推薦)

  • 跨多層通知

    • x Smart /Dumb
    • Vuex（推薦）
    • Event Bus (推薦)

  • 共用樣板

    • x 增加 flag + v-if /v-else
    • 拆 Slot Wrapper
    • 改寫 render function 拆 HOC

  • 其它讓程式碼變乾淨的手法

    • Vue-class
    • Composition API
Select a repo