這種問(wèn)題 是開(kāi)放的 多說(shuō)就是都是對(duì)的 可以講差異 也可以講新增 的知識(shí)點(diǎn)

　　比如說(shuō)

　　一、常用的api特別好用

　　1. ref、toRefs、toRef、isRef

　　· ref 用于定義響應(yīng)式變量、快捷DOM訪問(wèn)。

　　· 基本語(yǔ)法：const a = ref(1) // {value:1}

　　· 基礎(chǔ)使用： 一般用于定義 String、Number、Boolean 這種基于數(shù)據(jù)類型，外在表現(xiàn)統(tǒng)一使用 .value 訪問(wèn)。

　　· 補(bǔ)充：ref 還可以訪問(wèn) DOM對(duì)象或者組件實(shí)例對(duì)象，可做DOM操作。

　　· toRef、toRefs 用于把一個(gè)object的變量，變成響應(yīng)式的變量。

　　· 基本語(yǔ)法：const msg = toRef(obj, key) // 把obj[key]變成響應(yīng)式的

　　· 基本語(yǔ)法：const { msg } = toRefs(obj) // 把整個(gè)obj都變成響應(yīng)式的

　　· unref 返回一個(gè)變量的值

　　· 基本語(yǔ)法：const x = unref(x) // 如果x是ref變量則返回x.value，如果x不是ref變量則直接返回x。

　　· isRef 用于判斷一個(gè)變量是不是ref響應(yīng)式變量

　　· 基本語(yǔ)法：const bol = isRef(x)

　　function useUpdBoxStyle() {

　　const el = ref(null)

　　const updateStyle = color => {

　　el.value.style.color = color

　　}

　　return [el, updateStyle]

　　}

　　1. shallowRef、triggerRef

　　· shallowRef 用于性能優(yōu)化，只對(duì)對(duì)象的第一層進(jìn)行proxy

　　· 基本語(yǔ)法：const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})

　　· triggerRef 用于手動(dòng)觸發(fā)那些shallowRef的變量進(jìn)行更新視圖

　　· 基本語(yǔ)法：triggerRef(obj) // 當(dāng)obj.value.b.c.d發(fā)生變化，triggerRef(obj) 強(qiáng)制更新視圖。

　　· customRef 自定義ref，把ref變量拆成get/set的寫(xiě)法

　　· 基本語(yǔ)法：customRef((track, trigger) =>({get,set})

　　function useObj() {

　　const obj = { a: 1, b: { c: { d: 2 }}}

　　const obj1 = ref(obj)

　　const obj2 = shallowRef(obj)

　　// console.log('obj1', obj1)

　　// console.log('obj2', obj2)

　　const changeObj = (obj, newD) => {

　　// obj1.value.b.c.d = 100

　　obj.value.b.c.d = newD

　　triggerRef(obj)

　　}

　　return [[obj1, obj2], changeObj]

　　}

　　1. reactive、readonly

　　· reactive 用于定義響應(yīng)式變量(引用數(shù)據(jù)類型)

　　· 基本語(yǔ)法：const arr = reactive([]) // {value: []}

　　· ref和reactive是什么關(guān)系呢?ref背后是使用reactive來(lái)實(shí)現(xiàn)的。

　　· shallowReactive 用于性能優(yōu)化，只對(duì)對(duì)象的第一層進(jìn)行proxy

　　· 基本語(yǔ)法：const c = shallowReactive({a:{b:{c:100}}}) // 只對(duì)這個(gè)對(duì)象的第一層進(jìn)行proxy

　　· readonly 把響應(yīng)式變量變成“只讀的”，如果修改就報(bào)警告。

　　· 基本語(yǔ)法：const user = readonly({name:1,age:2})

　　· isReadonly 用于判斷一個(gè)變量是否是readonly的，返回布爾值

　　· 基本語(yǔ)法：const bol = isReadonly(x)

　　· isProxy 用于判斷一個(gè)變量是否是響應(yīng)式的，返回布爾值

　　· 基本語(yǔ)法：const bol = isProxy(x)

　　· isReactive 用于判斷一個(gè)變量是否是reactive響應(yīng)式變量，返回布爾值

　　· 基本語(yǔ)法：const bol = isReactive(x)

　　function useUser() {

　　const user = readonly(reactive({name:'list',age:30}))

　　console.log('user', user)

　　// setTimeout(()=>user.age=40, 2000)

　　const x = 1

　　const y = readonly({a:1,b:{c:3}})

　　console.log('是否被proxy攔截過(guò)', isProxy(user), isProxy(x), isProxy(y.b))

　　return user

　　}

　　1. toRaw、markRaw

　　· toRaw 用于返回一個(gè)響應(yīng)式變量的原始值

　　· 基本語(yǔ)法：const a3 = toRow(reactive(a1)) // a1===a3是true

　　· markRaw 用于把一個(gè)普通變量標(biāo)記成“不可proxy”的

　　· 基本語(yǔ)法：const b2 = markRaw(b1) // b2是無(wú)法被reactive的

　　function useRaw() {

　　const a1 = { title: 100 }

　　const a2 = reactive(a1)

　　const a3 = toRaw(a2)

　　console.log('toRow(a2)===a1', a3===a1)

　　console.log('a2===a1', a2===a1)

　　return [a1,a2,a3]

　　}

　　1. computed、watch、watchEffect

　　· computed 用于對(duì)響應(yīng)式變量進(jìn)行二次計(jì)算，當(dāng)它依賴的響應(yīng)式變量發(fā)生變化時(shí)會(huì)重新計(jì)算

　　· 基本語(yǔ)法：const c = computed(()=>c1.value*c2.value) // 只讀

　　· 基本語(yǔ)法：const c = computed({get:()=>c1.value*c2.value,set:(newVal)=>c1.value=newVal}) // 可寫(xiě)可讀

　　· watch 用于監(jiān)聽(tīng)響應(yīng)式變量的變化，組件初始化它不執(zhí)行

　　· 基本語(yǔ)法：const stop = watch(x, (new,old)=>{}) // 調(diào)用stop()可以停止監(jiān)聽(tīng)

　　· 基本語(yǔ)法：const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{})

