Symbol是es6新增的一種原始數(shù)據(jù)類型，它在Vue中的應(yīng)用十分廣泛。與其他基本數(shù)據(jù)類型不同的是，Symbol類型的值是唯一的，即使你使用相同的值創(chuàng)建多個(gè)Symbol，它們也不會(huì)相等。

// 創(chuàng)建兩個(gè)相同的Symbol
const s1 = Symbol('test')
const s2 = Symbol('test')
console.log(s1 === s2) // false

在Vue中我們可以使用Symbol來(lái)創(chuàng)建私有的數(shù)據(jù)屬性。例如，在組件內(nèi)部我們創(chuàng)建了一個(gè)變量，但不想讓它在模板中被訪問(wèn)到，那么我們可以使用Symbol來(lái)創(chuàng)建一個(gè)私有變量。

const PRIVATE_KEY = Symbol()
export default {
data() {
return {
[PRIVATE_KEY]: 'private value',
publicValue: 'public value'
}
}
}

但需要注意的是，使用Symbol創(chuàng)建的私有變量不是絕對(duì)安全的，因?yàn)槲覀內(nèi)匀豢梢酝ㄟ^(guò)Vue提供的$data屬性來(lái)訪問(wèn)它。

this.$data[PRIVATE_KEY] // 'private value'

除此之外，Symbol還可以用來(lái)創(chuàng)建全局唯一標(biāo)識(shí)符。在Vue中，我們通常會(huì)使用Symbol來(lái)創(chuàng)建一個(gè)全局唯一的事件名稱。

const EVENT_NAME = Symbol('event name')
Vue.prototype[EVENT_NAME] = new Vue()
// 在組件內(nèi)部emit事件
this.$root[EVENT_NAME].$emit('eventName', data)
// 在組件內(nèi)部監(jiān)聽(tīng)事件
this.$root[EVENT_NAME].$on('eventName', handler)

這樣做的好處是，避免了事件名稱在全局作用域中被覆蓋或者被重復(fù)使用的問(wèn)題。

除了以上兩種用法，Symbol在Vue中還有其他的應(yīng)用場(chǎng)景。例如，在自定義指令中，我們可以使用Symbol來(lái)存儲(chǔ)指令的內(nèi)部狀態(tài)。

// 在指令中存儲(chǔ)內(nèi)部狀態(tài)
const INTERNAL_STATE = Symbol('internal state')
export default {
bind(el, binding) {
const vm = binding.instance
vm[INTERNAL_STATE] = {}
// ...
}
}
// 在組件中使用指令，并獲取指令內(nèi)部狀態(tài)
this.$refs.myDomNode.getAttributeNode('v-my-directive')[INTERNAL_STATE] // {}

總的來(lái)說(shuō)，Symbol是一種非常有用的數(shù)據(jù)類型，它在Vue中的應(yīng)用場(chǎng)景非常廣泛。在使用Symbol時(shí)，我們需要注意不要將它用于絕對(duì)的安全性控制，而是應(yīng)該將它作為一種輔助手段來(lái)提高代碼的可讀性和可維護(hù)性。