1.在createApp中渲染组件中，若想传参数，则考虑用render

const app = createApp(xxx).mount('div')
等于
const app = createApp({
	render(){
    	return h(xxx,{},{})
    }
})

此时的h返回的是一个虚拟节点，缩写vNode:即一个普通对象，其中包含向 Vue 描述它应在页面上渲染哪种节点的信息，包括所有子节点的描述。

h一共接受接收三个参数：type，props 和 children

• type 就是需要渲染的组件名
• props就是组件中的props或attrs还有事件，
• children 主要是包括了一些在组件内部使用的插槽等，具体解释可以看下面的官方文档 示例：(这里的content,title是声明的插槽，所以写在children里面，事件写在props里面)

 const showDialog=()=>{
                openDialog({title:"标题",content:"你好",yes:()=>{
                    console.log('yes')
                    },no:()=>{
                    console.log('no')
                    },closeOnclickOverlay:()=>{}})
            }
-------------------------------------
const {content,title,yes,no,closeOnclickOverlay} = options;
const div = document.createElement('div')
const app = createApp({render(){
        return h(Dialog,{isvisible:true,
        'onUpdate:isvisible':(newVisible)=>{
               if(newVisible ===false){
                   //@ts-ignore
                   app.unmount(div)
                   div.remove()
               }
            },
            yes,no,closeOnclickOverlay:false
        },{content,title})
    }})
        app.mount(div)

踩坑小tips，这里面的 app.mount(div)一定要和createApp分开写，因为.mount()是没有返回值的

2. 在嵌套组件中若想判断子组件的类型

由于一开始嵌套内的组件未显示，所以我们打印出context.slots.default()

setup(props,context){
        console.log({...context.slots.default()});
        const defaults = context.slots.default()
        console.log(defaults[0].type ===Tab);
        return {defaults}
    }

这里面同上面一样返回的是一个虚拟节点，并且type的类型是Tab,也就是说Tab组件就是一个虚拟节点，也是一个普通对象（见上面的h的总结）

若想渲染内部的组件，可以使用<component :is="defaults[0]"/>来绑定动态组件，相当于实现了一个插槽，若在子组件中还需要插入别的，而此时子组件是最后一个的时候可以用是slot

3. 若想获取标签的宽高和位置,使用getBoundingClientRect(),若是在标签中使用了ref，请记得在后面加上.value，这时候获取的是他的标签

console.log(selectedItem.value);
console.log(selectedItem); 

const {width,height,top,left} = el.getBoundingClientRect()

4. ES6的语法

1. 析构赋值的重命名方法

const {left:left1} = selectedItem.value.getBoundingClientRect()
const {left:left2} = container.value.getBoundingClientRect()

2....扩展运算符和剩余运算符

• 扩展运算符

function addFun(x, y, z) {
    return x + y + z;
}

var args = [1, 2, 3];

addFun(...args);

• 剩余运算符

let demoFun = function(argA, ...args) {
    console.log(argA);
    console.log(args)
}

demoFun(1, 2, 3);
// 1
// [2, 3]