組件功能分析：

固定頂部顯示，有三種類型：成功success，錯誤error，警告warning。

顯示消息提示時需要動畫從上滑入且淡出。

組件使用的方式不夠便利，封裝成工具函數(shù)方式。

解析:

? ? ? ? ??h 等價于 createVNode

? ? ? ? ? createVNode: 作用：創(chuàng)建虛擬DOM ?(一個js對象, 可以模擬真實dom結構)

? ? ? 1.? import { h, onMounted, render } from 'vue'

? ? ? ? ?參數(shù)1：創(chuàng)建的虛擬DOM的節(jié)點類型 ?比如 ?div h1 ?a ?img

? ? ? ? ?參數(shù)2：虛擬DOM擁有的屬性，是一個對象

? ? ? ? ?參數(shù)3：虛擬DOM節(jié)點的內(nèi)容

? ? ?創(chuàng)建虛擬dom 相當于?<h1 title="標題" id="box" class="aa">我是標題</h1>

? ? ?2.? const vNode = h('h1', { title: '標題', id: 'box', className: 'aa' }, '我是標題')

? ? 3. onMounted(() => {

? ? ?const div = document.getElementById('div')

? ? ?if(div){

? ? ?console.log(div, vNode)

? ? // render 把虛擬dom渲染到容器中(真實的dom)

? ? render(vNode, div)

? ? // render(messsage組件, dom元素)

? }

})

使用流程: