vue-cli 3.0新特性解讀

概述

在9 月 30 日的Vue.js 倫敦大會上， 做者尤雨溪介紹了 Vue 下一個版本將要發佈的內容，以及 Vue 3.0 的開發路線，和後面版本的發展狀況。雖然，Vue 3.0版本的正式版尚未發佈，不過做爲vue 項目快速構建工具的vue-cli 早已發佈，咱們能夠經過vue-cli來了解vue 3.0的一些狀況。

做爲Vue的主要版本，Vue 3.0帶來了諸多的重大變動，不過，開發組也很是重視兼容性問題：除了渲染函數 API 和做用域插槽語法以外的全部內容都將保持不變，或者經過兼容性構建讓其與 2.x 保持兼容。總的來講，Vue 3.0 雖然會對頂級 API 進行重大的修整，但依然會保持與 2.x 的兼容。此外，2.x 的最後一個次要版本將成爲 LTS，並在 3.0 發佈後繼續享受 18 個月的 bug 和安全修復更新。

欲瞭解更多的詳情，能夠參考下面的連接：Vue 3.0版本發佈計劃

重構

代碼結構

爲了實現更清晰、更易維護的源代碼架構，尤雨溪表示將從頭開始重寫 3.0，並將一些內部功能分解爲單獨的包，以便隔離複雜性。以下圖是vue 3.0的源碼目錄結構圖。

前文說過，Vue團隊打算在從零開始編寫 3.0 版本，爲的是「達到更加清晰和更易維護的架構，特別是爲了讓代碼的貢獻變得容易」。爲了下降複雜性，對複雜性進行隔離，開發團隊將一些內部功能拆分爲了多個單獨的包。例如，observer 模塊將成爲一個單獨的包，擁有本身對外的 API 和本身的測試用例。

另外，代碼庫如今改成用 TypeScript 編寫，雖然這會使得「熟練TypeScript」成爲對新代碼庫進行貢獻的一個前置要求，不過咱們相信有類型信息配合 IDE 的支持，對於一個新的貢獻者來講，要作出有意義的貢獻，實際上反而會更加容易。

除此以外，Vue還對改進編譯器、支持 IE 十一、其餘運行時改進和改進觀察機制等方面內容。

監測機制

3.0 將帶來一個基於 Proxy 的 observer 實現，它能夠提供覆蓋語言 (JavaScript——譯註) 全範圍的響應式能力，消除了當前 Vue 2 系列中基於 Object.defineProperty 所存在的一些侷限，這些侷限包括：

• 對屬性的添加、刪除動做的監測；
• 對數組基於下標的修改、對於 .length 修改的監測；
• 對 Map、Set、WeakMap 和 WeakSet 的支持；

另外，新的 observer還提供了以下的一些特性：

• 公開的用於建立 observable 的 API：這爲小型到中型的應用提供了一種輕量級的、極其簡單的跨組件狀態管理解決方案。
• 默認爲惰性監測（Lazy Observation）。在 2.x版本中，任何響應式數據，無論它的大小如何都會在啓動的時候監測功能。若是數據量很大的話，在應用啓動的時候就可能形成嚴重的性能消耗。而在3.x 版本中，只有應用的初始可見部分所用到的數據會被監測，更不用說這種監測方案自己其實也是更加快的。

更精準的變更通知：舉個例子：在 2.x 系列中，經過 Vue.set 強制添加一個新的屬性，將致使全部依賴於這個對象的 watch 函數都會被執行一次；而在 3.x 中，只有依賴於這個具體屬性的 watch 函數會被通知到。

不可變監測對象：咱們能夠建立一個對象的「不可變」版本，以此來阻止對他的修改——包括他的嵌套屬性，除非系統內部臨時解除了這個限制。這種機制能夠用來凍結傳遞到組件屬性上的對象和處在 mutation 範圍外的 Vuex 狀態樹。

• 更好的調試能力：經過使用新增的 renderTracked 和 renderTriggered鉤子，咱們能夠精確地追蹤到一個組件發生重渲染的觸發時機和完成時機及其緣由。

  

編譯器

Vue 3.0與編譯器相關的代碼編譯將會有一個大的提高，用一句話歸納爲：「搖樹友好」的輸出；更多的 AOT 優化；更良好的解析錯誤；支持 source map。

• 若是採用的是支持「搖樹優化」的打包器，模板中使用到的那些可選特性，在生成的代碼中將經過 ES的模塊語法導入；而在打包後的文件中，那些沒用到的可選特性就會被「搖掉」。
• 因爲新的虛擬 DOM 實現所帶來的提高，咱們能夠執行一些更加高效的編譯耗時優化，如靜態樹提高(static tree hoisting)、靜態屬性提高(static props hoisting)；以及爲運行時提供一些來自編譯器的提示，以此避開子組件的規範過程 (children normalization)；提供VNode 快速建立路徑等等。
• 解析器重寫，以便在對模板進行編譯發生錯誤時，能夠提供錯誤發生的位置信息；除此以外還能夠帶來對模板的 source map支持；還能夠支持第三方工具如 eslint-plugin-vue 和 IDE 的語言服務 (language services) 特性。

IE 11兼容

新的代碼庫目前只針對主流瀏覽器，並且咱們假定他們都支持 ES2015。可是，哎，咱們也知道在可預見的將來還有不少用戶仍然須要支持 IE11。除了 Proxy 外，大多數 ES2015 的特性均可以用轉譯或者墊片的方式在 IE11 中使用。咱們的計劃是另外單獨實現一個具備一樣 API 的替代性 observer，不過是基於老式的 Object.defineProperty API；而後再經過單獨構建一個使用這個實現的 Vue 3.x 版本 (build) 進行發佈，不過這個單獨的版本仍是會有 Vue 2.x 在變更探測方面所存在的問題，因此它其實並非一個徹底兼容 3.x 的一個版本。咱們也意識到這會給第三方庫的做者們帶來某些不便，由於他們須要考慮兩個不一樣版本之間的兼容性問題，不過當咱們真的推動到那個階段時，那時咱們確定會確保提供一份清晰的指導。

固然，Vue 3.0還處於開發階段，最先發布也會等到2019年了，讓咱們拭目以待吧。

vue-cli 3.0

vue-cli 是 vue 官方團隊推出的一款快速開發 vue 項目的構建工具，具備開箱即用而且提供簡潔的自定義配置等功能。 vue-cli 從 2.0 到 3.0 修改了衆多的東西，下面就讓咱們來了解下。

建立項目

從vue-cli 3.0開始，vue的安裝命令從vue-cli 改爲了 @vue/cli。例如：

npm install -g @vue/cli
複製代碼

使用vue-cli 3.0建立項目的命令以下：

vue create my-project
複製代碼

除了命令建立外，3.0還增長了圖形化界面建立以及管理vue項目的功能， 在建立新項目時還能夠混合選用多種集成。當咱們使用vue ui命令後便可使用圖形化的方式來操做vue項目的源碼。

須要說明的是，在初始化項目時系統會默認生成package.json和package-lock.json兩個配置文件，它們的區別在於package.json只能鎖定大版本號，而package-lock.json則能鎖定安裝時包的版本號，以保證多人開發時項目版本號的一致。同時，Vue在3.0版本刪除了static目錄，並新增了public目錄，該目錄主要用於存放不被webpack處理的文件和資源。

當咱們使用create命令建立項目時，系統會要求咱們選擇一些東西。例如：

Vue CLI v3.0.3
? Please pick a preset:
  default (babel, eslint)
> Manually select features
複製代碼

Vue 3.0 版本支持預設配置 和 用戶自定義配置，其中自定義功能配置包括如下功能：

• TypeScript
• Progressive Web App (PWA) Support
• Router
• Vuex
• CSS Pre-processors
• Linter / Formatter
• Unit Testing
• E2E Testing

能夠發現，3.0 版本新加入了 TypeScript 以及 PWA 的支持。

1，在選擇 CSS 預處理器後會提示選擇哪種預處理器？

• Scss/Sass
• Less
• Stylus

2，eslint 規範的選擇

• ESLint with error prevention only
• ESLint + Airbnb config
• ESLint + Standard config
• ESLint + Prettier

3，選擇 Babel，PostCSS，ESLint 等自定義配置的存放位置

• In dedicated config files
• In package.json

目錄結構

相比於Vue 2.0版原本說，Vue 3.0的目錄結構則簡潔不少，下面是Vue項目文件的具體含義及其做用說明。

• node_modules：項目依賴的第三方模塊；
• public：移除static目錄，新增public目錄，而且 index.html 移動到 public 中，該目錄主要用於存放如圖片、字體等靜態資源和打包後的文件；
• src：源碼存放目錄，主要能夠存放的有assets資源文件和源代碼；
• babelrc：將es6代碼轉換成瀏覽器可以識別的代碼；
• editorconfig：定義項目編碼規範，優先級高於編譯器設置的優先級；
• index.html：項目入口文件，能夠配置meta 信息或統計代碼等；
• package.json：項目配置文件，該文件主要定義了項目所須要的各類依賴模塊和項目的一些配置信息；
• package-lock.json：鎖定安裝時包的版本號，多人協做開發會用到；
• webpack.config.js：webpack模塊化打包的一些配置；

自定義配置

從 3.0 版本開始，系統會在項目的根目錄生成一個 vue.config.js 文件，能夠在此文件中添加自定義的一些配置。下面是一些經常使用的自定義配置：

module.exports = {
  baseUrl: '/',
  outputDir: 'dist',
  lintOnSave: true,
  compiler: false,
  // 調整內部的 webpack 配置。
  // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/webpack.md
  chainWebpack: () => {},
  configureWebpack: () => {},
  // 配置 webpack-dev-server 行爲。
  devServer: {
    open: process.platform === 'darwin',
    host: '0.0.0.0',
    port: 8080,
    https: false,
    hotOnly: false,
    // 查閱 https://github.com/vuejs/vue-doc-zh-cn/vue-cli/cli-service.md#配置代理
    proxy: null, // string | Object
    before: app => {}
  }
  ....
}
複製代碼

調整 webpack 配置最簡單的方式就是在vue.config.js中的configureWebpack選項提供一個對象，該對象將會被webpack-merge合併入最終的 webpack 配置。例如：

module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}
複製代碼

若是想要修改插件選項的參數，讀者能夠閱讀webpack-chain 的 API 獲取更多相關的一些源碼。例如：

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config
      .plugin('html')
      .tap(args => {
        return [/* new args to pass to html-webpack-plugin's constructor */] }) } } 複製代碼

須要說明的是，當咱們更改一個 webpack 配置的時候，能夠經過vue inspect > output.js輸出完整的配置清單，注意它輸出的並非一個有效的 webpack 配置文件，而是一個用於審查的被序列化的格式。

ESLint、Babel、browserslist

• Babel 能夠經過.babelrc 或 package.json 中的 babel 字段進行配置。
• ESLint 能夠經過.eslintrc 或 package.json 中的 eslintConfig 字段進行配置。
• package.json 中的 browserslist 字段指定了該項目的目標瀏覽器支持範圍。

browserslist

咱們能夠在package.json配置文件中看到browserslist字段。例如：

> 1%
last 2 versions
not ie <= 8
複製代碼

使用 npx browserslist 能夠查看項目的瀏覽器兼容狀況，vue的支持狀況以下表：

public目錄

vue 約定public/index.html做爲入口模板會經過html-webpack-plugin插件處理。在構建過程當中，資源連接將會自動注入其中。除此以外，vue-cli 也自動注入資源提示（preload/prefetch），在啓用 PWA 插件時注入manifest/icon/連接，並引入(inlines) webpack runtime / chunk manifest清單已得到最佳性能。

在 JavaScript 或者 SCSS 中經過 相對路徑 引用的資源會通過 webpack 處理，放置在 public 文件夾的資源能夠經過絕對路徑引用，這些資源將會被複制，而不通過 webpack 處理。

而且，圖片最好使用相對路徑通過 webpack 處理，這樣能夠避免不少由於修改網站根目錄致使的圖片404問題。

新增功能

除此以外，Vue-cli還帶來了兩個比較有誘惑力的功能：對TypeScript和PWA的支持；

TypeScript 支持

從 3.0 版本開始中，系統選擇啓用 TypeScript 語法，從而大大的簡化了代碼，不過也帶來了一些書寫上的約束。例如：

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
const s = Symbol('baz')
@Component
export class MyComponent extends Vue {
 @Emit()
 addToCount(n: number){ this.count += n }
 @Emit('reset')
 resetCount(){ this.count = 0 }
 @Inject() foo: string
 @Inject('bar') bar: string
 @Inject(s) baz: string
 @Model('change') checked: boolean
 @Prop()
 propA: number
 @Prop({ default: 'default value' })
 propB: string
 @Prop([String, Boolean])
 propC: string | boolean
 @Provide() foo = 'foo'
 @Provide('bar') baz = 'bar'
 @Watch('child')
 onChildChanged(val: string, oldVal: string) { }
 @Watch('person', { immediate: true, deep: true })
 onPersonChanged(val: Person, oldVal: Person) { }
}

複製代碼

上面的代碼等價於下面的代碼：

const s = Symbol('baz')

export const MyComponent = Vue.extend({
  name: 'MyComponent',
  inject: {
    foo: 'foo',
    bar: 'bar',
    [s]: s
  },
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    propA: Number,
    propB: {
      type: String,
      default: 'default value'
    },
    propC: [String, Boolean],
  },
  data () {
    return {
      foo: 'foo',
      baz: 'bar'
    }
  },
  provide () {
    return {
      foo: this.foo,
      bar: this.baz
    }
  },
  methods: {
    addToCount(n){
      this.count += n
      this.$emit("add-to-count", n)
    },
    resetCount(){
      this.count = 0
      this.$emit("reset")
    },
    onChildChanged(val, oldVal) { },
    onPersonChanged(val, oldVal) { }
  },
  watch: {
    'child': {
      handler: 'onChildChanged',
      immediate: false,
      deep: false
    },
    'person': {
      handler: 'onPersonChanged',
      immediate: true,
      deep: true
    }
  }
})
複製代碼

能夠發現，使用TypeScript語法後，代碼大爲精簡。

PWA 支持

當咱們選擇啓用 PWA 功能時，在打包生成的代碼時會默認生成 service-worker.js 和 manifest.json 相關文件。熟悉PWA的同窗都知道service-worker.js 和 manifest.json 是PWA的重要配置文件。若是讀者還不瞭解 PWA，點擊 PWA官方文檔 查看。

默認狀況 service-worker 採用的是 precache，能夠經過配置 pwa.workboxPluginMode 自定義緩存策略。例如：

module.exports = {
  // ...其它 vue-cli 插件選項...
  pwa: {
    workboxPluginMode: 'InjectManifest',
    workboxOptions: {
      // swSrc 中 InjectManifest 模式下是必填的。
      swSrc: 'dev/sw.js',
      // ...其它 Workbox 選項...
    },
  },
};
複製代碼

vue-cli 致力於將 Vue 生態中的工具基礎標準化，並確保各類構建工具可以基於智能的默認配置便可平衡銜接，提升開發效率。雖然，vue 3.0還處於開發階段，不過相信在不久的未來必定會給開發者帶來驚喜，讓咱們拭目以待吧。

參考： www.php.cn/js-tutorial… github.com/vuejs/vue-c… github.com/vuejs/vue-c…