Vue.js是一個流行的JavaScript框架，它支持組件化編程。Vue的特性使得它在開發動態用戶界面的時候非常方便。一般情況下，一個Vue組件可能會有多個屬性和方法，但是有時候我們需要在多個組件之間復用一些共同的屬性和方法。在這種情況下，Vue的extends和mixins可以幫助我們實現代碼重用。

假設我們有兩個Vue組件：ComponentA和ComponentB。這兩個組件需要共享同一個計算屬性，我們可以通過使用mixins來避免代碼重復。首先，我們需要在一個新的JavaScript文件中定義一個mixins對象：

const commonMixin = {
computed: {
sharedValue() {
return '共享的計算屬性值';
}
}
};

然后，我們可以通過組件的mixins屬性來引入這個mixins對象：

Vue.component('ComponentA', {
mixins: [commonMixin],
template: '<div>{{ sharedValue }}</div>'
});
Vue.component('ComponentB', {
mixins: [commonMixin],
template: '<div>{{ sharedValue }}</div>'
});

通過這種方式，ComponentA和ComponentB組件中就都可以使用共享的計算屬性了。

如果我們需要一個組件擴展父組件的屬性和方法，那么可以使用extends。在這種情況下，我們需要在子組件中使用extends屬性來指定父組件：

Vue.component('ParentComponent', {
data() {
return {
parentMsg: '來自父組件的消息'
}
}
});
Vue.component('ChildComponent', {
extends: ParentComponent,
created() {
console.log(this.parentMsg);
}
});

這樣，ChildComponent就可以使用ParentComponent的數據和方法了。

總之，Vue的extends和mixins可以幫助我們實現代碼重用，提高代碼復用率和可維護性。