vue.js 作者兼核心開發者尤雨溪宣布 vue 3.0 進入 beta 階段。
重點關注：
系統環境
npm -v
nrm ls
npm
install @vue/cli -g
vue create 專案名vue-next外掛程式，試用vue3 beta
vue add vue-nextimport
from
'vue';.
mount
()
npm run servevue-devtools 暫不支援vue 3.0
vscode中安裝vue 3 snippets外掛程式
setup函式是乙個新的元件選項。作為在元件內使用 composition api 的入口點。
setup函式會在beforecreate鉤子之前被呼叫
如果setup返回乙個物件，則物件的屬性可以在元件模板中被訪問
第乙個引數為props，接收當前元件props選項的值，即獲取父元件傳遞過來的引數
export
default
,setup
(props)
,}
context，接收乙個上下文物件，該物件中包含了一些在vue 2.x中需要通過this才能訪問到屬性
const mycomponent =
}
setup()函式中無法訪問this vue 3.0提供的一組具有響應式特性的函式式api，都是以函式形式提供的
reactive()函式接收乙個普通物件，返回該普通物件的響應式**物件
簡單來說，就是用來建立響應式的資料物件，等同於vue 2.x的vue.observable()函式
步驟：
按需匯入reactive函式
import
from
'vue'
reactive函式，建立響應式資料物件
setup()
)// 將響應式資料物件暴露出去
return data;
}
ref()函式接收乙個引數值，返回乙個響應式的資料物件。該物件只包含乙個指向內部值的.value屬性
computed()函式用來建立計算屬性，函式的返回值是乙個ref的例項
readonly()函式接收乙個物件（普通或響應式），返回乙個原始物件的唯讀**物件
watch()函式用來監視資料的變化，從而觸發特定的操作，等同於 vue 2.x中的this.$watch
watcheffect()函式接收乙個函式作為引數，並立即執行該函式，同時響應式追蹤其依賴，並在其依賴變更時重新執行該函式。
檢查乙個值是否為乙個ref物件。
檢查乙個物件是否是由reactive建立的響應式**。
檢查乙個物件是否是由readonly建立的唯讀**。
檢查乙個物件是否是由reactive還是readonly方法建立的**。
如果引數是乙個 ref 則返回它的value，否則返回引數本身。它是val = isref(val) ? val.value : val的語法糖。
toref()函式用來將 reactive 物件的乙個屬性建立為乙個 ref，並且這個 ref 具有響應性，可以被傳遞。
torefs()函式用來將 reactive 物件建立為乙個普通物件，但該普通物件的每個屬性都是乙個 ref，並且這個 ref 具有響應性，可以被傳遞。
vue 3.0 中的生命週期函式和 vue 2.x 相比做了一些調整和變化，對應關係如下：
這些生命週期鉤子函式只能在setup()函式中使用
依賴注入就是祖先元件向後代元件傳遞資料，使用provide()和inject()函式來實現，功能類似 vue 2.x中的provide/inject
這兩個函式只能在setup()函式中使用：
通過ref()函式還可以引用頁面上的元素或元件，功能類似於 vue 2.x中的vm.$refs
步驟：
在setup()中建立乙個 ref 物件並返回它
在頁面上為元素新增 ref 屬性，並設定屬性值與建立的 ref 物件的名稱相同
當頁面渲染完成後，可以通過該 ref 物件獲取到頁面中對應的dom元素
主要領域：前端開發
技術分享 vue3 0新特性teleport是啥
前言 舉個簡單的例子，我們在使用modal元件的時候，我們將它放在了我們的模板template裡面，但是由於modal元件希望位於頁面的最上方，這時候我們將modal元件掛載在body上面是最好控制的，我們能夠很好的通過zindex來控制modal的位置，當他巢狀在templat裡面的時候就不那麼容...
vue3 0新特性 組合式 API
今天在看vue3.0有啥新特性，做了一些簡單的嘗試，在這裡分享給大家，一起學習 首先說說組合式api產生背景，隨著vue開發專案的複雜度上公升，我們的關注點也會隨著專案的複雜度上公升而延長，有時候可能就乙個邏輯，需要跳轉多個 塊兒，不管是對於開發過這個專案或者是接手但沒開發過該項目的人都不是很方便，...
vue3 0新特性記錄表（只記錄常用的）
使用composition api 組合式api 來呼叫內部方法,元件。例如 import from vue defindcomponent 定義元件 defindasynccomponent 方法 定義非同步元件方法 teleport 傳送 getcurrentinstance 獲取當前元件例項 ...