使用
import from 'vue'
(1)unref
判斷是否是ref物件,是返回ref物件.value值,不是返回引數本身
語法糖:val = isref(val) ? val.value : val
const xx=unref(x)
(2)readonly
接受乙個物件(reactive響應式或js純物件)或ref並返回原始物件的唯讀**
唯讀**是深層的:任何被訪問的巢狀屬性也是唯讀的。
使用ref的屬性都會被**自動解包
const copy = readonly(obj)
(3)shallowreadonly
為物件第一層屬性建立淺層唯讀響應式**,不會深層**,使用ref的屬性都不會被**自動解包
const x=shallowreactive(})
x.x是唯讀的
x.xx.***不是唯讀的
(4)shallowref
建立乙個ref,將會追蹤它的.value更改操作,但是並不會對變更後的.value做響應式**轉換(即變更不會呼叫reactive將新值進行轉換).
只對值是物件時有用,值為普通值更改後依舊為響應式的
更該物件屬性無法被偵聽器偵聽
const foo = shallowref({}) 會追蹤foo的變更
foo.value = {} 因為此時賦值了乙個新的物件,新物件不會變為響應式的,舊物件為響應式的
上面新賦的這個物件並不會變為響應式物件
isreactive(foo.value) false
(5)shallowreactive
為物件第一層屬性建立淺層響應式**,不會深層**,並且使用ref的屬性都不會被**自動解包
const x=shallowreactive(})
x.x是可**的
x.xx是不可**的
x.xx.***是非響應式
(6)toref
為乙個reactive物件的屬性建立乙個ref,並返回該ref,即可通過返回值和reactive物件操作屬性
可以建立返回乙個不存在的屬性
const x = reactive()
const y=toref(x,xx);
y.value和x.xx都可以操作xx屬性
使用toref(reactive,屬性),返回的內容會保持對其源屬性的響應式連線,即雙方修改都會相互影響
使用ref轉換reactive**物件的屬性則不會
(7)torefs
把乙個響應式物件轉換成普通物件,該普通物件的每個屬性都是乙個ref物件,返回的內容會保持對其源屬性的響應式連線,即雙方修改都會相互影響
const x = reactive()
const y=torefs(x);
y.xx.value和x.xx都可操控屬性
常用於解構賦值,使得元素不丟失響應性
const =torefs(reactive())
(8)toraw
返回由reactive或readonly方法轉換成響應式**的普通物件,是原始物件的引用,即修改會影響**物件
這是乙個「逃生艙」,可用於臨時讀取資料而無需承擔**訪問/跟蹤的開銷,也可用於寫入資料而避免觸發更改。
不建議保留對原始物件的持久引用。請謹慎使用。
const foo = {}
const reactivefoo = reactive(foo)
console.log(toraw(reactivefoo) === foo) true
(9)isref
檢查乙個引數是否為乙個 ref 物件。
(10)isproxy
檢查乙個物件是否是由reactive或者readonly方法建立的**。
(11)isreactive
檢查乙個物件是否是由reactive建立的響應式**
若reactive物件被readonly包裹,則也會返回true
isreactive(readonly(reactive({}))) true
(12)isreadonly
檢查乙個物件是否是由readonly建立的唯讀**。
(13)markraw
顯式標記乙個物件為「永遠不會轉為響應式**」,函式返回這個物件本身,淺層標記,對巢狀屬性無效。
即使在響應式物件中作屬性，也依然不是響應式的
const foo = markraw({})
console.log(isreactive(reactive(foo))) false
const bar = reactive()
console.log(isreactive(bar.foo)) false
若const obj3=markraw(}); obj3是不可**的,單獨的name是可**的
const obj4=reactive() obj4.obj3是可**的
即是淺層轉換,即當markraw物件的屬性有物件時,放到其他物件中,是可**的
(14)triggerref
手動執行triggerref(shallowref)執行與shallowref關聯的任何***,即手動設定,使得物件屬性的變化能夠被偵聽器偵聽
const foo = shallowref()
watcheffect(()=>)
watch(foo,function(),)
const clickhanlder=async function()
"./logo.png"
>
!<
/h1>}}
}"inc" ref=
'btn'
>clicked
} times.
<
/button>
for=
'(item,index) in 3'
:key=index :ref=
"el=>"
>
}<
/li>
<
/ul>
<
/div>
<
/template>
import
from
'vue'
const themesymbol =
symbol()
export
default
)const robj=
readonly
(obj)
;const divs =
ref(
)let timer;
const btn =
ref(
null);
console.
log(
unref
(normal));
const
inc=()
=>
onmounted((
)=>
)return}}
<
/script>
img
h1 <
/style>
手寫Vue3 0響應式原理
vue3.0 響應式原理 const toproxy new weakmap 放置的是 原物件 過的物件 防止多次 同乙個物件 const toraw new weakmap 放置的是 過的物件 原物件 防止 已經 過的物件 判斷是否為物件 function isobject val 判斷key是否...
Vue3 0 響應式系統（一）
vue3.0 對響應式系統模組進行重構，不再用object.defineproperty了，而是改用proxy。這樣做大體上有兩個好處，一是不用對陣列進行單獨處理了，去掉了vue.set 和 vue.delete介面，因為proxy可以對整個物件進行攔截操作。二是對原始物件資料變為響應式物件資料時不...
Vue3 0系列（Vue3 0是如何變快的 ）
來說一說為什麼performance 效能比vue 2.x快1.2 2倍 這裡先提供兩個 2.1 diff演算法優化 例子 我是段落 也就是說，vue3在渲染的時候，給會改變的元素新增了靜態標記 import from vue export function render ctx,cache,pro...