VUE ?? ???? ?? ??? Vue 2? ????? Mixin? ?????? ???? ? ????. ??? ??? ?? API (?? VUE 2 ? ?????? ???? VUE 3? ???? ??)? ? ?? ???? ?????.

? ??? Mixin? ??? ???? ?? API? ??? ??? ???? VUE ?? ??????? ?? ???? ??? ??? ?????.

Mixin? ?? ??? ??

?? ???? ??? ?? ???? ??? Mixin ??? ??? ?????.

????? VUE ?? ??? ???, ???, ?? ?? ?? ?? ?? ???? ??? ???? ??? ??? ?? JavaScript ??? ?????.

 // mycomponent.js
???? ??? {
  ??? : () => ({
    MyDataproperty : NULL
  }),
  ?? : {
    myMethod () {...}
  }
  // ...
}

?? ???? ??? ??? ????? ?? ??? ??? ??? ?? ? ? ????.

 // mymixin.js
???? ??? {
  ??? : () => ({
    MysharedDataproperty : NULL
  }),
  ?? : {
    MysharedMethod () {...}
  }
}

?? ?? ? ?? ??? ?? ??? ?? ?? ???? ?? ?? ?? ?? ?? ?? ? ? ????. ???? Vue? ?? ??? ??? ?? ? ?? ?? ?????.

 // ??? component.js
"./mymixin.js"?? mymixin? ?????.

???? ??? {
  Mixins : [Mymixin],
  ??? : () => ({
    mylocaldataproperty : null
  }),
  ?? : {
    mylocalmethod () {...}
  }
}

? ?? ??? ???? ???? ?? ?? ??? ??? ????.

 ???? ??? {
  ??? : () => ({
    MysharedDataproperty : Null,
    mylocaldataproperty : null
  }),
  ?? : {
    MysharedMethod () {...},
    mylocalmethod () {...}
  }
}

Mixin? "???"??? ?????.

2016 ? ??? Dan Abramov?“Mixins? ??? ??”? ???, ?? ??? ????? ?? React ?? ???? Mixins? ???? ??? ???? ??? ?? ????? ?????.

????, ?? React Mixin? ?? ?? ? ??? Vue?? ?????. ?? API? ??? ??? ??? ????? ???? ?? ??? ??? ?? ?????.

?? ??

??? Mixin Mode? ???? ? ?? ??? ??? ????? ???. ??? ?? ?? ??? ??? ???? ???????

 const mixin = {
  ??? : () => ({
    MyProp : NULL
  })
}

???? ??? {
  Mixins : [Mixin],
  ??? : () => ({
    // ?? ??!
    MyProp : NULL
  })
}

??? ?? ??? ???? ????. ?? ??? ??? ??? ?? ??? ?????? ? ???? ?? ???? ??? ?????.

VUE ?? ??? ??? (??? ?? ??)? ?? ??? Mixin ??? ??? ? ??? ?????. ??? ??? ????. ?? ??, ??? ??? ?? ???? ????? ?? ??? ??? ?? ???? ???? ?? ??? ????? ?????.

?? ??? ???? ???? ?? ?? ??? Mixins?? ?? ? ??? ?? ? ? ??? ???? ?? ?? ??? ? ? ????. ?? NPM ?????? ?? ?? ??? ??? ??? ??? ??? ??? ?????.

?? ? ???

Mixin? ??? ???? ?? ?? ???? ?? ? ??? ????. ?? ?? ??? Mixin (? : MysharedDataproperty)? ?? ? ??? ??? ??? ? ???, Mixin? ?? ?? (? : Mylocaldataproperty)? ?? ? ??? ??? ?? ? ? ????. ?? Mixin? ???? ?? ??? ??? ?? ? ? ??????. Mixin? ?? ??? ?? ??? ?? ???? ??? ?? ?? ?? ??? ??? ? ????.

??? ??? ??? ??? ? ????. ??? ?? ??? ?????? Mixin? ???? ??? ??? ????? ??????? ?? ???? ?? ??? ?? ????. ?? ???? ?? ?? ????. ???? ?? ? ? ? ????.

?? ?? ?? ?? ?? ? ?? ??? ???????. ?? ??? ??? ???? ? ? ????, ??? ?? ?? ??? ? ????? ?? ?? ?? ??? ?? ?? ?? ???? ???????.

Mixin?? ??????????

Dan? ??? ?? ?? ??, ???? ?? ? ?? ?? ?? ?? ??? ???? Mixin? ??? ?????.

Vue? ????? React? ????? ?? ??? ?? ??? Vue? ? ???? ????. ???? ???? 2016 ? ??? ?????? VUE ???? ? ??? Mixin ??? ??????? ????.

????. Mixin? ??? ?? API? ?? ?? ?? ? ?????. ??? ?? ? ??? ???? ??? ???? ?? ??? ??? ????? ??? ?? ?????.

?? API ?? ??

