Vue是一種流行的JavaScript框架，它允許構(gòu)建交互性網(wǎng)頁應(yīng)用程序。Vue擁有豐富的特性集，其中之一是使用Vue.extend()方法創(chuàng)建可復(fù)用的組件。Vue.extend()方法允許我們定義一個新的組件構(gòu)造器，擴展已存在的組件構(gòu)造器。

下面是Vue.extend()的示例：

Vue.component('my-button', {
template: '<button>{{ buttonTitle }}</button>',
props: ['buttonTitle']
})
var MyButtonWithUniqueTitle = Vue.extend({
props: ['buttonTitle'],
data: function () {
return {
uniqueTitle: 'My Unique Title!'
}
},
computed: {
title: function () {
return this.uniqueTitle + ' ' + this.buttonTitle
}
}
})

在上面的代碼中，我們定義了一個名為'my-button'的組件，這個組件只是簡單的顯示一個按鈕。接下來，我們使用Vue.extend()方法基于'my-button'組件創(chuàng)建了一個新的組件構(gòu)造器。新組件構(gòu)造器 添加了一個屬性'uniqueTitle'， 這個屬性不會從'my-button'組件繼承下來。此外，我們還定義了計算屬性'title'，通過將'uniqueTitle'和'buttonTitle'屬性結(jié)合起來來生成每個按鈕的標題。

最后，我們可以使用這個新的組件構(gòu)造器來創(chuàng)建一個相似按鈕，但標題會附加“my unique title”字符串：

var vm = new Vue({
el: '#app',
components: {
'my-unique-button': MyButtonWithUniqueTitle
}
})

在上面的代碼中，我們將新組件構(gòu)造器作為'components'對象的屬性傳遞給Vue實例。這將創(chuàng)建一個帶有新組件的實例。我們只需要將'my-unique-button'標簽放在模板中即可使用這個新組件：

<my-unique-button button-title="Click Me!"></my-unique-button>

最終，我們成功創(chuàng)建了一個名為'my-unique-button'的新組件，并且它包含了額外的屬性和計算屬性。