The difference between vue mixins and extends

Mixing mixins and inheritance extends

Look at how the official document is written. In fact, both of them can be understood as inheritance. Mixins receive an array of objects (which can be understood as multiple inheritance), and extends receive objects or functions (which can be understood as single inheritance).

inherit hook function

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')  } }

console output

extends created

mixin1 created

mixin2 created

created

• Conclusion: The parent class inherited by mixins and extends is called first, and the priority of extends trigger is higher, compared to the queue

• push(extend, mixin1, minxin2, its own hook function)

• After testing, the value inheritance rules of watch are the same.

Inheritance methods

const extend = {
 data () {
  return {
   name: 'extend name'
  }
 }
}
const mixin1 = {
 data () {
  return {
   name: 'mixin1 name'
  }
 }
}
const mixin2 = {
 data () {
  return {
   name: 'mixin2 name'
  }
 }
}
// name = 'name'
export default {
 mixins: [mixin1, mixin2],
 extends: extend,
 name: 'app',
 data () {
  return {
   name: 'name'
  }
 }
}
// Only write subclasses, name = 'mixin2 name', extends priority will be overwritten by mixins
export default {  mixins: [mixin1, mixin2],  extends: extend,  name: 'app' } // Only write subclasses Class, name = 'mixin1 name', the inheritance after mixins will override the previous export default {  mixins: [mixin2, mixin1],  extends: extend,  name: 'app' }

• Conclusion: The subclass declares again, and the variables in data will be rewritten, and the subclass shall prevail.
• If the subclass does not declare, the variable in data will be the last inherited parent class.
• After testing, the properties in props and the methods in methods are the same as the value inheritance rules of computed.

The following introduces mixins, extends and extend separately

mixins

Call method: mixins: [mixin1, mixin2]

It is an extension of the parent component, including methods, components, directive, etc. . .

When the hook function is triggered, the function of the mixins is called first, and then the function of the parent component is called.

Although it is also possible to add data and template attributes when creating a mixin, when the parent component also has this attribute, the parent shall prevail. From this point, we can also see the creator's intentions (expansion).

Objects in key-value pair formats such as data, methods internal functions, components, and directives are subject to the parent component/instance

extends

Call method: extends: CompA

It is also an extension of the parent component, similar to mixins, but its priority is lower than that of the parent component

extend

Constructor for extension components

Automatically called when we call vue.component('a', {...})

It is worth noting that the data in extend is a function