? ? ? ?據(jù) vue 作者尤雨溪去年發(fā)布的 vue 3.0 正式版本發(fā)布以來(lái)一直沒(méi)時(shí)間看，今天就來(lái)體驗(yàn)一下vue 3.0 。圍繞右大大最新發(fā)布的?vue-compisition-api，來(lái)講解大家最關(guān)心的、同時(shí)也是 vue 3.0 最重要的一些新特性，例如?setup()?函數(shù)、reactive()、ref()?等這些 Vue Hooks。
一、首先你要有一定的基礎(chǔ)
1.了解常見(jiàn)的 ES6 新特性
ES6 的導(dǎo)入導(dǎo)出語(yǔ)法、解構(gòu)賦值、箭頭函數(shù)等等...
2.了解 vue 2.x 的基本使用
組件使用、常用的指令、生命周期函數(shù)、computed、watch、ref 等...
二、setup()?函數(shù)
setup()?函數(shù)是 vue3 中，專門為組件提供的新屬性。它為我們使用 vue3 的?Composition API?新特性提供了統(tǒng)一的入口。
setup?函數(shù)會(huì)在?beforeCreate?之后、created?之前執(zhí)行、接收props
1.在?props?中定義當(dāng)前組件允許外界傳遞過(guò)來(lái)的參數(shù)名稱：props: { p1: String}
2.通過(guò)?setup?函數(shù)的第一個(gè)形參，接收?props?數(shù)據(jù)：setup(props) { console.log(props.p1)}
注??:在?setup()?函數(shù)中無(wú)法訪問(wèn)到?this
三、?reactive
reactive()函數(shù)接收一個(gè)普通對(duì)象，返回一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象
setup() { const state = reactive({count: 0}) // setup 函數(shù)中將響應(yīng)式數(shù)據(jù)對(duì)象 return 出去，
供 template 使用 return state
}
四、ref
ref()?函數(shù)用來(lái)根據(jù)給定的值創(chuàng)建一個(gè)響應(yīng)式的數(shù)據(jù)對(duì)象，ref()?函數(shù)調(diào)用的返回值是一個(gè)對(duì)象，這個(gè)對(duì)象上只包含一個(gè)?.value?屬性：
// 創(chuàng)建響應(yīng)式數(shù)據(jù)對(duì)象 num，初始值為 0
const num = ref(0)// 如果要訪問(wèn) ref() 創(chuàng)建出來(lái)的響應(yīng)式數(shù)據(jù)對(duì)象的值，必須通過(guò) .value 屬性才可以console.log(num.value) // 輸出 0// 讓 num 的值 +1 num.value++// 再次打印 num 的值console.log(num.value) // 輸出 1
五、isRef
isRef()?用來(lái)判斷某個(gè)值是否為?ref()?創(chuàng)建出來(lái)的對(duì)象；應(yīng)用場(chǎng)景：當(dāng)需要展開(kāi)某個(gè)可能為?ref()?創(chuàng)建出來(lái)的值的時(shí)候，例如：
import { isRef } from '@vue/composition-api'
const boolean = isRef(type) ? type.value : type
六、?toRef
toRefs()?函數(shù)可以將?reactive()?創(chuàng)建出來(lái)的響應(yīng)式對(duì)象，轉(zhuǎn)換為普通的對(duì)象，只不過(guò)，這個(gè)對(duì)象上的每個(gè)屬性節(jié)點(diǎn)，都是?ref()?類型的響應(yīng)式數(shù)據(jù)，如下：
import { toRefs } from '@vue/composition-api'
setup() { // 定義響應(yīng)式數(shù)據(jù)對(duì)象
?const state = reactive({ count: 0 }) // 定義頁(yè)面上可用的事件處理函數(shù)?
?const increment = () => { state.count++ } // 在 setup 中返回一個(gè)對(duì)象供頁(yè)面使用 // 這個(gè)對(duì)象中可以包含響應(yīng)式的數(shù)據(jù)，也可以包含事件處理函數(shù)
?return { // 將 state 上的每個(gè)屬性，都轉(zhuǎn)化為 ref 形式的響應(yīng)式數(shù)據(jù) ...toRefs(state), // 自增的事件處理函數(shù)? ? ? ? increment
? ? }
}
七、computed
computed()?用來(lái)創(chuàng)建計(jì)算屬性，computed()?函數(shù)的返回值是一個(gè)?ref?的實(shí)例。使用?computed?之前需要按需導(dǎo)入,如下:
// 創(chuàng)建一個(gè) ref 響應(yīng)式數(shù)據(jù)
const count = ref(0)? // 根據(jù) count 的值，創(chuàng)建一個(gè)響應(yīng)式的計(jì)算屬性 add// 它會(huì)根據(jù)依賴的 ref 自動(dòng)計(jì)算并返回一個(gè)新的 ref?
const add = computed(() => count.value + 1)
console.log(add.value) // 輸出 2
? add.value++ //報(bào)錯(cuò) error
八、watch
1.watch()?函數(shù)用來(lái)監(jiān)視某些數(shù)據(jù)項(xiàng)的變化，從而觸發(fā)某些特定的操作，使用之前需要按需導(dǎo)入：
import { watch } from '@vue/composition-api'
const count = ref(0)
/ /定義 watch，只要 count 值變化，就會(huì)觸發(fā) watch 回調(diào)
// watch 會(huì)在創(chuàng)建時(shí)會(huì)自動(dòng)調(diào)用一次
watch(() => console.log(count.value))// 輸出 0
setTimeout(() => { count.value++ // 輸出 1}, 1000)
2.監(jiān)聽(tīng)多個(gè)數(shù)據(jù)源
const state = reactive({ count: 0, name: 'aaaa' })
watch( [() => state.count, () => state.name], // Object.values(toRefs(state)),?
?([count,name],[prevCount,prevName]) => { console.log(count) // 新的 count 值?
?console.log(name) // 新的 name 值?
?console.log(prevCount) // 舊的 count 值?
?console.log(prevName) // 新的 name 值 },?
?{ lazy: true // 在 watch 被創(chuàng)建的時(shí)候，不執(zhí)行回調(diào)函數(shù)中的代碼?
?})
setTimeout(() => { state.count++ state.name = 'ls'}, 1000)
好了,就先擼到這里吧.還有很多新到特效可以參考官網(wǎng)
例如:瞬間移動(dòng)組件 <teleport/>
? ? ? ? 異步組件 <suspense/>等
簡(jiǎn)單的總結(jié)2句吧:
vue3.0? 六大亮點(diǎn)
????1.性能比2.0提升快1.2-2倍
????2.按需編譯,體積比2.0更小了
????3.組合大api
????4.更好的ts支持
????5.暴露自定義渲染api
????6.更先進(jìn)的組件
那么右大大是怎么讓如何變快的呢????
? ?1.diff方法的優(yōu)化
? ?2.histsatis 靜態(tài)提升
? ?3.cacheHandlers事件偵探器緩存
? ?4.ssr服務(wù)端渲染
