2024年Web前端最全Vue3入门到精通--reactive以及reactive相关函数(2)，前端程序员进大厂面试必备基础技能

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

1. 冒泡排序
2. 选择排序
3. 快速排序
4. 二叉树查找: 最大值、最小值、固定值
5. 二叉树遍历
6. 二叉树的最大深度
7. 给予链表中的任一节点，把它删除掉
8. 链表倒叙
9. 如何判断一个单链表有环
10. 给定一个有序数组，找出两个数相加为一个目标数
    …
    

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

用法

---

创建变量

案例1

import {reactive} from ‘vue’;

let state = reactive([1, 2, 3]);

console.log(state) // Proxy {0: 1, 1: 3, 2: 5}

注意!!!

{{state}}

<button @click=“myFn”>按钮

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

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

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。