Vue3入门到精通 - reactive 以及reactive相

传送门

Vue3入门到精通-setup
Vue3入门到精通 --ref 以及 ref相关函数

Vue3入门到精通 - reactive 以及reactive相关函数

• 将引用类型数据 -> 响应式数据 ===> 把值类型的数据包装编程响应式的引用类型的数据。
• 函数
• reactive 参数必须是对象（json/arr）

默认情况下修改对象，界面不会自动更新。
如果想更新，可以通过重新赋值的方式。

• 本质:将传入的数据包装成一个Proxy对象。

用法

创建变量

案例一

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"]
    // 由此-》根据下标修改数据可以触发页面的更新
    // 且 state的修改对原数据的修改有影响
}

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]
    // 且 原数据的修改对state的修改有影响
    //  但是页面不会触发更新
}

function myFn() {
    state = [4,5,6];
    console.log(obj);   //(3) [1, 2, 3]
    console.log(state); //(3) [4, 5, 6]
    // 点击按钮后
    // 页面显示是[1, 2, 3]
    // 直接对state进行修改不会触发页面的更新，但是上面对下标进行修改可以触发页面更新
    //  同时这里直接进行复制，导致state不再是proxy
    
    // 这里你可以使用
    //  Object.assign(state,[4,5,6])
    // 这样也可以 触发页面的更新，
    // 这个方法在ajax请求之后进行赋值，很好用
}

案例2

import {reactive} from 'vue';

let state = reactive( { name: "zs", age: 19 });


// 这里不再赘述，效果和上面的Array一致

ref和reactive的却别区别

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。
reactive 则是引用类型的值变成响应式的值。
所以两者的区别只是在于是否需要添加一层引用包装

本质上

ref(0) --> reactive( { value:0 })

isReactive

作用

• 检查对象是否是 reactive创建的响应式 proxy。

其实内部是判断数据对象上是否包含__v_isRef 属性并且其值为 true。

用法

let state = reactive( { name: "zs", age: 19 });
console.log(isReactive(state)) // true

readonly

作用

其声明一个只读的proxy

与const的区别

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创建的只读代理

shallowReactive

作用

创建一个响应式代理，该代理跟踪其自身 property 的响应性，但不执行嵌套对象的深度响应式转换 (暴露原始值)。

shallowReadonly

作用

用于创建一个只读的数据, 但是不是递归只读的

<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
    // 数据无法更改
    // 点击按钮页面没有变化
}

toRaw

作用

从reactive 得到原始数据

用法

let obj = {name:'syl', age:18};
/*
ref/reactive数据每次修改都会被追踪, 都会更新界面
但是当你不需要更新UI界面, 
可以通过toRaw方法拿到它的原始数据, 对原始数据进行修改
这样就不会被追踪不会更新界面,
*/
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}
}
 // 这个例子在上面出现过