详细分析 Vue3 文档

之前我就在想，为什么很多人遇到问题都是推荐说：看文档
为什么？
因为文档真的很有用（真香）
这篇文章是个人对于文档中出现内容的理解，在断断续续的一周时间内看一次文档后，compisition API真的太香了，ts真的太香了！

全局API

createApp

在通过脚手架创建项目的时候可以在main.js中看到这样一行代码：

import { createApp } from 'vue'
import App from './App.vue'
import './index.css'createApp(App).mount('#app')

使用这个函数可以提供一个上下文应用实例，应用实例挂载的整个组件树共享同一个上下文。

这也就意味着，我们可以在创建实例的时候设置一个根prop，他的所有子组件都可以通过props的方法获取到这个值。他的第一个参数接收一个根组件选项对象options作为第一个参数，使用第二个参数，可以将根prop传递给应用程序，例如：

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import './index.css'createApp(App,{username:"黑猫几绛"}).mount('#app')

// App.vue
<template><div id="app"><defineComp/>{{username}}</div>
</template><script>
import defineComp from './components/defineComp.vue'
export default {components: { defineComp },name: 'App',props:{username:{type: String,default: 'neko_zzz'}}
}
</script>

最终在页面上的显示结果为黑猫几绛

更正

这个第二个参数似乎只能将props传递给根组件使用，对于他的深层次子组件来说，是看不到props的。

h

返回一个”虚拟节点“，通常缩写为 VNode：一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。它的目的是用于手动编写的渲染函数：

render() {return h('h1', {}, 'Some title')
}

h是用于创建VNode的实用程序，仅作为createVNode函数的缩写，而render只是暴露给是开发者去使用createVNode的钩子。

render 函数的优先级高于根据 template 选项或挂载元素的 DOM 内 HTML 模板编译的渲染函数。

注意！如果 Vue 选项中包含渲染函数，模板template将被忽略！

属性

接收三个参数：type，props 和 children

type

类型：String | Object | Function
详细：

HTML 标签名、组件、异步组件或函数式组件。使用返回 null 的函数将渲染一个注释。此参数是必需的。

props

类型：Object
详细：

一个对象，与我们将在模板中使用的 attribute、prop 和事件相对应。可选。

children

类型：String | Array | Object
详细：

子代 VNode，使用 h() 生成，或者使用字符串来获取“文本 VNode”，或带有插槽的对象。可选。
```
h('div', {}, ['Some text comes first.',h('h1', 'A headline'),h(MyComponent, {someProp: 'foobar'})
])
```

defineComponent

其实这个函数主要是为ts或tsx的类型推导服务的，如果说是使用js来写项目，直接用默认的export default {}就好，例如：

<script>
export default {name: 'App'
}
</script>

如果是使用ts的项目，defineComponent最为重要的作用是给予了组件正确的参数类型推断。

首先看看文档中是怎么说的：

这个API提供了一个参数，参数的值可以为具有组件选项的对象，或者是一个setup函数，函数名称将作为组件名称来使用。

单独看这一句话可能不方便理解，所以借助一下源码来看，它只是对setup函数的一种封装，并返回options对象。如果我们在调用函数时提供了详细的组件选项，那么返回一个options对象；如果仅仅为了简写提供一个setup函数，那么返回一个只封装了setup函数的对象。

export function defineComponent(options: unknown){return isFunction(options) ? { setup: options } : options
}

通过一个具体的变量，去接收defineComponent封装后传递回来的options组件选项，在这个封装中可以为数据/函数设置具体的类型。

