作用

代码的复用

=========================

混入 Mixin

介绍

image.png
在开发中extends用的非常少,在Vue2中比较推荐大家使用Mixin,而在Vue3中推荐使用Composition API

使用

本质就是一个对象,引入这个对象,会和现有的选项按一定规则合并

局部混入

image.png

全局混入

就是所有组件都会自动混入

Vue 3
image.png

合并规则(解决冲突)

image.png

1、data函数的返回值对象

image.png
image.png
image.png

2、生命周期函数

image.png
原理是,把多个混入的生命周期函数,组成一个数组,一个一个遍历并执行函数

3、组件对象的选项

例如 methods、components 和 directives,将被合并为同一个对象
image.png
image.png

=====================

继承 extends(少)

和混入类似,只不过是继承整个组件,然后自己在加其他扩展。
image.png image.png

只能继承script 标签内的东西,无法继承