?? API? ?? ????? ?? ?? (? : ??, ???, ?? ?? ?)? ??? ?? ???? ???? ?? ? ?? ???? ?? ? JavaScript ??? ????? ????.

??? "???"??? ???? ?? API? ???? ?? ? VUE 2 ?? ??? ???? ????.

 //counter.vue
???? ??? {
  ??? : () => ({
    ??? : 0
  }),
  ?? : {
    ?? () {
      this.count;
    }
  },
  ?? : {
    double () {
      this.count * 2;
    }
  }
}

??? Composition API? ???? ?? ? ??? ?? ?????.

 // ???. vue
"vue"?? ?? ?? {ref, ??};

???? ??? {
  ??() {
    const count = ref (0);
    const double = computed (() => count.value * 2)
    ?? ?? () {
      count.value;
    }
    ?? {
      ??,
      ??,
      ??
    }
  }
}

?? REF ??? ?? ???,?? ?? ??? ??? ?? ??? ??? ?? ?? ??? ?? ? ? ????. ??? ??? ???? ???????.

?? ???? ???? ???? ???? JavaScript ???? ?? ? ? ????. ??? ?? ??? ?? ????? ?? ?? ?? ???????. REF? ?? ? ?? ??? ??? ?? ?? ???? ?? ???????? ?????.

??? ?? ??? ?? ??? ??? ?? VUE Composition API ??? ???? ?? ?? ????.

??? ??? ??? ? ?? ???? ?????. ?? ? ?? ??? ???? ??? ????. ??? ? ?? ?? API? ???? ?????.

? : ?? API? VUE 3? ?? ????? VUE 2?? NPM ???? @vue/composition-api? ??? ?? ????.

?? ??

?? API? ? ?? ??? ??? ?? ??? ??????.

?? API? ???? ???? ??? JavaScript ?? usecounter? ??? ??? ?? ? ?? ??? ?????????. (?? ???? "??"? ???? ???? ?? API? ?? ?????.)

 // usecounter.js
"vue"?? ?? ?? {ref, ??};

???? ?? ?? () {
  const count = ref (0);
  const double = computed (() => count.value * 2)
  ?? ?? () {
    count.value;
  }
  ?? {
    ??,
    ??,
    ??
  }
}

?? ???

?? ?? ??? ??? ???? ?? ??? ?? ?? ??? ?? ?? ????? (?? ??? ?? ?). ??? ??? ???? ??? ?? ? ?? ?? ???? ?? ? ? ????.

 // mycomponent.js
"./usecounter.js"?? usecounter? ?? ??;

???? ??? {
  ??() {
    const {count, double, ycrement} = usecounter ();
    ?? {
      ??,
      ??,
      ??
    }
  }
}

???? ?? ?? ????? ??? ????? ??? ??? ? ?? ? ??? ??? ????? ?? ?????.

?? ?? ... ???????!

??? Mixin? ?? ?? ??? ??? ??? ?? ? ??? ??? ??? ? ??? ?? ?? ??? ???? ?? Mixin? ??? ? ?? ? ??? ??? ??? ? ????.

? ??? ?? API? ???? ?? ??? ?? ???? ?? ? ?? ?? ??? ?? ??? ?? ???? ?????.

 ???? ??? {
  ?? () {
    const {somevar1, somemethod1} = usecomptunction1 ();
    const {somevar2, somemethod2} = usecomptunction2 ();
    ?? {
      somevar1,
      somemethod1,
      somevar2,
      somemethod2
    }
  }
}

?? ?? ??? ?? JavaScript ??? ?? ???? ?????.

?? ? ??? ... ???????!

?? Mixin? ?? ??? ?? ? ??? ??? ??? ? ??? ??? ????? ??? ??? ?? ???? ??? ????.

?? ??? ?? ?? ??? ?? ? ?? ??? ?? ? ? ????. ??? ????? ??? ?? ?? ? ???? ?? ??? ???????? ????.

 "./usecomptunction"?? usecomptionction ?? ??;

???? ??? {
  ?? () {
    // ?? ??? ?????? ?? ? const mylocalval = ref (0);

    // ?? ??? ?? ??? ????????. const {...} = usecomptunction (mylocalVal);
  }
}

??

?? ? ??? ???? ?? ?? ? ????. ??? ??? ???? ????? ??? ???? ??? ???? ??? ???? ??? ??? ???? ??? ???? ?? ??????.

Composition API? ?? ?? ??? ?? VUE? ?? JavaScript? ?? ? ?? ??? ???? ??? ?? ? ?? ????? ???? ?? ?? ??? ?? ? ? ??? ????.

??? ?? API? ????? VUE? ??? API?? ????? ?? ?????? ????. ???? ?? ??? API? ?? ? ? ????. ??? ??? ??? ? ????? ?? API? ?? ? ???? ? ?? ?????.

? ??? VUE ?? API? Vue Mixins? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!