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

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 })

相关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

作用

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

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录大纲截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新

如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）

总结

• 对于框架原理只能说个大概，真的深入某一部分具体的代码和实现方式就只能写出一个框架，许多细节注意不到。

• 算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）

• 在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。

• 要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算

地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说**，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！

AI人工智能、Android移动开发、AIGC大模型、C C#、Go语言、Java、Linux运维、云计算、MySQL、PMP、网络安全、Python爬虫、UE5、UI设计、Unity3D、Web前端开发、产品经理、车载开发、大数据、鸿蒙、计算机网络、嵌入式物联网、软件测试、数据结构与算法、音视频开发、Flutter、IOS开发、PHP开发、.NET、安卓逆向、云计算