Vue筆記五：Vue選型和Webpack入門(mén)

Vue的選型

Vue全家桶

現(xiàn)在面試前端者都會(huì)在自己簡(jiǎn)歷上寫(xiě)上精通這三個(gè)框架，但是仔細(xì)一問(wèn)就三不知。在縱觀幾個(gè)大型前端框架后，我想得出一結(jié)論，問(wèn)什么選擇Vue框架呢？

下面我們對(duì)這三個(gè)框架進(jìn)行對(duì)比。

Vue與Angular

一切要從Vue1.0講起，回顧一下歷史。Vue在項(xiàng)目初期命名為Angular Lite，說(shuō)明了我們Vue1.0和Angular之間的關(guān)系，它的初始目標(biāo)是一個(gè)精簡(jiǎn)版的Angular。它們的共同點(diǎn)在于它們都擁有雙向綁定機(jī)制和指令。Angular（后面簡(jiǎn)稱(chēng)為ng）和Vue的異同點(diǎn)如下：

ng是一個(gè)完整的mvvm框架，vue主要是view層展示
ng雙向綁定基于模版編譯規(guī)則（“臟”檢查), vue是采用es5的get和set機(jī)制
vue可以el對(duì)象進(jìn)行實(shí)例化，組件化
ng框架重，整個(gè)設(shè)計(jì)模式具有依賴(lài)注入的思想，學(xué)習(xí)曲線(xiàn)比較陡峭
ng2斷層式升級(jí)，但是ng2更吸引人

總而言之，Angular的“大而整”的結(jié)構(gòu)讓它在構(gòu)建項(xiàng)目的過(guò)程當(dāng)中得心應(yīng)手，但是Vue的“小而美”組件化結(jié)構(gòu)卻是符合我輕量級(jí)應(yīng)用項(xiàng)目的需求。因?yàn)楝F(xiàn)在很多的頁(yè)面內(nèi)容都集中在移動(dòng)端。說(shuō)到小而美的“組件化思想”，我們會(huì)提到Vue和React。

Vue與React

React VS Vue

在聽(tīng)了尤雨溪的知乎live后，我更加明白vue2大量地借鑒了很多React的特性。React也算是“js大一統(tǒng)”思想的鼻祖，運(yùn)用了css in html(jsx)和css in js的特點(diǎn)，實(shí)現(xiàn)組件化的高度復(fù)用。而尤大大則是另辟蹊徑制作了vue-loader和vueify,通過(guò)webpack和browserify打包項(xiàng)目工程內(nèi)容。運(yùn)用<template>和<style>去包裝html（或者模版語(yǔ)言）和css（或者各種預(yù)編譯器）。我個(gè)人認(rèn)為vue的這種寫(xiě)法更加聰明和輕量化。

它們兩之間的區(qū)別：

React的es5與es6寫(xiě)法
React的JSX和CSS IN JS的寫(xiě)法
this相關(guān)的行為
React的生態(tài)鏈，學(xué)習(xí)成本
Vue的雙向綁定和React的單向數(shù)據(jù)流

綜上所述，Vue2.0也引入了單項(xiàng)數(shù)據(jù)流的思想，主要是用在Vuex和props的方面。雙向綁定使用在表現(xiàn)層，方便開(kāi)發(fā)者使用，相對(duì)來(lái)說(shuō)性能開(kāi)銷(xiāo)會(huì)比較大。單向數(shù)據(jù)流的優(yōu)勢(shì)在于效率，雙向綁定的優(yōu)勢(shì)在于開(kāi)發(fā)便利性，混合式的推拉數(shù)據(jù)都是為了實(shí)現(xiàn)更好的開(kāi)發(fā)體驗(yàn)。相對(duì)來(lái)說(shuō)，React則是完整而龐大，就如flux思想的數(shù)據(jù)流，就有Redux和Mobx，生態(tài)化的組件庫(kù)就更多了，一定程度上提高了學(xué)習(xí)成本。

之所以選擇Vue，還是考慮兩點(diǎn)，第一，移動(dòng)端Vue的包相對(duì)小，加載效率高。第二，外包員工多，較低的學(xué)習(xí)成本比較適合。

Vue1.0與2.0的區(qū)別

一年前，我翻譯了一篇Vue1.0的教程Vue筆記二：進(jìn)階[譯]用Webpack構(gòu)建Vue，現(xiàn)在已經(jīng)有點(diǎn)不適用了。

Vue2.0的升級(jí)可以說(shuō)是革命性的，如果很多人把Vue1.0當(dāng)作“玩具”，那么Vue2.0可以說(shuō)是“工具”，可以很好地使用于生產(chǎn)環(huán)境。得益于以下的特性：

virtual dom
強(qiáng)調(diào)單向數(shù)據(jù)流，推薦vuex
api區(qū)別，生命周期調(diào)整

