vue . js 前端開發(fā)常見問題集錦

就這樣了__ 2018-03-02

展開全文

作者：熊D01001
https://blog./JavaScript/VueJS-開發(fā)常見問題集錦/

由于公司的前端開始轉(zhuǎn)向 VueJS，最近開始使用這個框架進行開發(fā)，遇到一些問題記錄下來，以備后用。主要在一些 官方手冊 上沒有寫，但是實際開發(fā)中會遇到的問題，需要一定知識基礎。

涉及技術棧

CLI: Vue-CLI
UI: Element
HTML: Pug(Jade)
CSS: Less
JavaScript: ES6

1. polyfill 與 transform-runtime

首先， vue-cli 為我們自動添加了 babel-plugin-transform-runtime 這個插件，該插件多數(shù)情況下都運作正常，可以轉(zhuǎn)換大部分 ES6 語法。但是，存在如下兩個問題：

異步加載組件時，會產(chǎn)生 polyfill 代碼冗余
不支持對全局函數(shù)與實例方法的 polyfill

兩個問題的原因均歸因于 babel-plugin-transform-runtime 采用了沙箱機制來編譯我們的代碼（即：不修改宿主環(huán)境的內(nèi)置對象）。

由于異步組件最終會被編譯為一個單獨的文件，所以即使多個組件中使用了同一個新特性（例如： Object.keys()），那么在每個編譯后的文件中都會有一份該新特性的 polyfill 拷貝。如果項目較小可以考慮不使用異步加載，但是首屏的壓力會比較大。不支持全局函數(shù)（如： Promise、 Set、 Map）， Set 跟 Map 這兩種數(shù)據(jù)結構應該大家用的也不多，影響較小。但是 Promise 影響可能就比較大了。不支持實例方法（如： 'abc'.include('b')、 ['1','2','3'].find((n)=>n<2) 等等），這個限制幾乎廢掉了大部分字符串和一半左右數(shù)組的新特性。

一般情況下 babel-plugin-transform-runtime 能滿足大部分的需求，當不滿足需求時，推薦使用完整的 babel-polyfill。

替換 babel-polyfill

首先，從項目中移除 babel-plugin-transform-runtime卸載該依賴：

npm un babel-plugin-transform-runtime -D

修改 babel 配置文件

// .babelrc
{
//...
'plugins': [
// - 'transform-runtime'
]
//...
}

然后，安裝 babel-polyfill 依賴：

npm i babel-polyfill -D

最后，在入口文件中導入

// src/main.js
import 'babel-polyfill'

2. ES6 import 引用問題

在 ES6 中，模塊系統(tǒng)的導入與導出采用的是引用導出與導入（非簡單數(shù)據(jù)類型），也就是說，如果在一個模塊中定義了一個對象并導出，在其他模塊中導入使用時，導入的其實是一個變量引用（指針），如果修改了對象中的屬性，會影響到其他模塊的使用。通常情況下，系統(tǒng)體量不大時，我們可以使用 JSON.parse(JSON.stringify(str)) 簡單粗暴地來生成一個全新的深度拷貝的 數(shù)據(jù)對象。不過當組件較多、數(shù)據(jù)對象復用程度較高時，很明顯會產(chǎn)生性能問題，這時我們可以考慮使用 Immutable.js。

鑒于這個原因，進行復雜數(shù)據(jù)類型的導出時，需要注意多個組件導入同一個數(shù)據(jù)對象時修改數(shù)據(jù)后可能產(chǎn)生的問題。此外，模塊定義變量或函數(shù)時即便使用 let 而不是 const，在導入使用時都會變成只讀，不能重新賦值，效果等同于用 const 聲明。

3. 在 Vue 中使用 Pug 與 Less

安裝依賴

　 Vue 中使用 vue-loader 根據(jù) lang 屬性自動判斷所需要的 loader，所以不用額外配置 Loader，但是需要手動安裝相關依賴：

npm i pug -D
npm i less-loader -D

還是相當方便的，不用手動修改 webpack 的配置文件添加 loader 就可以使用了

使用 pug 還是 pug-loader？ sass 兩種語法的 loader 如何設置？ --- 請參考預處理器 · vue-loader

使用


<style lang='less'>
.action {
color: #ddd;
ul {
overflow: hidden;
li {
float: left;
}
}
}
</style>
<template lang='pug'>
.action(v-if='hasRight')
ul
li 編輯
li 刪除
</template>
<script>
export default {
data () {
return {
hasRight: true
}
}
}
</script>

4. 定義全局函數(shù)或變量