　　· watchEffect 用于監(jiān)聽(tīng)響應(yīng)式變量的變化，組件初始化會(huì)執(zhí)行

　　· 基本語(yǔ)法：const stop = watchEffect(()=>ajax({cate,page,size}))

　　export default function useWatchComputed() {

　　const c1 = ref(10)

　　const c2 = ref(20)

　　const c3 = computed(()=>c1.value*c2.value) // 只讀

　　// 可讀也可寫(xiě)

　　const c4 = computed({

　　get: ()=>c1.value*c2.value,

　　set: (newVal)=>{

　　c1.value = parseInt(newVal) / c2.value

　　}

　　})

　　const stop1 = watch(c4, (newC4, oldC4)=>console.log('c4變了', newC4, oldC4))

　　const stop2 = watch([c1,c2], ([newC1,newC2],[oldC1,oldC2])=>{

　　console.log('[c1,c2] 新值：', [newC1, newC2])

　　console.log('[c1,c2] 舊值：', [oldC1, oldC2])

　　})

　　const stop3 = watchEffect(()=>{console.log('watch effect', c1.value, c2.value)})

　　const update = (c,v) => c.value = v

　　return [[c1,c2,c3,c4],[stop1,stop2,stop3,update]]

　　}

　　二、也可以說(shuō)亮點(diǎn)

　　1. 性能比vue2.x快1.2~2倍

　　2. 支持tree-shaking，按需編譯，體積比vue2.x更小

　　3. 支持組合API

　　4. 更好的支持TS

　　5. 更先進(jìn)的組

　　3.更可以說(shuō)性能

　　1.diff算法更快

　　vue2.0是需要全局去比較每個(gè)節(jié)點(diǎn)的，若發(fā)現(xiàn)有節(jié)點(diǎn)發(fā)生變化后，就去更新該節(jié)點(diǎn)

　　vue3.0是在創(chuàng)建虛擬dom中，會(huì)根據(jù)DOM的的內(nèi)容會(huì)不會(huì)發(fā)生內(nèi)容變化，添加靜態(tài)標(biāo)記， 誰(shuí)有flag!比較誰(shuí)。

　　2、靜態(tài)提升

　　vue2中無(wú)論元素是否參與更新，每次都會(huì)重新創(chuàng)建，然后再渲染 vue3中對(duì)于不參與更新的元素，會(huì)做靜態(tài)提升，只被創(chuàng)建一次，在渲染時(shí)直接復(fù)用即可

　　3、事件偵聽(tīng)緩存

　　默認(rèn)情況下，onclick為動(dòng)態(tài)綁定，所以每次都會(huì)追蹤它的變化，但是因?yàn)槭峭缓瘮?shù)，沒(méi)有必要追蹤變化，直接緩存復(fù)用即可

　　在之前會(huì)添加靜態(tài)標(biāo)記8 會(huì)把點(diǎn)擊事件當(dāng)做動(dòng)態(tài)屬性 會(huì)進(jìn)行diff算法比較， 但是在事件監(jiān)聽(tīng)緩存之后就沒(méi)有靜態(tài)標(biāo)記了，就會(huì)進(jìn)行緩存復(fù)用