vue3造轮子

创建vue3项目

全局安装 create-vite-app
yarn global add create-vite-app

vue2与vue3的部分区别

1.Vue 2 和 Vue 3 的区别
2.90% 的写法完全一致，除了以下几点
3.Vue 3 的 Template 支持多个根标签，Vue 2 不支持
4.Vue 3 有 createApp()，而 Vue 2 的是 new Vue()
5.createApp(组件)，new Vue({template, render})

vue3中新的父子组件传值方式provide / inject

 provide("menuVisible", menuVisible); // set
 inject>("menuVisible"); // get

Switch 组件

添加 value 属性添加 input 事件

context.emit('input', false)

emit(事件名, 事件参数)
$event 的值是 emit 的第二个参数

vue3 新版 v-model

 context.emit("update:value", !props.value);

Dialog 组件

插槽 slot 新组件 Teleport

使用v-slot:xxx 可以使用具名插槽，会将内容传递给组件内对应name的slot

可以讲标签插入对应标签下 可以防止子标签被父标签z-index影响而显示层级有问题

一句话打开 Dialog

import Dialog from "./Dialog.vue";
import { createApp, h } from "vue";
export const openDialog = (options) => {
    const { title, content, ok, cancel } = options;
    const div = document.createElement("div");
    document.body.appendChild(div);
    const close = () => {
        app.unmount();
        div.remove();
    };
    const app = createApp({
        render() {
            return h(
                Dialog,
                {
                    visible: true,
                    "onUpdate:visible": (newVisible) => {
                        if (newVisible === false) {
                            close();
                        }
                    },
                    ok, cancel
                },
                {
                    title,
                    content,
                }
            );
        },
    });
    app.mount(div);
};

Tabs 组件

  内容1
  内容2

确认子组件的类型

检查 context.slots.default() 数组

const defaults = context.slots.default()
defaults.forEach((tag) => {
  if (tag.type !== Tab) {
    throw new Error('Tabs 子标签必须是 Tab')
  }
})

如何渲染嵌套的组件

// tab.vue

// tabs.vue

为tabs内插入的tab标签

制作会动的横线

onMounted(() => {
      watchEffect(() => {
        const {
          width
        } = selectedItem.value.getBoundingClientRect()
        indicator.value.style.width = width + 'px'
        const {
          left: left1
        } = container.value.getBoundingClientRect()
        const {
          left: left2
        } = selectedItem.value.getBoundingClientRect()
        const left = left2 - left1
        indicator.value.style.left = left + 'px'
      })
    })

watchEffect()函数会在数据变化时触发，放在onMounted()里面，是为了dom存在后在执行watchEffect()