Vue3 響應(yīng)性基礎(chǔ) API

1、vue3 響應(yīng)性基礎(chǔ) api響應(yīng)性基礎(chǔ) api reactive 為什么有這個屬性了，其實(shí)我猜想是為了滿足不同團(tuán)隊的寫代碼風(fēng)格，由于有的團(tuán)隊可能喜愛如下方式： const x = 10; const y = 20; 有的團(tuán)隊則喜愛這種方式： const obj = x: 10, y: 20 而 reactive 則是為了滿足其次種狀況的團(tuán)隊，返回對象的響應(yīng)式副本，響應(yīng)式轉(zhuǎn)換是深層的，它會影響對象的屬性，返回的 proxy 是不等于原始對象的，所以我們建議用法 proxy ，避開依靠原始對象。 x - obj.x y - obj.y import reactive, from &39;vue&3

2、9; export default setup() const obj = reactive( x: 10, y: 20 ) return obj , readonly 按照英文單詞的字面就知道這個辦法代表只讀，可以將一個原始的對象，或者是響應(yīng)式對象，或者是 ref 返回的副本對象，我們知道響應(yīng)式轉(zhuǎn)換是深層的，會影響到深層屬性，所以對象的任何屬性都是只讀的： x - obj.x y - obj.y import reactive, readonly, watcheffect from &39;vue&39; export default setup() const obj = reactive

3、( x: 10, y: 20 ) const readonlyobj = readonly(obj) watcheffect() = console.log("用于追蹤 obj", obj.x) ) obj.x+ / 會舉行加法運(yùn)算 readonlyobj.x+ / 發(fā)生警告 return obj , isproxy 用于檢測對象是否被 reactive 或者readonly 創(chuàng)建的 proxy x - obj.x y - obj.y import reactive, readonly, watcheffect, isproxy, isreactive, isreadonl

4、y from &39;vue&39; export default setup() const obj = reactive( x: 10, y: 20 ) const readonlyobj = readonly(obj) watcheffect() = console.log("用于追蹤 obj", obj.x) ) console.log("isreadonly(obj)",isreadonly(obj), isreadonly(readonlyobj) console.log("isproxy(obj)", isproxy(o

5、bj), isproxy(readonlyobj) console.log("isreactive(obj)", isreactive(obj), isreactive(readonlyobj) obj.x+ / 會舉行加法運(yùn)算 readonlyobj.x+ / 發(fā)生警告 return obj , isreactive 檢測對象是否是 reactive 創(chuàng)建的響應(yīng)式對象： x - obj.x y - obj.y import reactive, readonly, watcheffect, isproxy, isreactive, isreadonly from &39;v

6、ue&39; export default setup() const obj = reactive( x: 10, y: 20 ) const readonlyobj = readonly(obj) watcheffect() = console.log("用于追蹤 obj", obj.x) ) console.log("isreadonly(obj)",isreadonly(obj), isreadonly(readonlyobj) console.log("isproxy(obj)", isproxy(obj), isproxy

7、(readonlyobj) console.log("isreactive(obj)", isreactive(obj), isreactive(readonlyobj) obj.x+ / 會舉行加法運(yùn)算 readonlyobj.x+ / 發(fā)生警告 return obj , isreadonly 檢測對象是否是 readonly 創(chuàng)建的只讀對象： console.log("isreadonly(obj)",isreadonly(obj), isreadonly(readonlyobj) toraw 返回 reactive 或者 readonly prox

8、y 的原始對象， const xt = const xy = reactive(xt) console.log("toraw=", toraw(xy) = xt) / true markraw 標(biāo)志一個對象，使其永久不會轉(zhuǎn)換為 proxy 響應(yīng)式對象： const foo = markraw() console.log(isreactive(reactive(foo) / false shallowreactive 創(chuàng)建一個響應(yīng)式 proxy，跟蹤其自身 property 的響應(yīng)性，但不執(zhí)行嵌套對象的深度響應(yīng)式轉(zhuǎn)換 (裸露原始值)。 const state = shallowreactive( foo: 1, nested: bar: 2 ) / 轉(zhuǎn)變狀態(tài)本身的性質(zhì)是響應(yīng)式的 state.foo+ / .但是不轉(zhuǎn)換嵌套對象 isreactive(state.nested) / false state.nested.bar+ / 非響應(yīng)式 shallowreadonly 創(chuàng)建一個 proxy，使其自身的 property 為只讀，但不執(zhí)行嵌套對象的深度只讀轉(zhuǎn)換 (裸露原始值)。 const state = shallowreadonly(