傳送門
Vue3入門到精通-setup
Vue3入門到精通 --ref 以及 ref相關(guān)函數(shù)
Vue3入門到精通 - reactive 以及reactive相關(guān)函數(shù)
- 將引用類型數(shù)據(jù) -> 響應(yīng)式數(shù)據(jù) ===> 把值類型的數(shù)據(jù)包裝編程響應(yīng)式的引用類型的數(shù)據(jù)。
- 函數(shù)
- reactive 參數(shù)必須是對象（json/arr）
默認情況下修改對象，界面不會自動更新。
如果想更新全跨，可以通過重新賦值的方式。
- 本質(zhì):將傳入的數(shù)據(jù)包裝成一個Proxy對象。
用法
創(chuàng)建變量
案例一
import {reactive} from 'vue';
let state = reactive([1, 2, 3]);
console.log(state) // Proxy {0: 1, 1: 3, 2: 5}
!!!!
<p>{{state}}</p>
<button @click="myFn">按鈕</button>
let obj = [1, 2, 3];
let state = reactive(obj)
console.log(obj); // (3) [1, 2, 3]
console.log(state); // Proxy {0: 1, 1: 2, 2: 3}
// 頁面顯示是[1, 2, 3]
function myFn() {
state[3] = "zs";
console.log(obj); //(4) [1, 2, 3, "zs"]
console.log(state); //Proxy {0: 1, 1: 2, 2: 3, 3: "zs"}
// 點擊按鈕后
// 頁面顯示是[1, 2, 3, "zs"]
// 由此-》根據(jù)下標修改數(shù)據(jù)可以觸發(fā)頁面的更新
// 且 state的修改對原數(shù)據(jù)的修改有影響
}
function myFn() {
obj[3] = "ls";
console.log(obj); //(4) [1, 2, 3, "ls"]
console.log(state); //Proxy {0: 1, 1: 2, 2: 3, 3: "ls"}
// 點擊按鈕后
// 頁面顯示是[1, 2, 3]
// 且 原數(shù)據(jù)的修改對state的修改有影響
// 但是頁面不會觸發(fā)更新
}
function myFn() {
state = [4,5,6];
console.log(obj); //(3) [1, 2, 3]
console.log(state); //(3) [4, 5, 6]
// 點擊按鈕后
// 頁面顯示是[1, 2, 3]
// 直接對state進行修改不會觸發(fā)頁面的更新汁讼，但是上面對下標進行修改可以觸發(fā)頁面更新
// 同時這里直接進行復(fù)制，導(dǎo)致state不再是proxy
// 這里你可以使用
// Object.assign(state,[4,5,6])
// 這樣也可以 觸發(fā)頁面的更新阔墩，
// 這個方法在ajax請求之后進行賦值嘿架，很好用
}
案例2
import {reactive} from 'vue';
let state = reactive( { name: "zs", age: 19 });
// 這里不再贅述，效果和上面的Array一致
ref和reactive的卻別區(qū)別
ref是把值類型添加一層包裝啸箫，使其變成響應(yīng)式的引用類型的值耸彪。
reactive 則是引用類型的值變成響應(yīng)式的值。
所以兩者的區(qū)別只是在于是否需要添加一層引用包裝
本質(zhì)上
ref(0) --> reactive( { value:0 })
isReactive
作用
- 檢查對象是否是 reactive創(chuàng)建的響應(yīng)式 proxy忘苛。
其實內(nèi)部是判斷數(shù)據(jù)對象上是否包含__v_isRef 屬性并且其值為 true蝉娜。
用法
let state = reactive( { name: "zs", age: 19 });
console.log(isReactive(state)) // true
readonly
作用
其聲明一個只讀的proxy
與const的區(qū)別
const: 賦值保護, 不能給變量重新賦值
readonly: 屬性保護, 不能給屬性重新賦值
用法
<p>{{state.name}}</p>
<p>{{state.attr.age}}</p>
<button @click="myFn">按鈕</button>
let state = readonly({name:'syl', attr:{age:18}});
function myFn() {
state.name = 'zs';
state.attr.age = 19;
console.log(state); // proxy{name:'syl', attr:{age:18}}
console.log(isReadonly(state)); // true
// 變量無法更改
// 點擊按鈕后頁面沒有變化
}
isReadonly
作用
檢查對象是否是由readonly創(chuàng)建的只讀代理
shallowReactive
作用
創(chuàng)建一個響應(yīng)式代理，該代理跟蹤其自身 property 的響應(yīng)性扎唾，但不執(zhí)行嵌套對象的深度響應(yīng)式轉(zhuǎn)換 (暴露原始值)召川。
shallowReadonly
作用
用于創(chuàng)建一個只讀的數(shù)據(jù), 但是不是遞歸只讀的
<p>{{state.name}}</p>
<p>{{state.attr.age}}</p>
<button @click="myFn">按鈕</button>
let state = shallowReadonly({name:'syl', attr:{age:18}});
function myFn() {
state.attr.age = 19;
console.log(state.attr.age) // 19
// 點擊按鈕頁面沒有變化
}
function myFn() {
state.name = 'ls';
console.log(state.name) // syl
// 數(shù)據(jù)無法更改
// 點擊按鈕頁面沒有變化
}
toRaw
作用
從reactive 得到原始數(shù)據(jù)
用法
let obj = {name:'syl', age:18};
/*
ref/reactive數(shù)據(jù)每次修改都會被追蹤, 都會更新界面
但是當你不需要更新UI界面,
可以通過toRaw方法拿到它的原始數(shù)據(jù), 對原始數(shù)據(jù)進行修改
這樣就不會被追蹤不會更新界面,
*/
let state = reactive(obj);
let obj2 = toRaw(state);
console.log(obj === obj2); // true
function myFn() {
obj2.name = 'zs';
console.log(obj2); // {name: "zs", age: 18}
console.log(state); // {name: "zs", age: 18}
}
// 這個例子在上面出現(xiàn)過