如果說(shuō)Vue1.0師從Angular，而Vue2.0師從React。Vue2.0把組件化的實(shí)現(xiàn)展現(xiàn)得淋漓盡致，主要表現(xiàn)在組件的高度復(fù)用和可維護(hù)性，得益于較低的學(xué)習(xí)成本。2.0的兩個(gè)升級(jí)特點(diǎn)應(yīng)該放在單向數(shù)據(jù)流和Virtual-dom上。

Vuex單向數(shù)據(jù)流

單向數(shù)據(jù)流正如我上述描述的，是出于效率的“推”的“數(shù)據(jù)流”設(shè)計(jì)。Mutations是針對(duì)state的數(shù)據(jù)進(jìn)行修改，state會(huì)通過(guò)mapGetters和mapStates影響者Vue組件。在組件內(nèi)可以通過(guò)mapActions（或者mapMutations）。Actions更多是異步請(qǐng)求操作。所以，整個(gè)數(shù)據(jù)流是一個(gè)閉環(huán)，相互影響，相互傳遞。

Virtual-dom

虛擬dom是最近挺火的一個(gè)概念，但是不見(jiàn)得一定需要它。Virtual-dom涉及到一個(gè)概念，那就是重繪重排。在大量的dom操作的情況下，Virtual-dom才會(huì)起到它的價(jià)值。它的實(shí)現(xiàn)原理便是在dom之間做了一個(gè)虛擬層，在狀態(tài)改變了后，做一次diff，把變化的dom一次性以補(bǔ)丁的方式給dom進(jìn)行修改，減少了dom的變化。

webpack的入門(mén)

橫向?qū)Ρ?/h4>
作為Vue的好“基友”，webpack應(yīng)該是這幾年的最重要的打包工具。有別于gulp和grunt這種自動(dòng)化工具，它更關(guān)注于模塊化的思想，讓js的開(kāi)發(fā)變得更加方便。相較于browserify，webpack的自由度會(huì)更好。相比于rollup，webapck更適合使用于項(xiàng)目當(dāng)中。

gulp

browserify

rollup

基本概念

要掌握好webpack，需要了解好四個(gè)以下概念：

entry
output
loader
plugin

入口是打包的起始位置，分為js和html入口。出口是輸出文件內(nèi)容，可以使用hash命名進(jìn)行緩存。loader則是抽離各種其他的文件，例如css，圖片等等。plugins是更多的批量化操作。

loader

各式各樣的loader非常多，這里不一一舉例。

less-loader
sass-loader
url-loader, file-loader
babel-loader
vue-loader, vux-loader

plugin

通過(guò)plugins對(duì)你打包項(xiàng)目?jī)?nèi)部的文件進(jìn)行整理。例如js壓縮，html壓縮，公共包的提取等。

UglifyJsPlugin
CommonsChunkPlugin
HtmlWebpackPlugin
OccurrenceOrderPlugin

...

多頁(yè)面打包

官方給出的Vue項(xiàng)目構(gòu)建模版是單頁(yè)面項(xiàng)目。但是在國(guó)內(nèi)可能不是所有項(xiàng)目都那么完整的出來(lái)所有的需求。這時(shí)，我們需要的是多頁(yè)面的打包情況。我們會(huì)考慮在utils里面加一個(gè)getEntries的函數(shù)，這個(gè)函數(shù)會(huì)返回一個(gè)對(duì)應(yīng)路徑的數(shù)組，里面包括所有對(duì)應(yīng)的js文件。

exports.getEntries = function (globPath) {
  let entries = {},
    basename,
    tmp,
    pathname;
  glob.sync(globPath).forEach((entry) => {
    basename = path.basename(entry, path.extname(entry));
    tmp = entry.split('/').splice(-3);
    pathname = tmp.slice(0, 2).join('/'); // 正確輸出js路徑
    entries[pathname] = entry;
  });

  return entries;
};

utils.getEntries('./src/module/**/*.js')

概括一下，就是調(diào)整一下，整個(gè)打包的項(xiàng)目，改為以下幾點(diǎn)，詳情可以參考PaicFE/keynote。

多個(gè)js入口（將entries改為數(shù)組）
多個(gè)html入口（基于HtmlWebpackPlugin）
單元測(cè)試調(diào)整

未來(lái)方向

未來(lái)的方向主要專(zhuān)注于性能優(yōu)化上，主要是對(duì)h5頁(yè)面在移動(dòng)端的細(xì)小性能優(yōu)化。

SSR（server side rendering）
Nuxt.js
異步請(qǐng)求（promise，async/await）
動(dòng)態(tài)路由 (vue-router)

微信公眾號(hào)

轉(zhuǎn)載，請(qǐng)表明出處。總目錄前段收集器

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

Vue筆記五：Vue選型和Webpack入門(mén)