這種問題 是開放的 多說就是都是對的 可以講差異 也可以講新增 的知識點
比如說
一、常用的api特別好用
1. ref、toRefs、toRef、isRef
· ref 用于定義響應(yīng)式變量、快捷DOM訪問。
· 基本語法：const a = ref(1) // {value:1}
· 基礎(chǔ)使用： 一般用于定義 String、Number、Boolean 這種基于數(shù)據(jù)類型，外在表現(xiàn)統(tǒng)一使用 .value 訪問。
· 補充：ref 還可以訪問 DOM對象或者組件實例對象，可做DOM操作。
· toRef、toRefs 用于把一個object的變量，變成響應(yīng)式的變量。
· 基本語法：const msg = toRef(obj, key) // 把obj[key]變成響應(yīng)式的
· 基本語法：const { msg } = toRefs(obj) // 把整個obj都變成響應(yīng)式的
· unref 返回一個變量的值
· 基本語法：const x = unref(x) // 如果x是ref變量則返回x.value，如果x不是ref變量則直接返回x。
· isRef 用于判斷一個變量是不是ref響應(yīng)式變量
· 基本語法：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)化，只對對象的第一層進行proxy
· 基本語法：const obj = shallowRef({a:1,b:{c:{d:{e:2}}}})
· triggerRef 用于手動觸發(fā)那些shallowRef的變量進行更新視圖
· 基本語法：triggerRef(obj) // 當obj.value.b.c.d發(fā)生變化，triggerRef(obj) 強制更新視圖。
· customRef 自定義ref，把ref變量拆成get/set的寫法
· 基本語法：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ù)類型)
· 基本語法：const arr = reactive([]) // {value: []}
· ref和reactive是什么關(guān)系呢?ref背后是使用reactive來實現(xiàn)的。
· shallowReactive 用于性能優(yōu)化，只對對象的第一層進行proxy
· 基本語法：const c = shallowReactive({a:{b:{c:100}}}) // 只對這個對象的第一層進行proxy
· readonly 把響應(yīng)式變量變成“只讀的”，如果修改就報警告。
· 基本語法：const user = readonly({name:1,age:2})
· isReadonly 用于判斷一個變量是否是readonly的，返回布爾值
· 基本語法：const bol = isReadonly(x)
· isProxy 用于判斷一個變量是否是響應(yīng)式的，返回布爾值
· 基本語法：const bol = isProxy(x)
· isReactive 用于判斷一個變量是否是reactive響應(yīng)式變量，返回布爾值
· 基本語法：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攔截過', isProxy(user), isProxy(x), isProxy(y.b))
return user
}
1. toRaw、markRaw
· toRaw 用于返回一個響應(yīng)式變量的原始值
· 基本語法：const a3 = toRow(reactive(a1)) // a1===a3是true
· markRaw 用于把一個普通變量標記成“不可proxy”的
· 基本語法：const b2 = markRaw(b1) // b2是無法被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 用于對響應(yīng)式變量進行二次計算，當它依賴的響應(yīng)式變量發(fā)生變化時會重新計算
· 基本語法：const c = computed(()=>c1.value*c2.value) // 只讀
· 基本語法：const c = computed({get:()=>c1.value*c2.value,set:(newVal)=>c1.value=newVal}) // 可寫可讀
· watch 用于監(jiān)聽響應(yīng)式變量的變化，組件初始化它不執(zhí)行
· 基本語法：const stop = watch(x, (new,old)=>{}) // 調(diào)用stop()可以停止監(jiān)聽
· 基本語法：const stop = watch([x,y], ([newX,newY],[oldX,oldY])=>{})
· watchEffect 用于監(jiān)聽響應(yīng)式變量的變化，組件初始化會執(zhí)行
· 基本語法：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) // 只讀
// 可讀也可寫
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]]
}
二、也可以說亮點
1. 性能比vue2.x快1.2~2倍
2. 支持tree-shaking，按需編譯，體積比vue2.x更小
3. 支持組合API
4. 更好的支持TS
5. 更先進的組
3.更可以說性能
1.diff算法更快
vue2.0是需要全局去比較每個節(jié)點的，若發(fā)現(xiàn)有節(jié)點發(fā)生變化后，就去更新該節(jié)點
vue3.0是在創(chuàng)建虛擬dom中，會根據(jù)DOM的的內(nèi)容會不會發(fā)生內(nèi)容變化，添加靜態(tài)標記， 誰有flag!比較誰。
2、靜態(tài)提升
vue2中無論元素是否參與更新，每次都會重新創(chuàng)建，然后再渲染 vue3中對于不參與更新的元素，會做靜態(tài)提升，只被創(chuàng)建一次，在渲染時直接復(fù)用即可
3、事件偵聽緩存
默認情況下，onclick為動態(tài)綁定，所以每次都會追蹤它的變化，但是因為是同一函數(shù)，沒有必要追蹤變化，直接緩存復(fù)用即可
在之前會添加靜態(tài)標記8 會把點擊事件當做動態(tài)屬性 會進行diff算法比較， 但是在事件監(jiān)聽緩存之后就沒有靜態(tài)標記了，就會進行緩存復(fù)用
京公網(wǎng)安備 11010802030320號