Logical reuse Mixins in VUe2

Mixins in vue have some meaning for logical reuse. They can contain any component option. When a component uses Mixins, the component will mix all Minxins options. When a component uses the Mixins, these options are merged into their own options according to certain rules. Example: (1) Create a mixin object

! [ID2JS {$6 ~ 8 q PRD1_NNHW4] Valerie plame ng] (p3-juejin.byteimg.com/tos-cn-i-k3…).

Export default{data(){return{name:' small '}}, created(){console.log(' this is from mix page output ') console.log(' this is from mix page output 2')}, {console.log(' this is a log from the mix page ')}, methods:{ test(){ console.log('from mixins') } } }, }Copy the code

(2) Component introduction

! [NPSQLTIX}E8MK7MOOL88S3.png

<script> import test from '.. /.. /mixins/test.js' export default { mixins:[test], data(){ return{ age:18 } }, Created (){console.log(this.name) console.log(' this is output from test page ') this.test()}, },} </script> {console.log(' this is a test page mounted output ')},}} </script>Copy the code

(3) Execution results

You can see that the Mixins output statements are all executed, and that the output execution in the Mixins precedes the execution in the component. Mixins are pretty simple to use, but what are the rules for mixing them into components?

1. Function options, such as Created, Mounted, etc., are merged directly, and hook functions in Mixins are executed before components

Created and Mounted Mixins hook functions are merged with hook functions in the component, and the Mixins execution time is earlier than the component execution time

2. Options with object values, such as methods, are merged, but if method names conflict, in-component methods override methods in Mixins, as shown:

! [ID2JS {$6 ~ 8 q PRD1_NNHW4] Valerie plame ng] (p6-juejin.byteimg.com/tos-cn-i-k3…).

We define two test methods at the same time, which ultimately execute the methods within the component

3.Mixins methods and parameters are not shared between components

That is, Mixins are mixed with different components and Mixins are mixed with initial values. When component 1 changes the data in a Mixins, when component 2 is mixed in, the Mixins data is still the original initial value.

Second, vue3 composite API replacement

In VUe2, our components use optional API, object definition method to realize components, data, methods and other attributes to define the functions we need, but there are many problems in the actual use of Mixins. Dan Abramoff, in Mixins Are Considered Harmful, argues that logical reuse using mixins is an anti-pattern. Mixins has a lot of problems, such as name, component changes, data attribute components with mixins defined problem known as implicit reliance on using mixin the most headache is named problem, if not a logic among multiple components reuse, so there is no necessary to extract, but it is precisely the reuse of components will be named, We know mixed in the rules, if the value for the object of the option, when naming conflicts within the component will be covered with methods, which makes us in more than one component reuse, write the code more difficult, at the same time, if changes in mixins code, reference and then mixed with all the components will be affected, is extremely important.

Vue3 uses Composition API for functional component development similar to React Hook, which replaces Mixinx and can better extract and reuse logical code. The idea is to define functions as variables returned from setup functions, rather than as object attributes like VUe2.

Mixin uses the method of merging object attributes to reuse logic, which is a mode based on the development of vuE2 class components. Now functional component development has become the mainstream, and vue3 combinational API also solves the shortcomings of mixin well, making the reuse of logic code stronger.