<script lang="ts">
import { defineComponent, PropType, ref, computed, reactive } from 'vue'// 声明reactive的时候推荐使用接口
interface Student{name: string,age: number
}export default defineComponent({name: 'defineComp',props: {callback: {type: Function as PropType<()=>void>},success: {type: Boolean,default: true}},setup(){// 其实如果不给定ref具体的类型，vue3也可以根据初始值来进行类型推导// 不过指定复杂数据类型的时候可以手动传递一个泛型const month = ref<string| number>(9)const nextMonth = computed((): string => {return ('' + month.value + 1)})// 有以下三种方法可以定义一个reactive变量const st1: Student = reactive({name:'黑猫几绛',age:20})const st2 = reactive<Student>({name:'黑猫几绛',age:20})const st3 = reactive({name:'黑猫几绛',age:20}) as Studentreturn{month,nextMonth,st1,st2,st3}}
})
</script>

而所谓的设置一个setup函数表示，当组件中只有setup方法的话，可以进行的一种简写，例如：

<script lang="ts">
import { defineComponent, ref} from 'vue'
const defineComp = defineComponent(()=>{const month = ref<string| number>(9)return{month}
})
</script>

defineAsyncComponent

可以创建一个只有在需要时才会加载的异步组件。

在大型应用中，我们可能需要将应用分割成为小一些的代码块，并且只在需要的时候才从服务器加载一个模块。

在Vue3.x中，对异步组件的使用跟Vue2.x不同的主要变化有三点：

Vue3.x新增了这个辅助函数来显示声明异步组件
异步组件高级声明方法中的component选项更名为loader
loader绑定的组件加载函数不再接受resolve和reject函数，而且必须返回一个promise

在 Vue 2.x 中，声明一个异步组件只需这样：

const asyncPage = () => import('./v2AsyncComp.vue')

但是，到了 Vue 3.x 上面的用法就不适用了，因为此时如果想要调用异步组件，需要使用defineAsyncComponent辅助函数进行包裹：

Now, in Vue 3, since functional components are defined as pure functions, async components definitions need to be explicitly defined by wrapping it in a new defineAsyncComponent helper.

对于高阶用法，defineAsyncComponent 可以接受一个对象：

defineAsyncComponent 方法还可以返回以下格式的对象：

import { defineAsyncComponent } from 'vue'const AsyncComp = defineAsyncComponent({// 工厂函数loader: () => import('./Foo.vue'),// 加载异步组件时要使用的组件loadingComponent: LoadingComponent,// 加载失败时要使用的组件errorComponent: ErrorComponent,// 在显示 loadingComponent 之前的延迟 | 默认值：200（单位 ms）delay: 200,// 如果提供了 timeout ，并且加载组件的时间超过了设定值，将显示错误组件// 默认值：Infinity（即永不超时，单位 ms）timeout: 3000,// 定义组件是否可挂起 | 默认值：truesuspensible: false,/**** @param {*} error 错误信息对象* @param {*} retry 一个函数，用于指示当 promise 加载器 reject 时，加载器是否应该重试* @param {*} fail  一个函数，指示加载程序结束退出* @param {*} attempts 允许的最大重试次数*/onError(error, retry, fail, attempts) {if (error.message.match(/fetch/) && attempts <= 3) {// 请求发生错误时重试，最多可尝试 3 次retry()} else {// 注意，retry/fail 就像 promise 的 resolve/reject 一样：// 必须调用其中一个才能继续错误处理。fail()}}
})

defineCustomElement（3.2+）

自定义元素的一大好处就是它们可以与任何框架一起使用，甚至可以在没有框架的情况下使用。当你需要向可能使用不同前端技术栈的终端用户分发组件时，或者希望向最终应用程序隐藏其所用组件的实现细节时，使用自定义元素非常适合。

该方法接受和 defineComponent 相同的参数，但是返回一个原生的自定义元素，该元素可以用于任意框架或不基于框架使用。

用法示例：

<my-vue-element></my-vue-element>

import { defineCustomElement } from 'vue'
const MyVueElement = defineCustomElement({// 这里是普通的 Vue 组件选项props: {},emits: {},template: `...`,// 只用于 defineCustomElement：注入到 shadow root 中的 CSSstyles: [`/* inlined css */`]
})
// 注册该自定义元素。
// 注册过后，页面上所有的 `<my-vue-element>` 标记会被升级。
customElements.define('my-vue-element', MyVueElement)
// 你也可以用编程的方式初始化这个元素：
// (在注册之后才可以这样做)
document.body.appendChild(new MyVueElement({// 初始化的 prop (可选)})
)

resolveComponent

resolveComponent 只能在 render 或 setup 函数中使用。

如果在当前应用实例中可用，则允许按名称解析 component。

返回一个 Component。如果没有找到，则返回接收的参数 name。

import { resolveComponent } from 'vue'
render() {const MyComponent = resolveComponent('MyComponent')
}

获取到组件后可以通过h辅助函数进行组件的渲染，这部分在h中已介绍。

nextTick

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。

import { createApp, nextTick } from 'vue'const app = createApp({setup() {const message = ref('Hello!')const changeMessage = async newMessage => {message.value = newMessageawait nextTick()console.log('Now DOM is updated')}}
})

或者是通过实例方法：

createApp({// ...methods: {// ...example() {// 修改数据this.message = 'changed'// DOM 尚未更新this.$nextTick(function() {// DOM 现在更新了// `this` 被绑定到当前实例this.doSomethingElse()})}}
})

好吧，虽然文档上面说nextTick就是为DOM更新服务的，但是这所谓的DOM更新又是什么时候进行呢？或者说，为什么在修改数据后，我们无法立即的获取到修改后的数据，必须得等DOM更新后才能拿到最新的值呢？

也许直接看概念可能还是有点难以理解，所以推荐你先看看这个案例

看完后可以理清一下思路：更新数据后，vue并不是实时更新的，dom 的更新是需要一定时间的。数据更新到显示到页面有时间差，我们在时间差内立即去操作或者获取 dom 的话，其实还是操作和获取的未更新的 dom ，所以当然获取不到更新后的值。也就是说：Vue在更新 DOM 时是异步执行的。

选项

data

我们平时可以通过组件实例直接获取到实例对象，比如vm.a，其实是因为组件实例代理了data对象上所有的property，因此访问 vm.a 等价于访问 vm.$data.a。

以 _ 或 $ 开头的 property 不会被组件实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 vm.$data._property 的方式访问这些 property。

// 直接创建一个实例
const data = { a: 1 }// 这个对象将添加到组件实例中
const vm = createApp({data() {return data}
}).mount('#app')console.log(vm.a) // => 1

props

示例：

const app = createApp({})// 简单语法
app.component('props-demo-simple', {props: ['size', 'myMessage']
})// 对象语法，提供验证
app.component('props-demo-advanced', {props: {// 类型检查// 多个可能的类型height: [Number, String],// 类型检查 + 其他验证age: {type: Number,default: 0,required: true,validator: value => {return value >= 0},default: 100},// 带有默认值的对象propE: {type: Object,// 对象或数组的默认值必须从一个工厂函数返回     // newdefault() {return { message: 'hello' }}},// 具有默认值的函数propG: {type: Function,// 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数       // newdefault() {return 'Default function'}}}
})

这一部分的内容不多，文档中主要放在了深入组件->Props中介绍

computed + watch

computed

计算属性将基于它们的响应依赖关系缓存。计算属性只会在相关响应式依赖发生改变时重新求值。这就意味着只要他所依赖的数据对象 还没有发生改变，多次访问设定的计算属性时计算属性会立即返回之前的计算结果，而不必再次执行函数。

const app = createApp({data(){return{a: 1}},computed:{// 仅读取aDouble() {return this.a * 2},// 读取和设置aPlus: {get() {return this.a + 1},set(v) {this.a = v - 1}}}
})

需要注意，这里说是对相应依赖进行关系缓存，所以他对于一个非响应式的数据来说是不会更新的，例如：

computed: {now() {return Date.now()}
}

上面介绍的是在options语法中通过属性配置来实现computed方法，现在介绍在v3版本中如何使用。

具体的理解和v2中使用时一致：

const count = ref(1)
// 默认情况下只接收一个getter函数
const plusOne = computed(() => count.value + 1)
console.log(plusOne.value) // 2// 或者，接受一个具有 get 和 set 函数的对象，用来创建可写的 ref 对象
// 因此在 computed 函数中参数为一个对象，对象成员为 get 函数与 set 函数
const plusOne2 = computed({get: () => count.value + 1,set: val => {count.value = val - 1}
})
plusOne2.value = 1
console.log(count.value) // 0

watch

对于watch部分来说，这里介绍几个配置项记住就行。

参数：
- {string | Function} source
- {Function | Object} callback
- {Object} [options]
  - {boolean} deep：为了发现对象内部值的变化，可以在选项参数中指定 deep: true。同样适用于监听数组变更。（注意：当变更（不是替换）对象或数组并使用 deep 选项时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变更之前值的副本。）
  - {boolean} immediate：在选项参数中指定 immediate: true 将立即以表达式的当前值触发回调。
  - {string} flush：flush 选项可以更好地控制回调的时间。它可以设置为 'pre'、'post' 或 'sync'。默认值是 'pre'，指定的回调应该在渲染前被调用。它允许回调在模板运行前更新了其他值。'post' 值是可以用来将回调推迟到渲染之后的。如果回调需要通过 $refs 访问更新的 DOM 或子组件，那么则使用该值。对于 'pre' 和 'post'，回调使用队列进行缓冲。回调只被添加到队列中一次，即使观察值变化了多次。值的中间变化将被跳过，不会传递给回调。更多关于 flush 的信息，请参阅副作用刷新时机。
    
    ----> 缓冲回调不仅可以提高性能，还有助于保证数据的一致性。在执行数据更新的代码完成之前，侦听器不会被触发。
返回：{Function} unwatch

最后传入回调数组的方法，大概想表达的意思是在监听某个响应式property时可以同时执行多个函数。

watch: {// 侦听顶级 property// 和computed一样，如果采用简写的方法，就写一个名为监听对象的函数// 如果需要在里面添加配置，则采用对象的方式来表示a(val, oldVal) {console.log(`new: ${val}, old: ${oldVal}`)},// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深c: {handler(val, oldVal) {console.log('c changed')},deep: true},// 侦听单个嵌套 property'c.d': function (val, oldVal) {// do something},// 其实对于嵌套属性来说还有一种写法（这部分应该放在此处watch配置外面的，仅作写法参考）this.$watch(() => this.c.d,(newVal, oldVal) => {// 做点什么})// 该回调将会在侦听开始之后被立即调用e: {handler(val, oldVal) {console.log('e changed')},immediate: true},// 你可以传入回调数组，它们会被逐一调用// 需要注意这里的格式// 在使用handler表示处理函数时，需要使用大括号将其包裹f: ['handle1',function handle2(val, oldVal) {console.log('handle2 triggered')},{handler: function handle3(val, oldVal) {console.log('handle3 triggered')}/* ... */}]
}

二者之间的差别

如果说想要比较计算属性和侦听器之间的差别，计算属性可以对多个属性之间的联系进行计算，而侦听器只能逐一检测某个属性，比如计算一个fullname值，计算属性可以通过lastname和firstname进行拼接推出，而侦听器只能分别对这两个子属性进行侦听，在侦听的过程中计算fullname的值。

watch: {firstName(val) {this.fullName = val + ' ' + this.lastName},lastName(val) {this.fullName = this.firstName + ' ' + val}
}，
computed: {fullName() {return this.firstName + ' ' + this.lastName}
}

methods

通过事件来触发某个声明的函数。

传参

在调用函数的时候，我们不仅可以传递数据参数，还可以传递一个$event属性作为最后一个参数，负责操控全局DOM元素，例如：

<button @click="warn('Form cannot be submitted yet.', $event)">Submit
</button>

// ...
methods: {warn(message, event) {// 现在可以访问到原生事件if (event) {event.preventDefault()}alert(message)}
}

也有不需要传递参数的情况，这个时候在template中无需手动声明$event，直接在methods设置的函数中使用event参数即可，例如：

<div id="event-with-method"><!-- `greet` 是在下面定义的方法名 --><button @click="greet">Greet</button>
</div>

methods: {greet(event) {// `event` 是原生 DOM eventif (event) {alert(event.target.tagName)}}
}

看文档的时候还发现，在某一个点击事件中可以同时触发多个函数！

<!-- 这两个 one() 和 two() 将执行按钮点击事件 -->
<button @click="one($event), two($event)">Submit
</button>

事件修饰符

这里仅介绍一些常用的修饰符。

.stop

stop修饰符可以阻止冒泡，默认情况下按照冒泡来执行。

<div @click="clickEvent(2)" style="width:300px;height:100px;background:red"><button @click.stop="clickEvent(1)">点击</button>
</div>methods: {clickEvent(num) {// 不加 stop 点击按钮输出 1 2// 加了 stop 点击按钮输出 1console.log(num)}
}

.capture

capture修饰符的作用和stop反过来，设置由外往内进行捕获，而不是禁止。

<div @click.capture="clickEvent(2)" style="width:300px;height:100px;background:red"><button @click="clickEvent(1)">点击</button>
</div>methods: {clickEvent(num) {不加 capture 点击按钮输出 1 2加了 capture 点击按钮输出 2 1console.log(num)}
}

如果是防止冒泡，那么给最里面的元素设置.stop修饰符；如果是手动设置捕获，那么给最外面的元素设置.capture。

.self

self修饰符作用是，只有点击事件绑定的本身才会触发事件.

<div @click.self="clickEvent(2)" style="width:300px;height:100px;background:red"><button @click="clickEvent(1)">点击</button>
</div>methods: {clickEvent(num) {// 不加 self 点击按钮输出 1 2// 加了 self 点击按钮输出 1 点击div才会输出 2console.log(num)}
}

.self修饰符也许也是用来防止冒泡用的，如果点击的是内部元素就不向上冒泡，而如果点击的是外部元素本身则可以触发事件。

.prevent

prevent修饰符的作用是阻止默认事件（例如a标签的跳转）

<a href="#" @click.prevent="clickEvent(1)">点我</a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>methods: {clickEvent(num) {// 不加 prevent 点击a标签 先跳转然后输出 1// 加了 prevent 点击a标签 不会跳转只会输出 1console.log(num)}
}

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有默认事件的点击，而 v-on:click.self.prevent 只会阻止对元素自身默认事件的点击。

.passive

当我们在监听元素滚动事件的时候，会一直触发onscroll事件，在pc端是没啥问题的，但是在移动端，会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发，   -->
<!-- 而不会等待 `onScroll` 完成，                    -->
<!-- 以防止其中包含 `event.preventDefault()` 的情况  -->
<div @scroll.passive="onScroll">...</div>

.exact

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button><!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button><!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>

.sync

当父组件传值进子组件，子组件想要改变这个值时，可以这么做：

父组件里
<children :foo="bar" @update:foo="val => bar = val"></children>子组件里
this.$emit('update:foo', newValue)
复制代码

sync修饰符的作用就是，可以简写：

父组件里
<children :foo.sync="bar"></children>子组件里
this.$emit('update:foo', newValue)

使用sync的时候，子组件传递的事件名必须为update:value，其中value必须与子组件中props中声明的名称完全一致。

这个修饰符在ui组件中较为常用，比如通过sync控制弹出框显示内容的同步修改。

emits

之前在用emits的时候我一直用的时文档中介绍的第一种方法，即数组语法：

// 数组语法
app.component('todo-item', {emits: ['check'],created() {this.$emit('check')}
})

看文档的时候才知道原来他也可以用对象的方式来自定义配置。也对，毕竟这一系列都属于Vue的选项配置，应该都可以自定义配置的。

// 对象语法
app.component('reply-form', {emits: {// 没有验证函数click: null,// 带有验证函数submit: payload => {if (payload.email && payload.password) {return true} else {console.warn(`Invalid submit event payload!`)return false}}}
})

在Vue3.x中，出于setup函数的限制，在setup()中是不指向当前实例的，所以需要使用context参数。

<script>
import { defineComponent } from 'vue'
export default defineComponent({emits: {'on-change': null}setup (props, ctx) {const clickBtn = () => {ctx.emit("on-change", "hi~");};return { clickBtn }}
})
</script>

在组件中所有的emit事件最好都能在emits选项中进行配置，使用对象方式的时候可以配置带校验emit事件，为null的时候代表不校验。进行校验的时候会把emit事件的参数传到校验函数的参数里面。当校验函数不通过，返回false的时候控制台会发出一个警告，但是emit事件会继续执行。

总的来说，emits无论是数组或者对象用法最终都会将事件给传递出去，数组或对象的使用只是为了记录实例中的emit事件，或者是验证事件中的参数，并不会因为验证不通过就取消事件的传递。

expose（3.2+）

这个API将为3.2+版本的setup语法糖服务，使用 <script setup> 的组件是默认关闭的，也即通过模板 ref 或者 $parent 链获取到的组件的公开实例，不会暴露任何在 <script setup> 中声明的绑定。

expose 选项将限制公共实例可以访问的 property。

export default {// increment 将被暴露，// 但 count 只能被内部访问expose: ['increment'],data() {return {count: 0}},methods: {increment() {this.count++}}
}

返回一个渲染函数将阻止我们返回任何其它的东西。从内部来说这不应该成为一个问题，但当我们想要将这个组件的方法通过模板 ref 暴露给父组件时就不一样了。

我们可以通过调用 expose 来解决这个问题，给它传递一个对象，其中定义的 property 将可以被外部组件实例访问：

import { h, ref } from 'vue'
export default {setup(props, { expose }) {const count = ref(0)const increment = () => ++count.valueexpose({increment})return () => h('div', count.value)}
}

这个 increment 方法现在将可以通过父组件的模板 ref 访问。

为了在 <script setup> 组件中明确要暴露出去的属性，使用 defineExpose 编译器宏：

<script setup>
import { ref } from 'vue'const a = 1
const b = ref(2)defineExpose({a,b
})
</script>

当父组件通过模板 ref 的方式获取到当前组件的实例，获取到的实例会像这样 { a: number, b: number } (ref 会和在普通实例中一样被自动解包)。

生命周期钩子

使用声明周期钩子有两种方式，一是使用配置项的方法，二是使用import的方式引入钩子函数。

对于Vue2.x版本和Vue3.x的介绍，可以看这篇文章，挺详细的。

在Vue3.x中新增了两个用于Debug的钩子函数：onRenderTracked和onRenderTriggered，上面那篇文章中也有介绍。

这些生命周期钩子注册函数只能在 setup() 期间同步使用，因为它们依赖于内部的全局状态来定位当前活动的实例。

钩子函数基本使用格式如下：

onxxxxx(()=>{// ,,,
})

这里记录一些看文档时感觉需要着重记住的内容：

mounted 和updated不会保证所有的子组件也都被挂载完成。如果你希望等待整个视图都渲染完毕，可以在 mounted或updated 内部使用 vm.$nextTick。并且，该钩子在服务器端渲染期间不被调用。
```
mounted() {this.$nextTick(function () {// 仅在整个视图都被渲染之后才会运行的代码})
}
```
beforeUpdate在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。

directives

声明一组可用于组件实例中的指令。

const app = createApp({})
app.component('focused-input', {// 声明directives配置项directives: {focus: {// 其实可以在配置中调用声明周期函数// 并且参数可以接收到实例对象elmounted(el) {el.focus()}}},template: `<input v-focus>`
})

mixins

mixin作为灵活的混入功能，一个mixin对象可以包含任意组件选项，它可以像组件一样使用组件的生命周期、methods等功能。

与mixin极度相似的一个功能叫做extends，用法与mixin一致，extends的优先级大于mixin。

当组件使用了该混入时：

若两者不具有同名选项，优先执行混入的生命周期钩子，再执行组件的代码部分：

const myMixin = {created() {console.log('mixin 对象的钩子被调用')}
}const app = Vue.createApp({mixins: [myMixin],created() {console.log('组件钩子被调用')}
})// => "mixin 对象的钩子被调用"
// => "组件钩子被调用"

若两者具有同名选项，这些选项将以恰当的方式进行合并，在数据的 property 发生冲突时，会以组件自身的数据为优先：

const myMixin = {data() {return {message: 'hello',foo: 'abc'}}
}const app = Vue.createApp({mixins: [myMixin],data() {return {message: 'goodbye',bar: 'def'}},created() {console.log(this.$data) // => { message: "goodbye", foo: "abc", bar: "def" }}
})

在 Vue 2 中，mixin 是将部分组件逻辑抽象成可重用块的主要工具。但是，他们有几个问题：

Mixin 很容易发生冲突：因为每个 mixin 的 property 都被合并到同一个组件中，所以为了避免 property 名冲突，你仍然需要了解其他每个特性。
可重用性是有限的：我们不能向 mixin 传递任何参数来改变它的逻辑，这降低了它们在抽象逻辑方面的灵活性。
全局mixin的自定义选项推荐是作为插件发布，因为全局将会影响每一个后创建的子组件。