vue的技巧代碼

轉載：http://www.javashuo.com/article/p-pdpwlrjp-gr.html

第一招：化繁爲簡的Watchers

場景還原：

created(){
    this.fetchPostList() }, watch: { searchInputValue(){ this.fetchPostList() } }

組件建立的時候咱們獲取一次列表，同時監聽input框，每當發生變化的時候從新獲取一次篩選後的列表這個場景很常見，有沒有辦法優化一下呢？

招式解析：
首先，在watchers中，能夠直接使用函數的字面量名稱；其次，聲明immediate:true表示建立組件時立馬執行一次。

watch: {  searchInputValue:{  handler: 'fetchPostList',  immediate: true } }

第二招：一勞永逸的組件註冊

場景還原：

import BaseButton from './baseButton' import BaseIcon from './baseIcon' import BaseInput from './baseInput' export default { components: { BaseButton, BaseIcon, BaseInput } }

<BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton>

咱們寫了一堆基礎UI組件，而後每次咱們須要使用這些組件的時候，都得先import，而後聲明components，很繁瑣！秉持能偷懶就偷懶的原則，咱們要想辦法優化！

招式解析：
咱們須要藉助一下神器webpack，使用 require.context() 方法來建立本身的（模塊）上下文，從而實現自動動態require組件。這個方法須要3個參數：要搜索的文件夾目錄，是否還應該搜索它的子目錄，以及一個匹配文件的正則表達式。

咱們在components文件夾添加一個叫global.js的文件，在這個文件裏藉助webpack動態將須要的基礎組件通通打包進來。

