【译】Vue Patterns
英文原版：learn-vuejs
中文翻譯： yoyoys此頁面集結了許多有用的 Vue 實作模式、技術、技巧、以及有幫助的參考連結。
- Vue 實作模式 (learn-vuejs) 中文版
- 元件宣告
- 單文件組件(Single File Component, SFC) - 最為常見
- 字串樣板 (String Template) (或是 es6 樣板字面值 (Template Literal)))
- 渲染函式 (Render Function)
- JSX
- vue-class-component (使用 es6 classes)
- 參考連結
- 元件條件渲染 (Component Conditional Rendering)
- 指令 (Directives) (
v-if/v-else/v-else-if/v-show) - JSX
- 指令 (Directives) (
- 動態元件
- 元件組合
- 基本組合 (Basic Composition)
- 繼承 (Extends)
- 混入 (Mixins)
- 預設插槽 (Slots (Default))
- 具名插槽(Named Slots)
- 作用域插槽 (Scoped Slots)
- 渲染屬性 (Render Props)
- 參數傳遞 (Passing Props)
- 高優先元件 (Higher Order Component, HOC)
- 相依注入 (Dependency injection)
- 提供 與 注入 (Provide / Inject)
- 注入裝飾器模式 (@Provide / @Inject Decorator)
- 錯誤處理 (Handling Errors)
errorCaptured事件
- 生產力小技巧
- 有用的連結
- 組建間的溝通
- 重構技巧
- Vuex
- Mobx
- 不須渲染的元件 (Renderless Component)
- 目錄結構
- 小技巧
- 專案範例
- 不良示範 (反模式)
- 影片與音訊課程
- 付費課程
- 其他資訊
- 元件宣告
元件宣告
單文件組件(Single File Component, SFC) - 最為常見
字串樣板 (String Template) (或是 es6 樣板字面值 (Template Literal))
Vue.component('my-btn', {
template: `
`,
data() {
return {
text: 'Click me',
};
},
methods: {
handleClick() {
console.log('clicked');
},
},
});渲染函式 (Render Function)
Vue.component('my-btn', {
data() {
return {
text: 'Click me',
};
},
methods: {
handleClick() {
console.log('clicked');
},
},
render(h) {
return h('button', {
attrs: {
class: 'btn-primary'
},
on: {
click: this.handleClick,
},
});
},
});JSX
Vue.component('my-btn', {
data() {
return {
text: 'Click me',
};
},
methods: {
handleClick() {
console.log('clicked');
},
},
render() {
return (
);
},
});vue-class-component (使用 es6 classes)
參考連結
- 7 Ways To Define A Component Template in VueJS
元件條件渲染 (Component Conditional Rendering)
指令 (Directives) (v-if / v-else / v-else-if / v-show)
v-if
只在 v-if 值為 true 時渲染
v-if 與 v-else
只在 v-if 值為 true 時渲染
只在 v-if 值為 false 時渲染
v-else-if
只在 `type` 等於 `A` 時渲染
只在 `type` 等於 `B` 時渲染
只在 `type` 等於 `C` 時渲染
只在 `type` 不等於>fmf `A` 或 `B` 或 `C` 時渲染
v-show
永遠都會渲染，但是只在 `v-show` 值為 true 時顯示
如果你需要同時在多個元素上面做條件式渲染，你可以在 元素上使用這些指令 (v-if / v-else / v-else-if /v-show)。 注意： 元素不會實際渲染一個 DOM。
所有元素
都會被渲染成為 DOM
除了 `template` 元素
JSX
如果你在你的 Vue 應用程式中使用 JSX，你可以使用所有 javascript 語句，例如 if else 、 switch case 、三元運算 (ternary) 與 邏輯運算式 (logical operator)
if else 語句
export default {
data() {
return {
isTruthy: true,
};
},
render(h) {
if (this.isTruthy) {
return 值為真時渲染
;
} else {
return 值為假時渲染
;
}
},
};switch case 語句
import Info from './Info';
import Warning from './Warning';
import Error from './Error';
import Success from './Success';
export default {
data() {
return {
type: 'error',
};
},
render(h) {
switch (this.type) {
case 'info':
return 你也可以透過物件的對應來簡化
switch case
import Info from './Info';
import Warning from './Warning';
import Error from './Error';
import Success from './Success';
const COMPONENT_MAP = {
info: Info,
warning: Warning,
error: Error,
success: Success,
};
export default {
data() {
return {
type: 'error',
};
},
render(h) {
const Comp = COMPONENT_MAP[this.type || 'success'];
return
三元運算子 (ternary operator)
export default {
data() {
return {
isTruthy: true,
};
},
render(h) {
return (
{this.isTruthy ? (
值為真時渲染
) : (
值為假時渲染
)}
);
},
};
邏輯運算子 (logical operator)
export default {
data() {
return {
isLoading: true,
};
},
render(h) {
return {this.isLoading && Loading ...
};
},
};
參考連結
Difference Between v-if and v-show [With Video at End]
動態元件
使用 is 屬性在
is 屬性在
範例 1 範例 2 範例 3
上面的範例，原有
元件組合
基本組合 (Basic Composition)
繼承 (Extends)
當你需要繼承一個單文件組件 (SFC) 時可以使用。
參考連結
Extending VueJS Components
混入 (Mixins)
// closableMixin.js
export default {
props: {
isOpen: {
default: true
}
},
data: function() {
return {
shown: this.isOpen
}
},
methods: {
hide: function() {
this.shown = false;
},
show: function() {
this.shown = true;
},
toggle: function() {
this.shown = !this.shown;
}
}
}
{{text}}
參考連結
Practical use of Components and Mixins in Vue JS
預設插槽 (Slots (Default))
Login
參考連結
Understanding Component Slots with Vue.js Composing Custom Elements With Slots And Named Slots
具名插槽(Named Slots)
BaseLayout.vue
App.vue
這裡是頁面標題
一段文件主體內的文字
另外一段文字
一些聯絡資訊
作用域插槽 (Scoped Slots)
-
{{ todo.text }}
{{ todo.text }}
參考資料
Getting Your Head Around Vue.js Scoped Slots Understanding scoped slots in Vue.js Scoped Component Slots in Vue.js The Trick to Understanding Scoped Slots in Vue.js The Power of Scoped Slots in Vue
渲染屬性 (Render Props)
大多數狀況下，你可以優先使用作用域插槽 (Scoped Slots) 之於渲染屬性 (Render Props)，但是，在某些狀況下渲染屬性還是很有用的。
於單文件組件：
於
JSX
const Mouse = {
name: "Mouse",
props: {
render: {
type: Function,
required: true
}
},
data() {
return {
x: 0,
y: 0
};
},
methods: {
handleMouseMove(event) {
this.x = event.clientX;
this.y = event.clientY;
}
},
render(h) {
return (
{this.$props.render(this)}
);
}
};
export default Mouse;參考連結
- Leveraging Render Props in Vue
- Use a Vue.js Render Prop!
參數傳遞 (Passing Props)
有時候你想要傳遞所有參數 (props) 與事件 (listeners) 到子元件，但又不想要宣告所有子元件的參數。 你可以直接將 $attrs 與 $listeners 綁定在子元件上。
{{title}}
在父元件上，你可以這樣做：
參考資料
- Transparent Wrapper Components in Vue
高優先元件 (Higher Order Component, HOC)
參考連結
- Higher Order Components in Vue.js
- Do we need Higher Order Components in Vue.js?
- Higher-Order Components in Vue.js
相依注入 (Dependency injection)
Vue 支援 提供 與 注入 (Provide / inject) 機制來傳遞一個物件到所有子代元件中，不管結構有多深，只要都基於同一個父代即可。 注意： provide 和 inject 並沒有響應能力 (reactive) ，除非你傳遞的物件本身就帶有響應能力。
// 父元件
// 子元件
上述的元件結構，若要從 父元件 取得資料，你必須要透過 參數(props) 傳遞資料到 子元件 與 孫元件 之中。 但如果 父元件 提供 (provide) 資料（或物件）， 孫元件 可以透過宣告直接 注入(inject) 父元件 中所定義的資料（或物件）。
參考連結
- Official API
- Official Guide
- Component Communication
- Dependency Injection in Vue.js App with TypeScript
提供 與 注入 (Provide / Inject)
// ParentComponent.vue
export default {
provide: {
theme: {
primaryColor: 'blue',
},
},
};// GrandChildComponent.vue
注入裝飾器模式 (@Provide / @Inject Decorator)
// ParentComponent.vue
import { Component, Vue, Provide } from 'vue-property-decorator';
@Component
export class ParentComponent extends Vue {
@Provide
theme = {
primaryColor: 'blue',
};
}// GrandChildComponent.vue
錯誤處理 (Handling Errors)
errorCaptured 事件
export default {
name: 'ErrorBoundary',
data() {
return {
error: false,
errorMessage: '',
};
},
errorCaptured (err, vm, info) {
this.error = true;
this.errorMessage = `${err.stack}\n\nfound in ${info} of component`;
return false;
},
render (h) {
if (this.error) {
return h('pre', { style: { color: 'red' }}, this.errorMessage);
}
return this.$slots.default[0]
}
};
範例
- Example 1
參考連結
- Handling Errors in Vue with Error Boundaries
生產力小技巧
讓監聽器在 created 事件時就有效
// 不要這樣做
created() {
this.fetchUserList();
},
watch: {
searchText: 'fetchUserList',
}// 這樣做
watch: {
searchText: {
handler: 'fetchUserList',
immediate: true,
}
}有用的連結
組建間的溝通
- Vue.js Event Bus + Promises
- Vue.js Component Communication Patterns
- Leveraging Vue events to reduce prop declarations
- Control DOM Outside Your Vue.js App with portal-vue
- Creating Custom Inputs With Vue.js
- Creating a Global Event Bus with Vue.js
重構技巧
- Refactoring Vue: Cleaning Up a List of Posts With Better Component Splitting and More ES6
- Clean up your Vue modules with ES6 Arrow Functions
- Examples of Vue’s Clean Code
- Optimizing Performance with Computed Properties
Vuex
- Decouple Vuex modules with the Mediator pattern
- Vuex getters are great, but don’t overuse them
- Reusable Vuex Mutation Functions
- A pattern to handle ajax requests in Vuex
- [vuex Mutations] Single Changes vs. Single Responsibility
- Components and How They Interact in Vue and Vuex
- Why VueX Is The Perfect Interface Between Frontend and API
- Composing actions with Vuex
- How to Build Complex, Large-Scale Vue.js Apps With Vuex
Mobx
- Build A View-Framework-Free Data Layer Based on MobX — Integration With Vue (1)
不須渲染的元件 (Renderless Component)
- Renderless Components in Vue.js
- Building Renderless Components to Handle CRUD Operations in Vue.js
範例
- Renderless Calendar component
目錄結構
- How you can improve your workflow using the JavaScript console
- How to Structure a Vue.js Project
小技巧
- How To Build Vue Components Like A Pro
- Four tips for working with Vue.js
- Tips from a Lowly VueJS Developer
- Throttling and Debouncing Events with Vue.js and lodash
- Are partially applied functions in event handlers possible?
- Vue.js — Considerations and Tricks
- Six random issues and their solutions in VueJS.
- When VueJS Can't Help You
專案範例
- vue-enterprise-boilerplate
- 7-secret-patterns
- Vue.js-2-Design-Patterns-and-Best-Practices
不良示範 (反模式)
- Chris Fritz - Vue.js Anti-Patterns (and How to Avoid Them)
- Common mistakes to avoid while working with Vue.js
影片與音訊課程
- 81: Evan You - Advanced Vue Component Design
- 7 Secret Patterns Vue Consultants Don’t Want You to Know
付費課程
- Advanced Vue Component Design
其他資訊
- Creating an Interpose Vue component from a React implementation
- Composing computed properties in Vue.js
- 4 AJAX Patterns For Vue.js Apps
- 3 Code Splitting Patterns For VueJS and Webpack
- The easiest way to improve your Vue.js application. Part 1
- Using JSX with Vue and Why You Should Care
- Compound components
- Creating Multi-root Vue.js Components
- Understanding Vue.js Reactivity in Depth with Object.defineProperty()
- Templating in Vue: Separation of Concerns or Separation of Technology or something else?
- Stashing Vue components data
- Creating Reusable Transitions in Vue
- vue-advanced-workshop
- Do it with Elegance: How to Create Data-Driven User Interfaces in Vue
- Creating Vue.js Component Instances Programmatically
- Managing User Permissions in a Vue.js App
- Render Functional Components in Vue.js
- Templating in Vue: Separation of Concerns or Separation of Technology or something else?
- Looping through Object Properties
- Cancelling async operations in Vue.js
- Scoped styles with v-html
- Pagination With Vuejs
- What does the ‘h’ stand for in Vue’s render method?
- How To Build Vue Components That Play Nice
- Making responsive Vue components with ResizeObserver
- An imperative guide to forms in Vue.js
- Vue.js: the good, the meh, and the ugly
原文发布时间为：2018年07月02日
原文作者：
掘金
本文来源： 掘金 如需转载请联系原作者
本文来源： 掘金 如需转载请联系原作者