VUE3之Composition API（一）

mixin和extends

mixin的基本使用

mixin本质上是一个对象，其中可以包含一个组件的option属性:

export const demoMixin = {
    data() {
        return {
            message:"hello demoMixin"
        }
    },
    methods: {
        foo(){
            console.log("demo mixin foo");
        }
    },
    created() {
        console.log("执行了demo mixin");
    },
}

在使用时，写在组件的options的mixins属性里面：

<script>
import {demoMixin} from './mixins/demoMixin.js'
    export default {
        mixins:[demoMixin],
        data() {
            return {
                title: "hello world"
            }
        },
        methods: {
            
        },
    }
</script>

如果mixin与组件中不存在命名冲突，就直接合并，如果存在冲突，分成不同情况处理：

返回值对象默认情况下会合并，如果data返回值对象的属性发生了冲突，那么会保留组件自身的数据。

生命周期钩子函数会被合并到数组中，都会被调用。

对于methods、computed这种对象，会直接合并，如果对象的key相同，则采用组件的value。

全局mixin

全局mixin是直接调用app实例的mixin方法，并传入mixin对象完成的，所有app的组件都会享有全局mixin的内容：

const app=createApp(App);
app.mixin({
    created() {
        console.log("全局的生命周期")
    },
})
app.mount('#app');

extends

extends类似于OOP的继承，可以让一个页面继承于另一个页面：

// BasePage.vue
<script>
    export default {
        data() {
            return {
                title:"hello page"
            }
        },
        methods: {
            bar(){
                console.log("base page bar");
            }
        },
    }
</script>

// Home.vue
<template>
    <div>
        home page
        <h2>{{title}}</h2>
        <button @click="bar">按钮</button>
    </div>
</template>

<script>
import BasePage from './BasePage.vue';
    export default {
        extends:BasePage
    }
</script>

extends的规则和用法与mixin相同，并且只能继承父组件的script标签的内容。