在vue的使用過程當中會遇到各類場景,當普通使用時以爲沒什麼,可是或許優化一下能夠更高效更優美的進行開發。下面有一些我在平常開發的時候用到的小技巧,在下將不按期更新~javascript
有時候咱們會遇到這樣的場景,一個組件中有幾個圖表,在瀏覽器resize的時候咱們但願圖表也進行resize,所以咱們會在父容器組件中寫:html
mounted() {
setTimeout(() =>window.onresize = () => {
this.$refs.chart1.chartWrapperDom.resize()
this.$refs.chart2.chartWrapperDom.resize()
// ...
}, 200)
destroyed() { window.onresize = null }
複製代碼
這樣子圖表組件若是跟父容器組件不在一個頁面,子組件的狀態就被放到父組件進行管理,爲了維護方便,咱們天然但願子組件的事件和狀態由本身來維護,這樣在添加刪除組件的時候就不須要去父組件挨個修改vue
這裏使用了lodash的節流throttle函數,也能夠本身實現,這篇文章也有節流的實現能夠參考一下。 以Echarts爲例,在每一個圖表組件中:java
computed: {
/**
* 圖表DOM
*/
chartWrapperDom() {
const dom = document.getElementById('consume-analy-chart-wrapper')
return dom && Echarts.init(dom)
},
/**
* 圖表resize節流,這裏使用了lodash,也能夠本身使用setTimout實現節流
*/
chartResize() {
return _.throttle(() =>this.chartWrapperDom && this.chartWrapperDom.resize(), 400)
}
},
mounted() {
window.addEventListener('resize', this.chartResize)
},
destroyed() {
window.removeEventListener('resize', this.chartResize)
}
複製代碼
官方註冊過濾器的方式:webpack
exportdefault {
data () { return {} },
filters:{
orderBy (){
// doSomething
},
uppercase () {
// doSomething
}
}
}
複製代碼
可是咱們作項目來講,大部分的過濾器是要全局使用的,不會往往用到就在組件裏面去寫,抽成全局的會更好些。 官方註冊全局的方式:git
// 註冊
Vue.filter('my-filter', function (value) {
// 返回處理後的值
})
// getter,返回已註冊的過濾器var myFilter = Vue.filter('my-filter')
複製代碼
可是分散寫的話不美觀,所以能夠抽出成單獨文件。github
咱們能夠抽出到獨立文件,而後使用Object.keys在main.js入口統一註冊web
/src/common/filters.js正則表達式
let dateServer = value => value.replace(/(\d{4})(\d{2})(\d{2})/g, '$1-$2-$3')
export { dateServer }
複製代碼
/src/main.jsvue-router
import * as custom from'./common/filters/custom'Object.keys(custom).forEach(key => Vue.filter(key, custom[key]))
複製代碼
而後在其餘的.vue 文件中就可愉快地使用這些咱們定義好的全局過濾器了
<template><sectionclass="content"><p>{{ time | dateServer }}</p><!-- 2016-01-01 --></section></template><script>exportdefault {
data () {
return {
time: 20160101
}
}
}
</script>
複製代碼
須要使用組件的場景:
<template><BaseInputv-model="searchText" @keydown.enter="search"/><BaseButton @click="search"><BaseIconname="search"/></BaseButton></template><script>import BaseButton from'./baseButton'import BaseIcon from'./baseIcon'import BaseInput from'./baseInput'exportdefault {
components: { BaseButton, BaseIcon, BaseInput }
}
</script>
複製代碼
咱們寫了一堆基礎UI組件,而後每次咱們須要使用這些組件的時候,都得先import,而後聲明components,很繁瑣,這裏可使用統一註冊的形式
咱們須要藉助一下神器webpack,使用 require.context()
方法來建立本身的模塊上下文,從而實現自動動態require組件。這個方法須要3個參數:要搜索的文件夾目錄、是否還應該搜索它的子目錄、以及一個匹配文件的正則表達式。 咱們在components文件夾添加一個叫componentRegister.js的文件,在這個文件裏藉助webpack動態將須要的基礎組件通通打包進來。
/src/components/componentRegister.js
import Vue from'vue'/**
* 首字母大寫
* @param str 字符串
* @example heheHaha
* @return {string} HeheHaha
*/functioncapitalizeFirstLetter(str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
/**
* 對符合'xx/xx.vue'組件格式的組件取組件名
* @param str fileName
* @example abc/bcd/def/basicTable.vue
* @return {string} BasicTable
*/functionvalidateFileName(str) {
return/^\S+\.vue$/.test(str) &&
str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizeFirstLetter($1))
}
const requireComponent = require.context('./', true, /\.vue$/)
// 找到組件文件夾下以.vue命名的文件,若是文件名爲index,那麼取組件中的name做爲註冊的組件名
requireComponent.keys().forEach(filePath => {
const componentConfig = requireComponent(filePath)
const fileName = validateFileName(filePath)
const componentName = fileName.toLowerCase() === 'index'
? capitalizeFirstLetter(componentConfig.default.name)
: fileName
Vue.component(componentName, componentConfig.default || componentConfig)
})
複製代碼
這裏文件夾結構:
components
│ componentRegister.js
├─BasicTable
│ BasicTable.vue
├─MultiCondition
│ index.vue
複製代碼
這裏對組件名作了判斷,若是是index的話就取組件中的name屬性處理後做爲註冊組件名,因此最後註冊的組件爲:multi-condition
、basic-table
最後咱們在main.js中import 'components/componentRegister.js',而後咱們就能夠隨時隨地使用這些基礎組件,無需手動引入了~
當某個場景中vue-router從/post-page/a,跳轉到/post-page/b。而後咱們驚人的發現,頁面跳轉後數據居然沒更新?!緣由是vue-router"智能地"發現這是同一個組件,而後它就決定要複用這個組件,因此你在created函數裏寫的方法壓根就沒執行。一般的解決方案是監聽$route的變化來初始化數據,以下:
data() {
return {
loading: false,
error: null,
post: null
}
},
watch: {
'$route': { // 使用watch來監控是不是同一個路由
handler: 'resetData',
immediate: true
}
},
methods: {
resetData() {
this.loading = falsethis.error = nullthis.post = nullthis.getPost(this.$route.params.id)
},
getPost(id){ }
}
複製代碼
那要怎麼樣才能實現這樣的效果呢,答案是給router-view
添加一個不一樣的key,這樣即便是公用組件,只要url變化了,就必定會從新建立這個組件。
<router-view:key="$route.fullpath"></router-view>
複製代碼
還能夠在其後加+ +new Date()
時間戳,保證獨一無二
// 父組件
<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>
複製代碼
vue的組件實例中的$props
、$attrs
給咱們提供了很大的便利,特別是父子組件傳值的時候。
一、 每個從父組件傳到子組件的props,咱們都得在子組件的Props中顯式的聲明才能使用。這樣一來,咱們的子組件每次都須要申明一大堆props,這裏咱們知道v-bind 是能夠傳對象的,能夠在 vm.$props
中拿到全部父組件props的值 v-bind="$props"
<inputv-bind="$props"
@input="$emit('input', $event.target.value)">
複製代碼
二、 相似placeholer這種dom原生的property可使用$attrs
直接從父傳到子,無需聲明。方法以下:
<input:value="value"v-bind="$attrs"
@input="$emit('input', $event.target.value)">
複製代碼
$attrs
包含了父做用域中不做爲 prop 被識別 (且獲取) 的特性綁定 (class 和 style 除外)。當一個組件沒有聲明任何 prop 時,這裏會包含全部父做用域的綁定,而且能夠經過 v-bind="$attrs"
傳入內部組件。
三、 注意到子組件的@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"
傳入內部組件——在建立更高層次的組件時很是有用。
須要注意的是,因爲咱們input並非BaseInput這個組件的根節點,而默認狀況下父做用域的不被認做 props
的特性綁定將會「回退」且做爲普通的 HTML 特性應用在子組件的根元素上。因此咱們須要設置 inheritAttrs: false
,這些默認行爲將會被去掉,上面優化才能成功。
通常咱們在路由中加載組件的時候:
import Login from'@/views/login.vue'exportdefaultnew Router({
routes: [{ path: '/login', name: '登錄', component: Login}]
})
複製代碼
當你須要懶加載 lazy-loading 的時候,須要一個個把routes的component改成() => import('@/views/login.vue')
,甚爲麻煩。
當你的項目頁面愈來愈多以後,在開發環境之中使用 lazy-loading 會變得不太合適,每次更改代碼觸發熱更新都會變得很是的慢。因此建議只在生成環境之中使用路由懶加載功能。
根據Vue的異步組件和Webpack的代碼分割功能能夠輕鬆實現組件的懶加載,如:
const Foo = () =>import('./Foo.vue')
複製代碼
在區分開發環境與生產環境時,能夠在路由文件夾下分別新建兩個文件:
_import_production.js
module.exports = file => () => import('@/views/' + file + '.vue')
複製代碼
_import_development.js
(這種寫法vue-loader
版本至少v13.0.0以上)
module.exports = file =>require('@/views/' + file + '.vue').default
複製代碼
而在設置路由的router/index.js
文件中:
const _import = require('./_import_' + process.env.NODE_ENV)
exportdefaultnew Router({
routes: [{ path: '/login', name: '登錄', component: _import('login/index') }]
})
複製代碼
這樣組件在開發環境下就是非懶加載,生產環境下就是懶加載的了
vue-loader 是處理 *.vue 文件的 webpack loader。它自己提供了豐富的 API,有些 API 很實用但不多被人熟知。例如接下來要介紹的 preserveWhitespace
和 transformToRequire
preserveWhitespace
減小文件體積有些時候咱們在寫模板時不想讓元素和元素之間有空格,可能會寫成這樣:
<ul><li>1111</li><li>2222</li><li>333</li></ul>
複製代碼
固然還有其餘方式,好比設置字體的font-size: 0
,而後給須要的內容單獨設置字體大小,目的是爲了去掉元素間的空格。其實咱們徹底能夠經過配置 vue-loader 實現這一需求。
{
vue: {
preserveWhitespace: false
}
}
複製代碼
它的做用是阻止元素間生成空白內容,在 Vue 模板編譯後使用 _v(" ")
表示。若是項目中模板內容多的話,它們仍是會佔用一些文件體積的。例如 Element 配置該屬性後,未壓縮狀況下文件體積減小了近 30Kb。
transformToRequire
不再用把圖片寫成變量了之前在寫 Vue 的時候常常會寫到這樣的代碼:把圖片提早 require 傳給一個變量再傳給組件。
<template><div><avatar:default-src="DEFAULT_AVATAR"></avatar></div></template><script>exportdefault {
created () {
this.DEFAULT_AVATAR = require('./assets/default-avatar.png')
}
}
</script>
複製代碼
其實經過配置 transformToRequire
後,就能夠直接配置,這樣vue-loader會把對應的屬性自動 require 以後傳給組件
{
vue: {
transformToRequire: {
avatar: ['default-src']
}
}
}
複製代碼
因而咱們代碼就能夠簡化很多
<template><div><avatardefault-src="./assets/default-avatar.png"></avatar></div></template>
複製代碼
在 vue-cli 的 webpack 模板下,默認配置是:
transformToRequire: {
video: ['src', 'poster'],
source: 'src',
img: 'src',
image: 'xlink:href'
}
複製代碼
能夠觸類旁通進行一下相似的配置
vue-loader 還有不少實用的 API 例如最近加入的 自定義塊,感興趣的各位能夠去文檔裏找找看。
在某些場景下你可能須要 render 渲染函數帶來的徹底編程能力來解決不太容易解決的問題,特別是要動態選擇生成標籤和組件類型的場景。
好比根據props來生成標籤的場景
<template><div><divv-if="level === 0"><slot></slot></div><pv-else-if="level === 1"><slot></slot></p><h1v-else-if="level === 2"><slot></slot></h1><h2v-else-if="level === 3"><slot></slot></h2><strongv-else-if="level === 4"><slot></slot></stong><textareav-else-if="level === 5"><slot></slot></textarea></div></template>
複製代碼
其中level是data中的變量,能夠看到這裏有大量重複代碼,若是邏輯複雜點,加上一些綁定和判斷就更復雜了,這裏能夠利用 render 函數來對要生成的標籤加以判斷。
使用 render 方法根據參數來生成對應標籤能夠避免上面的狀況。
<template><div><child:level="level">Hello world!</child></div></template><scripttype='text/javascript'>import Vue from'vue'
Vue.component('child', {
render(h) {
const tag = ['div', 'p', 'strong', 'h1', 'h2', 'textarea'][this.level]
return h(tag, this.$slots.default)
},
props: {
level: { type: Number, required: true }
}
})
exportdefault {
name: 'hehe',
data() { return { level: 3 } }
}
</script>
複製代碼
示例能夠查看 CodePen
固然render函數還有不少用法,好比要使用動態組件,除了使用 :is
以外也可使用render函數
<template><div><button @click='level = 0'>嘻嘻</button><button @click='level = 1'>哈哈</button><hr><child:level="level"></child></div></template><scripttype='text/javascript'>import Vue from'vue'import Xixi from'./Xixi'import Haha from'./Haha'
Vue.component('child', {
render(h) {
const tag = ['xixi', 'haha'][this.level]
return h(tag, this.$slots.default)
},
props: { level: { type: Number, required: true } },
components: { Xixi, Haha }
})
exportdefault {
name: 'hehe',
data() { return { level: 0 } }
}
</script>
複製代碼
示例能夠查看 CodePen
網上的帖子大多深淺不一,甚至有些先後矛盾,在下的文章都是學習過程當中的總結,若是發現錯誤,歡迎留言指出~
參考: