Vue.js專家解釋瞭如何在使用Vue框架進行編碼時使用JavaScript的最新功能。請繼續閱讀！
ES2015（又名ES6）是JavaScript語言的當前規範。如果您是JavaScript新手或最近沒有更新JavaScript知識，ES2015中有許多新功能可使開發更好，更令人愉快。
如果您是Vue開發人員，您將從學習所有這些新功能中受益。但作為一種分類手段，您可以從適用於Vue的那些功能開始。
在本文中，我將向您展示您將每天與Vue一起使用的四個ES2015功能。我將提供每個解釋和簡要示例。
箭頭功能
模板文字
模塊
解構和擴展語法
1.箭頭功能
// Regular JavaScript function
function(parameters) {
statements
}
// Arrow function
(parameters) => {
statements
}
沒有界限 this
箭頭函數的一個重要特性是它們不綁定值this。相反，他們使用this封閉的上下文。
考慮需要回調函數的JavaScript數組方法。Array.filter例如，允許您返回一個新的數組，只包含那些與回調函數定義的過濾器相匹配的項目。
Vue.js的一個重要功能是，您可以輕鬆訪問this.vuePropertyVue配置對象上下文中的數據屬性，計算屬性和方法。
但是，如果您使用常規函數進行回調，它將為其自己的值綁定this。您不能this.vueProperty從回調中引用Vue對象的屬性，您必須在回調的範圍內手動創建它們。
new Vue({
data: {
size: 'large',
items: [ { size: 'small' }, { size: 'large' } ]
},
computed: {
filterBySize() {
let size = this.size;
return this.items.filter(function(item) {
return item.size === size;
// Note: this.size is undefined
});
}
}
});
箭頭函數使用this封閉上下文中的對象。在這種情況下，它來自filterBySizeVue對象綁定到的計算屬性，該屬性this簡化了filter回調：
filterBySize() {
return this.items.filter((item) => {
return item.size === this.size;
});
}
疑難雜症
雖然箭頭函數可以在很多情況下有效地使用，但這並不意味著我們應該在開發Vue時始終使用它們。事實上，你不應該在Vue配置對象上使用箭頭函數作為函數屬性，因為它們需要this從Vue構造函數訪問上下文。
// Regular function
var regular = new Vue({
data: {
val: 'Hello world'
},
computed: {
upperCase() {
return this.val.toUpperCase();
}
}
});
console.log(regular.upperCase); // HELLO WORLD
// Arrow function
var arrow = new Vue({
data: {
val: 'Hello world'
},
computed: {
upperCase: () => {
return this.val.toUpperCase();
}
}
});
console.log(arrow.upperCase);
// Uncaught TypeError: Cannot read property 'toUpperCase' of undefined
單參數和隱式返回
在某些情況下，您可以使箭頭函數的語法更加簡潔。如果您的功能只有一個參數，則可以刪除括號()。如果你的函數只有一個表達式，你甚至可以放下大括號{}！
下面是從上面實現的那些shorthands的數組過濾器回調：
filterBySize() {
return this.items.filter(item => item.size === this.size);
}
2.模板文字
模板文字使用反引號（``）而不是雙引號或單引號來定義字符串。
模板文字允許我們在Vue.js中做兩件超級有用的事情：
多行字符串（非常適合組件模板）。
嵌入表達式（很適合計算屬性）。
多行字符串
用JavaScript代碼編寫模板並不理想，但有時我們需要/需要。但是如果模板有很多內容呢？在ES2015之前，我們有兩個選擇：
首先，把它放在一條線上：
Vue.component({
template: '
{{ title }}
{{ message }}
'
});
線路變長時，這真的很難讀懂。
Vue.component({
template: '
' +
'
{{ title }}
' +
'
{{ message }}
' +
''
});
模板文字解決了這個問題，因為它們允許多行字符串而不需要分割字符串：
Vue.component({
template: `
{{ title }}
{{ message }}
`
});
嵌入式表達式
有時我們想要一個字符串是動態的，即包含一個變量。這在計算屬性中非常常見，您可能希望在從反應的Vue.js數據屬性派生的模板中插入一個字符串。
new Vue({
data: {
name: 'George'
},
computed: {
greeting() {
return 'Hello, ' + this.name + ', how are you?'
}
}
});
通過${}在模板文字中使用佔位符，我們可以在不破壞字符串的情況下插入變量和其他表達式：
new Vue({
data: {
name: 'George'
},
computed: {
greeting() {
return `Hello, ${this.name}, how are you?`
}
}
});
3.模塊
如何將JavaScript對象從一個文件加載到另一個文件中？在ES2015之前沒有原生的方式。使用JavaScript 模塊，我們可以使用導出和導入語法來完成它：
file1.js
export default {
myVal: 'Hello'
}
file2.js
import obj from './file1.js';
console.log(obj.myVal); // Hello
模塊提供了兩個關鍵好處：
-
我們可以將我們的JavaScript應用分成多個文件。
我們可以讓某些代碼在各個項目中可重用。
組件模塊
模塊文件的一個很好的用例是組件。在ES2015之前，我們需要將所有組件定義放在主文件中，包括我們的Vue實例，例如
app.js
Vue.component('component1', { ... });
Vue.component('component2', { ... });
Vue.component('component3', { ... });
new Vue({ ... });
如果我們繼續這樣做，我們的app.js文件將變得非常龐大和複雜。使用模塊，我們可以將組件定義放在單獨的文件中並實現更好的組織，例如：
component1.js
export default {
// component definition
};
我們現在可以在我們的主文件中導入組件定義對象：
app.js
import component1 from './component1.js';
Vue.component('component1', component1);
...
模塊化組件的更好選擇是使用單個文件組件。這些使用JavaScript模塊，但也需要像Webpack這樣的構建工具。有關更多信息，請參閱此文章。
要閱讀關於JavaScript模塊的更多信息，請從這裡開始導入功能。
4.解構和擴展語法
對象是Vue.js開發的重要組成部分。通過一些新的語法功能，ES2015可以更輕鬆地處理對象屬性。
解構賦值
解構允許我們解開對象屬性並將它們分配給不同的變量。採取以下的對象 myObj。為了將它的屬性分配給新變量，我們使用.符號：
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
const prop1 = myObj.prop1;
const prop2 = myObj.prop2;
使用解構賦值，我們可以更簡潔地做到這一點：
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
const { prop1, prop2 } = myObj;
console.log(prop1);
// Output: Hello
解構在Vuex操作中很有用。操作接收context包含state對象和commitAPI方法屬性的對象：
actions: {
increment (context) {
// context.state
// context.commit(...)
}
}
不過，通常情況下，您不需要操作中的state屬性，只需要使用該commitAPI。通過在函數配置文件中使用解構賦值，可以創建一個commit用於正文的參數，從而減少此函數的詳細程度：
actions: {
increment ({ commit }) {
commit(...);
}
}
不過，通常情況下，您不需要操作中的state屬性，只需要使用該commitAPI。通過在函數配置文件中使用解構賦值，可以創建一個commit用於正文的參數，從而減少此函數的詳細程度：
actions: {
increment ({ commit }) {
commit(...);
}
}
擴展語法
在傳播語法允許我們展開的對象為在多個鍵/值對預期的地方。要將信息從一個對象複製到另一個對象之前，我們必須這樣做：
let myObj = {
prop1: 'Hello',
prop2: 'World'
};
let newObj = {
name: 'George',
prop1: myObj.prop1,
prop2: myObj.prop2
};
console.log(newObj.prop1); // Hello
使用擴展運算符...，我們可以更簡潔地做到這一點：
let newObj = {
name: 'George',
...myObj
};
console.log(newObj.prop1); // Hello
再次以Vuex為例，我們經常希望將我們的Vuex狀態屬性用作計算屬性。在ES2015之前，我們必須手動複製每一個。例如：
store.js
new Vuex.Store({
state: {
prop1: ...,
prop2: ...,
prop3: ...
}
});
app.js
new Vue({
computed: {
prop1() {
return store.state.prop1;
},
prop2() {
return store.state.prop2;
}
...
}
});
Vuex提供了一個mapState函數，該函數返回一個對象，其中包含通過提供其鍵來指定的所有Vuex狀態屬性：
import { mapState } from 'vuex';
var state = mapState(['prop1', 'prop2', 'prop3']);
console.log(state.prop1) // { ... }
使用mapState與傳播結合運營商，我們可以與那些在一個非常簡潔的方式從Vuex結合本地計算性能：
app.js
import { mapState } from 'vuex';
new Vue({
computed: {
someLocalComputedProp() { ... },
...mapState(['prop1', 'prop2', 'prop3'])
}
});
這很酷！還有什麼？
以上是您將立即在Vue項目中使用的ES2015功能。當然，還有很多其他的ES2015功能在Vue.js編程中很有用。如果你想繼續從這裡學習，我會建議這兩個作為你的下一個主題：
承諾。這些有助於異步編程，可以與Async Components以及Vuex Actions一起使用。
Object.assign。這不是你經常需要的東西，但它會幫助你理解Vue的反應性系統是如何工作的。Vue.js 3.x可能會使用新的Proxies功能，所以請檢查一下！
閱讀更多 愛碼農 的文章
