一、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>

在使用过程中你会发现其有以下两个特点：

setup中的生命周期函数可以重复多次，从而达到了将相关逻辑点聚合到一起的目的;

选项中的相同生命周期的执行时机晚于setup函数中的相同生命周期的时机，例如mouted执行时机比onMounted晚。

作者：前端点线面
来源：https://mp.weixin.qq.com/s/cJA_eqsE8-UEZm6E5Wpj1w

本文内容仅供个人学习/研究/参考使用，不构成任何决策建议或专业指导。分享/转载时请标明原文来源，同时请勿将内容用于商业售卖、虚假宣传等非学习用途哦～感谢您的理解与支持！

链接: https://fly63.com/article/detial/11214