許多時候我們需要定義一些全局函數(shù)或變量，來處理一些頻繁的操作（這里拿 AJAX 的異常處理舉例說明）。但是在 Vue 中，每一個單文件組件都有一個獨立的上下文（ this）。通常在異常處理中，需要在視圖上有所體現(xiàn)，這個時候我們就需要訪問 this 對象，但是全局函數(shù)的上下文通常是 window，這時候就需要一些特殊處理了。

簡單粗暴型

最簡單的方法就是直接在 window 對象上定義一個全局方法，在組件內(nèi)使用的時候用 bind、 call 或 apply 來改變上下文。定義一個全局異常處理方法：

// errHandler.js
window.errHandler = function () { // 不能使用箭頭函數(shù)
if (err.code && err.code !== 200) {
this.$store.commit('err', true)
} else {
// ...
}
}

在入口文件中導入：

// src/main.js
import 'errHandler.js'

在組件中使用：

// xxx.vue
export default {
created () {
this.errHandler = window.errHandler.bind(this)
},
method: {
getXXX () {
this.$http.get('xxx/xx').then(({ body: result }) => {
if (result.code === 200) {
// ...
} else {
this.errHandler(result)
}
}).catch(this.errHandler)
}
}
}

優(yōu)雅安全型

在大型多人協(xié)作的項目中，污染 window 對象還是不太妥當?shù)?。特別是一些比較有個人特色的全局方法（可能在你寫的組件中幾乎處處用到，但是對于其他人來說可能并不需要）。這時候推薦寫一個模塊，更優(yōu)雅安全，也比較自然，唯一不足之處就是每個需要使用該函數(shù)或方法的組件都需要進行導入。使用方法與前一種大同小異，就不多作介紹了。￣ω￣=

5. Moment.JS 與 Webpack

在使用 Moment.js 遇到一些問題，發(fā)現(xiàn)最終打包的文件中將 Moment.js 的全部語言包都打包了，導致最終文件徒然增加 100 kB。查了一下，發(fā)現(xiàn)可能是 webpack 打包或是 Moment.js 資源引用問題（?），目前該問題還未被妥善處理，需要通過一些 trick 來解決這個問題。在 webpack 的生產(chǎn)配置文件中的 plugins 字段中添加一個插件，使用內(nèi)置的方法類 ContextReplacementPlugin 過濾掉 Moment.js 中那些用不到的語言包：

// build/webpack.prod.conf.js
new webpack.ContextReplacementPlugin(/moment[\\/]locale$/, /^\.\/(zh-cn)$/)

解決方案采自 oleg-nogin@webpack/webpack#3128。問題討論詳見 GitHub Issue: moment/moment#2373、webpack/webpack#3128。

6. 自定義路徑別名

可能有些人注意到了，在 vue-cli 生成的模板中在導入組件時使用了這樣的語法：

import Index from '@/components/Index'

這個 @ 是什么東西？后來改配置文件的時候發(fā)現(xiàn)這個是 webpack 的配置選項之一：路徑別名。我們也可以在基礎配置文件中添加自己的路徑別名，比如下面這個就把 ~ 設置為路徑 src/components 的別名：

// build/webpack.base.js
{
resolve: {
extensions: ['.js', '.vue', '.json'],
alias: {
'vue$': 'vue/dist/vue.esm.js',
'@': resolve('src'),
'~': resolve('src/components')
}
}
}

然后我們導入組件的時候就可以這樣寫：

// import YourComponent from 'YourComponent'
// import YourComponent from './YourComponent'
// import YourComponent from '../YourComponent'
// import YourComponent from '/src/components/YourComponent'
import YourComponent from '~/YourComponent'

既解決了路徑過長的麻煩，又解決了相對路徑的煩惱，方便很多吧！ヾ(???ゞ)

7. CSS 作用域與模塊

組件內(nèi)樣式

通常，組件中 <style></style> 標簽里的樣式是全局的，在使用第三方 UI 庫（如： Element）時，全局樣式很可能影響 UI 庫的樣式。我們可以通過添加 scoped 屬性來使 style 中的樣式只作用于當前組件：

<style lang='less' scoped>
@import 'other.less';
.title {
font-size: 1.2rem;
}
</style>

在有 scoped 屬性的 style 標簽內(nèi)導入其他樣式，同樣會受限于作用域，變?yōu)榻M件內(nèi)樣式。復用程度較高的樣式不建議這樣使用。另，在組件內(nèi)樣式中應避免使用元素選擇器，原因在于元素選擇器與屬性選擇器組合時，性能會大大降低。 --- 兩種組合選擇器的測試：classes selector，elements selector