2024年最全Vue3进阶（贰）：Vue3 新特性_vue3 context，2024年最新高级web前端面试题

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

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

#### 2.2 context


`setup` 函数的第二个形参是一个上下文对象，这个上下文对象中包含了一些有用的属性，这些属性在 `vue 2.x` 中需要通过 `this` 才能访问到，在 `vue 3.x` 中，它们的访问方式如下：

const MyComponent = {
setup(props, context) {
context.attrs
context.slots
context.parent
context.root
context.emit
context.refs
}
}

#### 2.3 computed


计算值的行为跟计算属性 (`computed property`) 一样：只有当依赖变化的时候它才会被重新计算。类型某`act`的`useCallback useMemo`。


`computed()` 返回的是一个包装对象，它可以和普通的包装对象一样在 `setup()` 中被返回 ，也一样会在渲染上下文中被自动展开。


用法一：

setup() {
const num = ref(0);
const get_num = computed(() => num.value + “计算属性”);
return {
num,
get_num,
};
},

用法二：

// 创建一个 ref 响应式数据
const count = ref(1)

// 创建一个 computed 计算属性
const plusOne = computed({
// 取值函数
get: () => count.value + 1,
// 赋值函数
set: val => {
count.value = val - 1
}
})

// 为计算属性赋值的操作，会触发 set 函数
plusOne.value = 9
// 触发 set 函数后，count 的值会被更新
console.log(count.value) // 输出 8

### 三、计算属性与数据监听

import { ref, computed, watch, watchEffect } from “vue”;
export default {
setup() {
const count = ref(0);
const doubleCount = computed(() => {
return count.value * 5;
});
watch(
() => count.value,
(val, oldVal) => {
console.log(count is ${val});
},
{
//是否深度监听
deep: true,
//是否先执行一次
immediate: true
}
);
function add() {
count.value++;
}

    return {
        count,
        add,
        doubleCount
    };
}

};

计算属性 `computed` 是一个方法，里面需要包含一个回调函数，当访问计算属性返回结果时，会自动获取回调函数的值。


监听器 `watch` 同样是一个方法，它包含 3个参数，前两个参数都是 `function`，第三个参数为是否设置深度监听等。


第一个参数是监听的值，`count.value` 表示当 `count.value` 发生变化就会触发监听器的回调函数，即第二个参数，第二个参数可以执行监听时候的回调。


如果是2 个以上的监听属性，

watch(
[() => count.value, () => name.value],
//接收两个参数，第一个是新值在数组中，第二个是旧值也是在数组中
([count, name], [oldCount, oldName]) => {
console.log(count, name);
console.log(oldCount, oldName);
if (count != oldCount) {
console.log(“count发声变化”);
}
if (name != oldName) {
console.log(“name发声变化”);
}
}
);

### 四、获取路由

//获取当前组件实例
const vue = getCurrentInstance();
//获取当前上下文
const { ctx } = getCurrentInstance();
//获取路由信息
console.log(ctx.KaTeX parse error: Expected '}', got 'EOF' at end of input: …//路由跳转 ctx.router.push(“/about”);
}

### 五、生命周期


`2.x`生命周期选项和`Composition API`之间的映射



> 
> * `beforeCreate` ->使用 `setup()`
> * `created` ->使用 `setup()`
> * `beforeMount` -> `onBeforeMount`
> * `mounted` -> `onMounted`
> * `beforeUpdate` -> `onBeforeUpdate`
> * `updated` -> `onUpdated`
> * `beforeDestroy` -> `onBeforeUnmount`
> * `destroyed` -> `onUnmounted`
> * `errorCaptured` -> `onErrorCaptured`
> 
> 
> 


### 六、Vuex 简单应用

import Vuex from ‘vuex’

export default Vuex.createStore({
state: {
num: 1,
},
mutations: {
add(state, value) {
console.log(value)
state.num++
},
decrement(state, value) {
console.log(value)
state.num–
}
},
actions: {
},
modules: {
}
});

挂载到`Vue`中


### 最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~



祝大家都能收获大厂offer~

> **[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

**篇幅有限，仅展示部分内容**

![](https://img-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)



mg-blog.csdnimg.cn/img_convert/ac0b1c2376da47d727e0dc8a77e76478.png)



![](https://img-blog.csdnimg.cn/img_convert/b871b45fb2e6d5442144c863cbcff965.png)

![](https://img-blog.csdnimg.cn/img_convert/f5c18f4b2878302f1f53a8c393e7eb0d.png)