如果說有一個前端框架能夠讓你輕松的實現(xiàn)代碼高度復用，Vue.js便是那個框架。Vue.js提供了眾多的功能和特性，其中一個突出的功能就是其能夠通過使用指令來實現(xiàn)代碼片段的高度復用，這一功能給前端開發(fā)者節(jié)省了大量的時間和精力，同時加速了產品開發(fā)。

Vue使用指令的方式來進行代碼復用，而指令又可以細分成兩類：全局指令和局部指令。這兩類指令都是用來重用代碼的，它們在模板中的語法格式都是帶有v-前綴的。

全局指令可以通過Vue.directive方法來定義，當定義好之后便可以在模板中進行全局的使用。而局部指令是通過組件內的directives選項來定義，局部指令只能在當前組件模板中的標簽使用。通過這樣的方式，開發(fā)者可以針對不同的組件實現(xiàn)不同的指令，大幅提高代碼重用性。

//全局指令的定義
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
//組件內局部指令的定義
Vue.component('my-component', {
template: '',
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
},
data: function () {
return {
value: 'input some text'
}
}
})

除了指令，Vue還提供了一些高級的語法特性可以幫助開發(fā)者實現(xiàn)代碼的重用。例如使用mixins屬性來抽象和復用組件中公共的配置、行為和數(shù)據(jù)等。使用mixin的方式能夠使組件的代碼更干凈、更簡單，并且更加易于閱讀和維護。

//定義一個Mixin
var myMixin = {
created: function () {
this.hello()
},
methods: {
hello: function () {
console.log('hello from mixin!')
}
}
}
//使用Mixin
var vm = new Vue({
el: '#example',
mixins: [myMixin],
created: function () {
console.log('hello from vm!')
}
})

通過使用指令和Mixin的方式，Vue給開發(fā)者提供了一種極為高效的代碼重用方式。如果你是想要保持代碼干凈、簡單，并且旨在提高開發(fā)效率的前端開發(fā)者，那么Vue.js的指令和Mixin功能是一個不容錯過的特色。它們的存在，給你的開發(fā)帶來的不僅僅是高重用性，還有更快、更優(yōu)和更容易維護的代碼。