vue3（五）mixin 和extends

<>mixin和extends 两者为mvc的controller

通用的成员变量（包括属性和的方法 ）抽象成为一个父类 提供给子类继承 这样可以让子类拥有一些通用超呢高原变量 然而子类页可以重写父类的成员变量
整个编程思想就很面向对象 也就是继承性

mixin
当组件使用mixin对象时，所有mixin对象的选项将被“混入” 进入该组件本身的选项
mixin合并规则 mixins类型是Array 传入一个混合对象的数组
data函数返回的值对象 会以组件自身的数据为优先
钩子函数会被合并到数组中 在合适的时机会被一次调用 并在调用组件自身钩子之前被调用
如果都有methods选项且定义了实现，那么都会生效
如果对象的key相同 则只会去组件对象的键值对

demoMixin.js
export const demoMixin = { data() { return { message: "Hello DemoMixin" } },
methods: { foo() { console.log("demo mixin foo"); } }, created() { console.log(
"执行了demo mixin created"); } }
使用 mixins属性 demoMixin里面的message和foo函数都能用
<template> <div> <h2>{{message}}</h2> <button @click="foo">按钮</button> </div> <
/template> <script> import { demoMixin } from './mixins/demoMixin'; export
default { mixins: [demoMixin], data() { return { title: "Hello World" } },
methods: { } } </script> <style scoped> </style>
<>extends

extends类型是Object | Function 接收的是对象或者是函数
extends触发的优先级高相对于是队列
push(extend, mixin1, minxin2, 本身的钩子函数)
const extend = { created () { console.log('extends created') } } const mixin1 =
{ created () { console.log('mixin1 created') } } const mixin2 = { created () {
console.log('mixin2 created') } } export default { extends: extend, mixins: [
mixin1, mixin2], name: 'app', created () { console.log('created') } } 控制台输出
extends created mixin1 created mixin2 created created
子类再次声明，data中的变量都会被重写，以子类的为准
如果子类不声明，data中的变量将会最后继承的父类为准。
props中属性、methods中的方法和computed的值继承规则一样
注意extends先执行 在执行mixins2 最后执行mixins1
// 只写出子类，name = 'mixin1 name'，mixins后面继承会覆盖前面的 export default { mixins: [mixin2
, mixin1], extends: extend, name: 'app' }
注意extends先执行 在执行mixins21 最后执行mixins2
// 只写出子类，name = 'mixin2 name'，extends优先级高会被mixins覆盖 export default { mixins: [
mixin1, mixin2], extends: extend, name: 'app' }

• « 上一篇：动态规划——背包问题
• » 下一篇：mysql 事务原理详解