import Vue from 'vue' function capitalizeFirstLetter(string) { return string.charAt(0).toUpperCase() + string.slice(1) } const requireComponent = require.context( '.', false, /\.vue$/ //找到components文件夾下以.vue命名的文件 ) requireComponent.keys().forEach(fileName => { const componentConfig = requireComponent(fileName) const componentName = capitalizeFirstLetter( fileName.replace(/^\.\//, '').replace(/\.\w+$/, '') //由於獲得的filename格式是: './baseButton.vue', 因此這裏咱們去掉頭和尾，只保留真正的文件名 ) Vue.component(componentName, componentConfig.default || componentConfig) }) 

最後咱們在main.js中import 'components/global.js'，而後咱們就能夠隨時隨地使用這些基礎組件，無需手動引入了。

第三招：釜底抽薪的router key

場景還原：
下面這個場景真的是傷透了不少程序員的心...先默認你們用的是Vue-router來實現路由的控制。
假設咱們在寫一個博客網站，需求是從/post-page/a，跳轉到/post-page/b。而後咱們驚人的發現，頁面跳轉後數據居然沒更新？！緣由是vue-router"智能地"發現這是同一個組件，而後它就決定要複用這個組件，因此你在created函數裏寫的方法壓根就沒執行。一般的解決方案是監聽$route的變化來初始化數據，以下：

data() { return { loading: false, error: null, post: null } }, watch: { '$route': { handler: 'resetData', immediate: true } }, methods: { resetData() { this.loading = false this.error = null this.post = null this.getPost(this.$route.params.id) }, getPost(id){ } }

bug是解決了，可每次這麼寫也太不優雅了吧？秉持着能偷懶則偷懶的原則，咱們但願代碼這樣寫：

data() { return { loading: false, error: null, post: null } }, created () { this.getPost(this.$route.params.id) }, methods () { getPost(postId) { // ... } }

招式解析:

那要怎麼樣才能實現這樣的效果呢，答案是給router-view添加一個unique的key，這樣即便是公用組件，只要url變化了，就必定會從新建立這個組件。（雖然損失了一丟丟性能，但避免了無限的bug）。同時，注意我將key直接設置爲路由的完整路徑，一箭雙鵰。

<router-view :key="$route.fullpath"></router-view>

第四招: 無所不能的render函數

場景還原:
vue要求每個組件都只能有一個根元素，當你有多個根元素時，vue就會給你報錯

<template>
  <li v-for="route in routes" :key="route.name" > <router-link :to="route"> {{ route.title }} </router-link> </li> </template> ERROR - Component template should contain exactly one root element. If you are using v-if on multiple elements, use v-else-if to chain them instead.

招式解析:
那有沒有辦法化解呢，答案是有的，只不過這時候咱們須要使用render()函數來建立HTML，而不是template。其實用js來生成html的好處就是極度的靈活功能強大，並且你不須要去學習使用vue的那些功能有限的指令API，好比v-for, v-if。（reactjs就徹底丟棄了template）

functional: true, render(h, { props }) { return props.routes.map(route => <li key={route.name}> <router-link to={route}> {route.title} </router-link> </li> ) }

第五招：無招勝有招的高階組件

劃重點：這一招威力無窮，請務必掌握
當咱們寫組件的時候，一般咱們都須要從父組件傳遞一系列的props到子組件，同時父組件監聽子組件emit過來的一系列事件。舉例子：

//父組件 <BaseInput :value="value" label="密碼" placeholder="請填寫密碼" @input="handleInput" @focus="handleFocus> </BaseInput> //子組件 <template> <label> {{ label }} <input :value="value" :placeholder="placeholder" @focus=$emit('focus', $event)" @input="$emit('input', $event.target.value)" > </label> </template>

有下面幾個優化點：

1.每個從父組件傳到子組件的props,咱們都得在子組件的Props中顯式的聲明才能使用。這樣一來，咱們的子組件每次都須要申明一大堆props, 而相似placeholer這種dom原生的property咱們其實徹底能夠直接從父傳到子，無需聲明。方法以下：

<input
      :value="value" v-bind="$attrs" @input="$emit('input', $event.target.value)" > 

$attrs包含了父做用域中不做爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時，這裏會包含全部父做用域的綁定，而且能夠經過 v-bind="$attrs" 傳入內部組件——在建立更高層次的組件時很是有用。

2.注意到子組件的@focus=$emit('focus', $event)"其實什麼都沒作，只是把event傳回給父組件而已，那其實和上面相似，我徹底不必顯式地申明：

<input :value="value" v-bind="$attrs" v-on="listeners" > computed: { listeners() { return { ...this.$listeners, input: event => this.$emit('input', event.target.value) } } }

$listeners包含了父做用域中的 (不含 .native 修飾器的) v-on 事件監聽器。它能夠經過 v-on="$listeners" 傳入內部組件——在建立更高層次的組件時很是有用。

3.須要注意的是，因爲咱們input並非BaseInput這個組件的根節點，而默認狀況下父做用域的不被認做 props 的特性綁定將會「回退」且做爲普通的 HTML 特性應用在子組件的根元素上。因此咱們須要設置inheritAttrs:false，這些默認行爲將會被去掉, 以上兩點的優化才能成功。

 

轉載：https://zhuanlan.zhihu.com/p/25623356

技巧一：任何地方都能寫 jsx

寫過 Vue jsx 的都知道，一般咱們須要將 jsx 寫在 render(h) {} 中。可是有些狀況下咱們想在其餘方法裏也能寫 jsx，例如上篇文章的一個 Element 組件的例子。

const h = this.$createElement this.$notify({ title: 'GitHub', message: h('div', [ h('p', '[GitHub] Subscribed to ElemeFE/element notifications'), h('el-button', {}, '已讀') ]) }) 

調用 notification 服務，顯示一段自定義的內容。這段代碼並無寫在 render 裏，可是其實咱們也能寫成 jsx，例如：

{ methods: { showNotify() { const h = this.$createElement this.$notify({ title: 'GitHub', message: ( <div> <p>[GitHub] Subscribed to ElemeFE/element notification</p> <el-button>已讀<el-button> <div>) }) } } } 

使用 babel-plugin-transform-vue-jsx 插件，這段代碼能夠正常運行。原理其實很簡單，vue-jsx 插件文檔裏提到 render(h) 中的 h 其實就是 this.$createElement，那麼咱們只須要在使用 jsx 的方法中聲明一下 h 就完成了。若是有用到 eslint，能夠加上 // eslint-disable-line 忽略提示：

const h = this.$createElement // eslint-disable-line 

實際上在最新發布的 babel-plugin-transform-vue-jsx 3.4.0 裏已經不在須要手動聲明 h 變量，如今就能夠愉快的寫 jsx 在組件裏的任何地方。

技巧二：$props 的使用姿式

Vue.js 2.2 中加入了一個新特性 —— $props。文檔只是很簡潔的介紹了是什麼但並無解釋有什麼用，那下面我給你們分享下哪些狀況會須要這個屬性。

1. 繼承原生屬性

當開發表單組件時，不得不解決的問題是繼承原生組件的各類屬性。例如封裝一個 input 組件，要有原生的 placeholder 屬性，那麼咱們的代碼多是這樣：

<template> <div> <label>{{ label }}</label> <input @input="$emit('input', $event.target.value)" :value="value" :placeholder="placeholder"> </div> </template> <script> export default { props: ['value', 'placeholder', 'label'] } </script> 

可是若是須要支持其餘原生屬性就須要繼續寫模板內容：

<template> <div> <label>{{ label }}</label> <input @input="$emit('input', $event.target.value)" :value="value" :placeholder="placeholder" :maxlength="maxlength" :minlength="minlength" :name="name" :form="form" :value="value" :disabled="disabled" :readonly="readonly" :autofocus="autofocus"> </div> </template> <script> export default { props: ['label', 'placeholder', 'maxlength', 'minlength', 'name', 'form', 'value', 'disabled', 'readonly', 'autofocus'] } </script> 

若是還要設置 type，或者是要同時支持 textarea，那麼重複的代碼量仍是很可怕的。可是換個思路，直接用 jsx 寫的話或許會輕鬆一些：

export default { props: ['label', 'type', 'placeholder', 'maxlength', 'minlength', 'name', 'form', 'value', 'disabled', 'readonly', 'autofocus'], render(h) { const attrs = { placeholder: this.placeholder, type: this.type // ... } return ( <div> <label>{ this.label }</label> <input { ...{ attrs } } /> </div> ) } } 

在 Vue 的 vnode 中，原生屬性是定義在 data.attrs 中，因此上面 input 部分會被編譯成：

h('input', { attrs: attrs }) 

這樣就完成了原生屬性的傳遞，同理若是須要經過 type 設置 textarea，只須要加個判斷設置 tag 就行了。

h(this.type === 'textarea' ? 'textarea' : 'input', { attrs }) 

目前爲止咱們仍是須要定義一個 attrs 對象，可是所須要的屬性其實都已經定義在了 props 中，那麼能直接從 props 裏拿到值豈不是更好？咱們能夠簡單的寫一個 polyfill 完成這件事。（實際上 Vue 2.2 中不須要你引入 polyfill，默認已經支持）

import Vue from 'vue' Object.defineProperty(Vue.prototype, '$props', { get () { var result = {} for (var key in this.$options.props) { result[key] = this[key] } return result } }) 

原理很簡單，從 vm.$options.props 遍歷 key 後從 vm 中取值，如今咱們就能夠直接從 vm.$props 拿到全部 props 的值了。那麼咱們的代碼就能夠改爲這樣：

render(h) { return ( <div> <label>{ this.label }</label> <input { ...{ attrs: this.$props } } /> </div> ) } 

若是你留意過 Vue 文檔介紹 v-bind 是能夠傳對象 的話，那咱們的代碼用 Vue 模板寫的話就更簡單了：

<template> <div> <label>{{ label }}</label> <input v-bind="$props"> </div> </template> 

2. 繼承自定義組件的屬性

$props 的功能遠不止於此。若是你須要基於上面的 input 組件封裝成另外一個組件時，那麼咱們要如何繼承它的屬性？

例如封裝一個帶校驗功能的 input 組件，代碼多是這樣：

<template> <div> <XInput /> <div v-show="message && show-hit" class="hit">{{ message }}</div> </div> </template> <script> import XInput from './input.vue' export default { components: { XInput }, props: { showHit: Boolean }, data () { return { message: '錯誤提示' } } } </script> 

關鍵就是如何傳 XInput 的 props。其實只須要在當前組件的 props 中把 Xinput 的 props 複製一遍後，用 v-bind 就完成了。

<template> <div> <XInput v-bind="$props" /> <div v-show="message && show-hit" class="hit">{{ message }}</div> </div> </template> <script> import XInput from './input.vue' export default { components: { XInput }, props: { showHit: Boolean, ...XInput.props }, data () { return { message: '錯誤提示' } } } </script> 

或者用 Object.assign 也能夠實現：

{ props: Object.assign({ showHit: Boolean }, XInput.props) } 

以上就是 $props 的基本用法，若是你有其餘見解或用法歡迎留言分享。好了這個系列的分享告一段落，全部例子的代碼我都放在了 vue-tricks 倉庫裏。下次再見！

 

轉載：  知乎  餓了麼前端  Vue.js 的實用技巧（一）   https://zhuanlan.zhihu.com/p/25589193

技巧二：vue-loader 特別的使用姿式

vue-loader 是處理 *.vue 文件的 webpack loader。它自己提供了豐富的 API，有些 API 很實用但不多被人熟知。例如接下來要介紹的 preserveWhitespace 和 transformToRequire。

 

1. 用 preserveWhitespace 減小文件體積

有些時候咱們在寫模板時不想讓元素和元素之間有空格，可能會寫成這樣：

<ul> <li>1111</li><li>2222</li><li>333</li> </ul> 

固然還有其餘方式，目的是爲了去掉元素間的空格。其實咱們徹底能夠經過配置 vue-loader 實現這一需求。

 

{ vue: { preserveWhitespace: false } } 

它的做用是阻止元素間生成空白內容，在 Vue 模板編譯後使用 _v(" ") 表示。若是項目中模板內容多的話，它們仍是會佔用一些文件體積的。例如 Element 配置該屬性後，未壓縮狀況下文件體積減小了近 30Kb。

2. transformToRequire 不再用把圖片寫成變量了

之前在寫 Vue 的時候常常會寫到這樣的代碼：把圖片提早 require 傳給一個變量再傳給組件。

<template> <div> <avatar :default-src="DEFAULT_AVATAR"></avatar> </div> </template> <script> export default { created () { this.DEFAULT_AVATAR = require('./assets/default-avatar.png') } } </script> 

其實經過配置 transformToRequire 後，就能夠直接配置。

 

{ vue: { transformToRequire: { avatar: ['default-src'] } } } 

因而咱們代碼就能夠簡化很多

<template> <div> <avatar default-src="./assets/default-avatar.png"></avatar> </div> </template> 

vue-loader 還有不少實用的 API 例如最近加入的 Custom Blocks，感興趣的各位能夠去文檔裏找找看。

技巧三：template + render function

在寫 Vue 模板時，有時會遇到不得不手寫 Render Function 的狀況。如須要根據 prop 更改佈局——Element 分頁組件 ——或者根據 prop 判斷生成指定標籤。

好比咱們想實現 Element 裏的 input 組件的用法：

<field label="標題" type="input" /> <field label="內容" type="textarea" /> 

會渲染出一個 input 和 textarea

 

那麼咱們用 Vue 模板寫就須要根據 type 判斷當前渲染哪一個組件。

 

<template> <div> <label>{{ label }}</label> <input v-if="type !== 'textarea'" :type="type"> <textarea v-else></textarea> </div> </template> <script> export default { name: 'field', props: ['type', 'label'] } </script> 

若是咱們還須要傳原生組件上的屬性，例如 placeholder, name, disabled 以及各類校驗屬性和事件，那麼重複代碼就會很是多。可是若是咱們用 jsx 寫就會容易許多且代碼也會更清晰。

 

export default { name: 'field', props: ['type', 'label'], render (h) { const tag = this.type === 'textarea' ? 'textarea' : 'input' const type = this.type === 'textarea' ? '' : this.type return ( <div> <label>{ this.label }</label> { h(tag, { props: { type } }) } </div> ) } } 

但是若是組件再複雜一些，須要加入表單驗證的錯誤提示或者一些 icon 等內容，那麼寫模板就比寫 Render Function 更容易閱讀。那咱們是否能夠將兩種方式結合起來？

在 Vue 裏有一個強大的特性：Slots —— 給組件設置一個特殊的 slot 組件，讓使用者能夠傳入自定義的模板內容。可是在實際使用中，我發現實際上是能夠給 slot 賦值的。仍是用上面的例子，假設 label 部分咱們想寫成模板，input 的部分根據 type 生成特性的內容。那麼咱們模板能夠寫成：

<template> <div> <label>{{ label }}</label> <slot></slot> </div> </template> 

input 部分用 slot 代替，可是並非讓使用者本身定義，而是咱們給這個 slot 賦值：

<script> export default { name: 'field', props: ['type', 'label'], created() { this.$slots.default = [ this.renderField() ] }, methods: { renderField() { const h = this.$createElement const tag = this.type === 'textarea' ? 'textarea' : 'input' const type = this.type === 'textarea' ? '' : this.type return h(tag, { props: { type } }) } } } </script> 

其中 renderField 就是咱們手寫的 Render Function，在組件 created 時調用並賦值給 this.$slots.default。意思就是咱們用手寫的 vnode 強制替換掉了 $slots.default 的 vnode，從而達到 vue template 和 Render Function 結合的目的。

可是這有個問題，這麼作咱們就破壞了 slot 的更新規則。看過源碼能夠知道 slots 是在父組件 的 vdom 更新時才更新的 slots，也就是說咱們無法在組件內部觸發 renderField 方法，除非用 watch，可是須要 watch 的 prop 多的話也很麻煩。

因此若是你只是須要在初始化時（created）用這種方式渲染組件，而且明白它的限制，其實仍是能夠發揮很大的用處的。例如 Element 的 notification，經過傳入一段內容能夠顯示一個消息提醒。其實咱們還能夠傳入 vdom 來顯示一段自定義內容，在線例子

const h = this.$createElement this.$notify({ title: 'GitHub', message: h('div', [ h('p', '[GitHub] Subscribed to ElemeFE/element notifications'), h('el-button', {}, '已讀') ]) }) 

但願你喜歡這一期的分享，後面咱們還會連載一些 Vue 實用技巧，下期見！