一、component方式
通过app.component(name, Component)可以注册全局组件，通过该方式注册的组件在任何子组件中可以直接调用，如下所示：
import {createApp, h} from 'vue'
app.component('test-component', {
data() {
return {
count: 10
}
},
render() {
return h('h1', `测试${this.count}`);
}
});
// 使用：直接在所需要调用的位置直接调用该组件即可
<test-component />
注意：此处有一个位置没有搞懂，文档中表示可以直接调用template选项，但是我按照规范书写后内容并没有正常渲染，希望对该部分有研究的老铁可以给我指点迷津。(测试代码如下所示)
app.component('test-error', {
template: `
<div>
<strong>Error!</strong>
</div>
`
});
// 使用（未正常渲染出来，由于自己对源码部分研究较少，目前还未找到具体原因）
<test-error />
通过该种方式还可以将第三方组件注入到全局中，从而使该组件能够在别的位置直接使用，以导出Element Plus中的某些组件为例，注入到全局后可以在单文件组件中直接使用。
import {ElButton} from "element-plus";
const components = [
ElButton
];
export default {
install: app => {
components.forEach(component => {
app.component(component.name, component);
});
}
};
// 使用该插件
app.use(插件名);
// 使用该组件
<ElButton>test</ElButton>
二、Vue3.x的setup选项方式
setup函数是一个新的组件选项，是组件内部使用组合式API的入口点，使用该方式就像使用Vue2.x一样简单，仅仅是增加了一个选项，下面来看看如何用该方式定义一个组件：
<template>
<h1>这是组件二</h1>
<button @click="a++">a is {{a}}</button>
</template>
<script>
import {ref, toRefs, onMounted} from 'vue';
export default {
props: ['testProp1'],
data() {
return {
a: 10
}
},
// 将 setup 返回的所有内容都暴露给组件的其余部分 (计算属性、方法、生命周期钩子等等) 以及组件的模板
setup(props) {
// toRefs()函数的目的是延续响应式，防止丢失响应式（如果直接怼props解构会丢失响应式）
const {testProp1} = toRefs(props);
// ref()会接收内部值并返回一个响应式且可变的ref对象。
const count = ref(0);
console.log('setup');
onMounted(() => {
console.log('setup_mounted');
});
onMounted(() => {
console.log('script中setup的mount被执行1');
});
onMounted(() => {
console.log('script中setup的mount被执行2');
});
},
mounted() {
console.log('mounted');
}
}
</script>
三、Vue3.x的<script setup>方式
是不是感觉用setup方式写起来跟Vue2.x的区别不是很大，外观上看支持增加了一个setup选项，下面来一起看看这个更牛气的东西——,其是使用组合式API的编译时的语法糖，其使内容更加简洁，下面来一起看看该方式定义的组件。
<template>
<h1>这是组件一</h1>
<ButtonCounter />
<p>{{testProp1}}</p>
<button @click="count++">count is {{count}}</button>
<button @click="state.test++">测试{{state.test}}</button>
<button @click="testRef++">测试{{testRef}}</button>
<button @click="test1++">测试{{test1}}</button>
<button @click="test2++">测试{{test2}}</button>
</template>
<script setup>
console.log('script setup 1执行了');
// 使用defineProps来声明props
defineProps({
testProp1: String
});
// 使用defineEmits来声明emits，然后调用的时候通过emit(事件名, 参数)形式触发
const emit = defineEmits(['emit1', 'emit2']);
// https://juejin.cn/post/6976679225239535629
// ref:接收内部值并返回一个响应式且可变的ref对象。ref 对象仅有一个 .value property，指向该内部值；
// reactive: 为对象添加响应式状态，接收一个js对象作为参数，返回一个具有响应式状态的副本；
// toRef和toRefs主要目的是延续响应式，防止丢失响应式
import {ref, reactive, toRef, toRefs, onMounted, onBeforeMount, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, defineProps, defineEmits} from 'vue';
// ref让其具备响应式
const count = ref(0);
// 用reactive让该对象具备响应式
const state = reactive({
test: 0
});
const testRef = toRef(state, 'test');
const {test: test1} = toRefs(state);
const {test: test2} = state; // 会丢失响应性
onBeforeMount(() => {
console.log('beforeMount');
});
onMounted(() => {
console.log('mount');
});
onBeforeUpdate(() => {
console.log('beforeUpdate');
});
onUpdated(() => {
console.log('updated');
});
onBeforeUnmount(() => {
console.log('beforeUnmount');
});
onUnmounted(() => {
console.log('unmounted');
});
</script>
<script>
// 普通script在模块范围下只执行一次（可以不添加该部分）
console.log('script执行了！！！！！！');
export default {
// 当有script setup时，setup函数不会被执行
mounted() {
console.log('script 中 mount被执行！！！');
}
};
</script>
<style lang="less" scoped>
</style>
