? ? ? ?據(jù) vue 作者尤雨溪去年發(fā)布的 vue 3.0 正式版本發(fā)布以來一直沒時間看澜躺，今天就來體驗一下vue 3.0 。圍繞右大大最新發(fā)布的?vue-compisition-api，來講解大家最關(guān)心的劈猿、同時也是 vue 3.0 最重要的一些新特性仇矾，例如?setup()?函數(shù)、reactive()拍棕、ref()?等這些 Vue Hooks晓铆。
一、首先你要有一定的基礎(chǔ)
1.了解常見的 ES6 新特性
ES6 的導入導出語法绰播、解構(gòu)賦值骄噪、箭頭函數(shù)等等...
2.了解 vue 2.x 的基本使用
組件使用、常用的指令蠢箩、生命周期函數(shù)链蕊、computed事甜、watch、ref 等...
二滔韵、setup()?函數(shù)
setup()?函數(shù)是 vue3 中逻谦，專門為組件提供的新屬性。它為我們使用 vue3 的?Composition API?新特性提供了統(tǒng)一的入口奏属。
setup?函數(shù)會在?beforeCreate?之后跨跨、created?之前執(zhí)行、接收props
1.在?props?中定義當前組件允許外界傳遞過來的參數(shù)名稱：props: { p1: String}
2.通過?setup?函數(shù)的第一個形參囱皿，接收?props?數(shù)據(jù)：setup(props) { console.log(props.p1)}
注??:在?setup()?函數(shù)中無法訪問到?this
三勇婴、?reactive
reactive()函數(shù)接收一個普通對象，返回一個響應式的數(shù)據(jù)對象
setup() { const state = reactive({count: 0}) // setup 函數(shù)中將響應式數(shù)據(jù)對象 return 出去嘱腥，
供 template 使用 return state
}
四耕渴、ref
ref()?函數(shù)用來根據(jù)給定的值創(chuàng)建一個響應式的數(shù)據(jù)對象，ref()?函數(shù)調(diào)用的返回值是一個對象齿兔，這個對象上只包含一個?.value?屬性：
// 創(chuàng)建響應式數(shù)據(jù)對象 num橱脸，初始值為 0
const num = ref(0)// 如果要訪問 ref() 創(chuàng)建出來的響應式數(shù)據(jù)對象的值，必須通過 .value 屬性才可以console.log(num.value) // 輸出 0// 讓 num 的值 +1 num.value++// 再次打印 num 的值console.log(num.value) // 輸出 1
五分苇、isRef
isRef()?用來判斷某個值是否為?ref()?創(chuàng)建出來的對象添诉；應用場景：當需要展開某個可能為?ref()?創(chuàng)建出來的值的時候，例如：
import { isRef } from '@vue/composition-api'
const boolean = isRef(type) ? type.value : type
六医寿、?toRef
toRefs()?函數(shù)可以將?reactive()?創(chuàng)建出來的響應式對象栏赴，轉(zhuǎn)換為普通的對象，只不過靖秩，這個對象上的每個屬性節(jié)點须眷，都是?ref()?類型的響應式數(shù)據(jù)，如下：
import { toRefs } from '@vue/composition-api'
setup() { // 定義響應式數(shù)據(jù)對象
?const state = reactive({ count: 0 }) // 定義頁面上可用的事件處理函數(shù)?
?const increment = () => { state.count++ } // 在 setup 中返回一個對象供頁面使用 // 這個對象中可以包含響應式的數(shù)據(jù)沟突，也可以包含事件處理函數(shù)
?return { // 將 state 上的每個屬性花颗，都轉(zhuǎn)化為 ref 形式的響應式數(shù)據(jù) ...toRefs(state), // 自增的事件處理函數(shù)? ? ? ? increment
? ? }
}
七、computed
computed()?用來創(chuàng)建計算屬性惠拭，computed()?函數(shù)的返回值是一個?ref?的實例扩劝。使用?computed?之前需要按需導入,如下:
// 創(chuàng)建一個 ref 響應式數(shù)據(jù)
const count = ref(0)? // 根據(jù) count 的值，創(chuàng)建一個響應式的計算屬性 add// 它會根據(jù)依賴的 ref 自動計算并返回一個新的 ref?
const add = computed(() => count.value + 1)
console.log(add.value) // 輸出 2
? add.value++ //報錯 error
八职辅、watch
1.watch()?函數(shù)用來監(jiān)視某些數(shù)據(jù)項的變化今野，從而觸發(fā)某些特定的操作，使用之前需要按需導入：
import { watch } from '@vue/composition-api'
const count = ref(0)
/ /定義 watch罐农，只要 count 值變化条霜，就會觸發(fā) watch 回調(diào)
// watch 會在創(chuàng)建時會自動調(diào)用一次
watch(() => console.log(count.value))// 輸出 0
setTimeout(() => { count.value++ // 輸出 1}, 1000)
2.監(jiān)聽多個數(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)建的時候，不執(zhí)行回調(diào)函數(shù)中的代碼?
?})
setTimeout(() => { state.count++ state.name = 'ls'}, 1000)
好了,就先擼到這里吧.還有很多新到特效可以參考官網(wǎng)
例如:瞬間移動組件 <teleport/>
? ? ? ? 異步組件 <suspense/>等
簡單的總結(jié)2句吧:
vue3.0? 六大亮點
????1.性能比2.0提升快1.2-2倍
????2.按需編譯,體積比2.0更小了
????3.組合大api
????4.更好的ts支持
????5.暴露自定義渲染api
????6.更先進的組件
那么右大大是怎么讓如何變快的呢????
? ?1.diff方法的優(yōu)化
? ?2.histsatis 靜態(tài)提升
? ?3.cacheHandlers事件偵探器緩存
? ?4.ssr服務(wù)端渲染
