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

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

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

ref和reactive的区别

---

ref是把值类型添加一层包装，使其变成响应式的引用类型的值。

reactive 则是引用类型的值变成响应式的值。

所以两者的区别只是在于是否需要添加一层引用包装

本质上

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

相关API

---

isReactive

作用

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

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

用法

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

console.log(isReactive(state)) // true

readonly

作用

声明一个只读的proxy

与const的区别

const: 赋值保护, 不能给变量重新赋值

readonly: 属性保护, 不能给属性重新赋值

用法

{{state.name}}

{{state.attr.age}}

<button @click=“myFn”>按钮

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 的响应性，但不执行嵌套对象的深度响应式转换 (暴露原始值)。

官网例子

当从合成函数返回响应式对象时，toRefs 非常有用，这样消费组件就可以在不丢失响应性的情况下对返回的对象进行分解/扩散：

{{ state.a }}

{{ state.attr.b }}

{{ state.attr.c.d }}

<button @click=“myFn”>按钮

let state = shallowReactive({

a: “a”,

attr: {

b: “b”,

c: {

d: “d”,

},

},

});

function myFn() {

state.attr.c.d=‘5’

console.log(state.attr.c.d); //5

// 点击按钮后页面没有变化

}

function myFn() {

state.a=‘5’

console.log(state.a); //5

// 点击按钮后页面变化

}

shallowReadonly

作用

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

{{state.name}}

{{state.attr.age}}

<button @click=“myFn”>按钮

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}

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。