刪除數(shù)據(jù)
抽取數(shù)據(jù)方法
添加數(shù)據(jù)
抽取添加數(shù)據(jù)
state沒有從外界傳遞即可
上面是在當(dāng)前文件引用刪除添加方法
現(xiàn)在新建刪除文件添加文件.js方式
rem.js
add.js
頁面使用
非組合api
data 中業(yè)務(wù)數(shù)據(jù)
mothods中新增業(yè)務(wù)邏輯
數(shù)據(jù)和業(yè)務(wù)邏輯是分散的
組合api：定義封裝好的具備獨(dú)立功能的函數(shù)功能組合放到一起
當(dāng)前的數(shù)據(jù)和當(dāng)前的業(yè)務(wù)邏輯放在一起了
option api ：vue2.0的api
compsition api 注入api主要是return的age 注入到data中琳彩，myFn2 注入到methods中
如下圖
混合使用
setup
this是undefined
異步 --頁面無數(shù)據(jù)
reactive
賦值一個(gè)基礎(chǔ)數(shù)據(jù)可以顯示但點(diǎn)擊后不可以更新數(shù)據(jù)
修改后---點(diǎn)擊后可以更新
ref
使用reactive
使用ref：如果直接改變age=666無效；應(yīng)該使用age.value=666即可
修改后
如果是通過ref創(chuàng)建的數(shù)據(jù)，那么在template中使用的時(shí)候不用通過.value來獲取因?yàn)関ue會自動(dòng)給我們添加.value
區(qū)別
判斷是ref還是reactive用isRef 和isReactive
遞歸監(jiān)聽
監(jiān)聽每一層級都監(jiān)聽耗費(fèi)性能解決辦法使用多級時(shí)使用非多級監(jiān)聽
使用reactive
使用ref
非遞歸監(jiān)聽 shallowReactive遂庄， shallowRef
只有第一層被監(jiān)聽
其它層不被監(jiān)聽
換成shallowRef的時(shí)候第一層也沒有被監(jiān)聽系吭；原因是監(jiān)聽的value變化
通過triggerRef 修改第n級的變化啡直，vue3 沒有提供triggerReactive的事件如果是reactive類型的數(shù)據(jù)箫柳，那么是無法主動(dòng)觸發(fā)界面更新的
如果myfn通過obj不能改變state頁面參數(shù) 讼育，即使用的是同一地址
如果想不修改頁面數(shù)據(jù)用toRaw
reactive
ref
markRaw如果永遠(yuǎn)都不想被追蹤
把obj改成響應(yīng)式數(shù)據(jù)用ref形式如下---ref相當(dāng)于復(fù)制
toRef---引用
ref：復(fù)制帐姻，修改響應(yīng)式數(shù)據(jù)不會影響以前的數(shù)據(jù)
toRef ：引用，修改響應(yīng)式數(shù)據(jù)會影響以前的數(shù)據(jù)
ref：數(shù)據(jù)發(fā)生改變奶段，界面會自動(dòng)改變
toRef：數(shù)據(jù)發(fā)生改變饥瓷，界面也不會自動(dòng)更新
toRef應(yīng)用場景：如果想讓響應(yīng)式數(shù)據(jù)和以前的數(shù)據(jù)關(guān)聯(lián)起來，并且更新響應(yīng)式數(shù)據(jù)之后還不想更新UI痹籍，那么就可以使用toRef
toRef只能一個(gè)屬性一個(gè)屬性改
如果想同時(shí)修改多個(gè)屬性可以使用toRefs
customRef
setup異步
使用同步的話使用自定義的
修改
如果想在setup里拿到聲明的box值可以放在onMounted里
vue3響應(yīng)式本質(zhì)
