前言
舉個簡單的例子，我們在使用modal元件的時候，我們將它放在了我們的模板template裡面，但是由於modal元件希望位於頁面的最上方，這時候我們將modal元件掛載在body上面是最好控制的，我們能夠很好的通過zindex來控制modal的位置，當他巢狀在templat裡面的時候就不那麼容易了。
vue2.0中的實現
vue2.0中我在寫這個元件的時候是通過手動的形式來進行掛載的，我寫了乙個vue指令來進行這個操作，幫助我將modal元件掛載到body上面去，專這樣也能夠很好的通過控制zindex來控制modal的展示。
上面的**其實就是簡單的將function insert(el)}export default (typeof window !== 'undefined' ? )
},componentupdated(el, )
},} : {});
複製**
modal從他原始掛載的父節點移除，然後掛載到body上去，通過手動的形式來重新掛載，能夠很好的解決這種問題，當然上面只是簡單的邏輯，如果需要考慮解除安裝等其他邏輯**還得增加。
說實話複製**
vue2.0中的實現其實是沒啥問題的，只是不是很優雅，需要額外的**控制，所以vue3.0中直接帶來了teleport-任意傳送門具體**參考vue2.0-modal
什麼是teleport
teleport能夠直接幫助我們將元件渲染後頁面中的任意地方，只要我們指定了渲染的目標物件。teleport使用起來非常簡單。
上面的**我們就能夠很簡單的實現之前vue2.0所實現的功能。複製**
具體**參考vue3.0-modal
注意點與 vue components 一起使用
在這種情況下，即使在不同的地方渲染child-component，它仍將是parent-component的子級，並將從中接收name prop。
這也意味著來自父元件的注入按預期工作，並且子元件將巢狀在vue devtools中的父元件之下，而不是放在實際內容移動到的位置。
template: `
`})template: `
`})props: ['name'],
template: `
hello, }
`})複製**
在同一目標上使用多個teleport
當我們將多個teleport送到同一位置時會發生什麼？
我們可以看到對於這種情況，多個abab複製**
teleport元件可以將其內容掛載到同乙個目標元素。順序將是乙個簡單的追加——稍後掛載將位於目標元素中較早的掛載之後。
總結一句話來描述teleport就是一種將**組織邏輯依舊放在元件中，這樣我們能夠使用元件內部的資料狀態，控制項展示的形式，但是最後渲染的地方可以是任意的，而不是侷限於元件內部
vue3 0新特性 組合式 API
今天在看vue3.0有啥新特性，做了一些簡單的嘗試，在這裡分享給大家，一起學習 首先說說組合式api產生背景，隨著vue開發專案的複雜度上公升，我們的關注點也會隨著專案的複雜度上公升而延長，有時候可能就乙個邏輯，需要跳轉多個 塊兒，不管是對於開發過這個專案或者是接手但沒開發過該項目的人都不是很方便，...
Vue 3 0 有哪些新特性值得我們提前了解
vue.js 作者兼核心開發者尤雨溪宣布 vue 3.0 進入 beta 階段。重點關注 系統環境 npm v nrm ls 安裝 vue cli npm install vue cli g 建立專案 vue create 專案名在專案中安裝vue next外掛程式，試用vue3 beta vue ...
vue3 0新特性記錄表（只記錄常用的）
使用composition api 組合式api 來呼叫內部方法,元件。例如 import from vue defindcomponent 定義元件 defindasynccomponent 方法 定義非同步元件方法 teleport 傳送 getcurrentinstance 獲取當前元件例項 ...