在諸多 Vue.js 應用中, Lodash, Moment, Axios, Async等都是一些非常有用的 JavaScript 庫. 但隨著專案越來越複雜, 可能會採取元件化和模組化的方式來組織程式碼, 還可能要使應用支援不同環境下的服務端渲染. 除非你找到了一個簡單而又健壯的方式來引入這些庫供不同的元件和模組使用, 不然, 這些第三方庫的管理會給你帶來一些麻煩.

本文將介紹一些在 Vue.js 中使用第三方庫的方式.

全域性變數

在專案中新增第三方庫的最簡單方式是講其作為一個全域性變數, 掛載到 window 物件上:

entry.js

window._ = require( 'lodash');

MyComponent.vue

export default { created() { console.log(_.isEmpty() ? 'Lodash everywhere!' : 'Uh oh..'); } }

這種方式不適合於服務端渲染, 因為服務端沒有 window 物件, 是 undefined, 當試圖去訪問屬性時會報錯.

在每個檔案中引入

另一個簡單的方式是在每一個需要該庫的檔案中匯入:
MyComponent.vue

import _ from 'lodash'; export default { created() { console.log(_.isEmpty() ? 'Lodash is available here!' : 'Uh oh..'); } }

這種方式是允許的, 但是比較繁瑣, 並且帶來的問題是: 你必須記住在哪些檔案引用了該庫, 如果專案不再依賴這個庫時, 得去找到每一個引用該庫的檔案並刪除該庫的引用. 如果構建工具沒設定正確, 可能導致該庫的多份拷貝被引用.

優雅的方式

在 Vuejs 專案中使用 JavaScript 庫的一個優雅方式是講其代理到 Vue 的原型物件上去. 按照這種方式, 我們引入 Moment 庫:
entry.js

import moment from 'moment'; Object.defineProperty(Vue.prototype, '$moment', { value: moment });

由於所有的元件都會從 Vue 的原型物件上繼承它們的方法, 因此在所有元件/例項中都可以通過 this.$moment: 的方式訪問 Moment 而不需要定義全域性變數或者手動的引入.

MyNewComponent.vue

export default { created() { console.log('The time is ' . this.$moment().format("HH:mm")); } }

接下來就瞭解下這種方式的工作原理.

Object.defineProperty

一般而言, 可以按照下面的方式來給物件設定屬性:

Vue.prototype.$moment = moment;

可以這樣做, 但是 Object.defineProperty 允許我們通過一個 descriptor 來定義屬性. Descriptor 執行我們去設定物件屬性的一些底層(low-level)細節, 如是否允許屬性可寫? 是否允許屬性在 for 迴圈中被遍歷.

通常, 我們不會為此感到困擾, 因為大部分時候, 對於屬性賦值, 我們不需要考慮這樣的細節. 但這有一個明顯的優點: 通過 descriptor 建立的屬性預設是隻讀的.

這就意味著, 一些處於迷糊狀態的(coffee-deprived)開發者不能在元件內去做一些很愚蠢的事情, 就像這樣:

angular.js和vue.js中實現函數去抖（debounce） 搜索輸入框 sea class 方案 get clas 電路 dia ive 問題描述 搜索輸入框中，只當用戶停止輸入後，才進行後續的操作，比如發起Http請求等。 學過電子電路的同學應該知道按鍵防抖。原理是一樣的：就是說當調用動作n毫秒後，才會執行該動作，若在這n毫秒內又 說說 Vue.js 中的 v-cloak 指令 可以使用 v-cloak 指令設定樣式，這些樣式會在 Vue 例項編譯結束時，從繫結的 HTML 元素上被移除。 當網路較慢，網頁還在載入 Vue.js ，而導致 Vue 來不及渲染，這時頁面就會顯示出 Vue 原始碼。我們可以使用 v-cloak 指令來解決這一問題。 h 說說在 Vue.js 中如何繫結樣式（class 或 style） 在資料繫結中，最常見就是動態繫結元素的 class 或內聯樣式 style 咯，它們也是 HTML 的屬性，所以可以使用 v-bind 指令 。 1 繫結 class 1.1 物件語法 使用 v-bind:class 屬性，實現動態切換 class。 html： 說說 Vue.js 中的條件渲染指令 1 應用於單個元素 Vue.js 中的條件渲染指令可以根據表示式的值，來決定在 DOM 中是渲染還是銷燬元素或元件。 html： <div id="app"> <p v-if="type===1">拌麵</p> <