2024年最全Vue3进阶（贰）：Vue3 新特性_vue3 context(1)，2024年最新前端工程师面试题汇总

读者福利

========

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

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

用法一：

 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.$router);
function changeRouter() {
    //路由跳转
    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中

import router from './router'
import store from './store'

createApp(App).use(router).use(store).mount('#app')

组件使用：

<template>
   <div class="home">
      <h1>VUEX使用</h1>
      <div>原始值：{{num}}</div>
      <div>
        <button @click="add">增加</button>
        <button @click="decrement">减少</button>
      </div>
   </div>
</template>

<script>
import { computed } from "vue";
import { useStore } from "vuex";

export default {
#### 总结一下

面试前要精心做好准备，简历上写的知识点和原理都需要准备好，项目上多想想难点和亮点，这是面试时能和别人不一样的地方。

还有就是表现出自己的谦虚好学，以及对于未来持续进阶的规划，企业招人更偏爱稳定的人。



万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。

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

为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。

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



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



**前端面试题汇总**

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