2024年Vue3进阶（贰）：Vue3 新特性_vue3 context(2)，15个经典面试问题及回答思路图片

最新推荐文章于 2024-05-14 11:33:23 发布

2401_84619467

最新推荐文章于 2024-05-14 11:33:23 发布

阅读量504

点赞数 12

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619467/article/details/138686166

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

最后

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等

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

前端视频资料：

文章目录

- 一、升级 Vue 3.0 项目

一、升级 Vue 3.0 项目

目前创建 Vue 3.0 项目需要通过插件升级的方式来实现，

vue-cli 暂时还未直接支持创建Vue3.0项目，首先我们进入项目目录，并输入以下指令：

cd vue-next-test
vue add vue-next

二、setup

setup() 函数是 vue3 中专门为组件提供的新属性。它为我们使用 vue3 的 Composition API 新特性提供了统一入口。

setup 函数会在 beforeCreate 之后、created 之前执行。

setup是一个新的组件选项，也是其他API的入口。也就是说，所有的操作都将在setup函数内部定义和执行， Vue3.0也将用函数代替Vue2.x的类也就是new Vue()。
setup 第一个参数是props,这里的props和Vue2.x中的props一致。
何时调用？setup是在一个组件实例被创建时，初始化了 props 之后调用，其实就是取代了Vue2.x的careted和beforeCreate。
setup返回一个对象，对象中的属性将直接暴露给模板渲染的上下文。而在Vue2.x中，定义的属性都会被Vue内部无条件暴露给模板渲染上下文。

2.1 接收 prop

 props: {
    p1: String,
  },
  setup(props, context) {
    console.log(props.p1);
    
  },

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发声变化");
       }
   }
);


### 文末

如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。所以花了基本上休息的时间，去不断的完善自己的知识体系，希望可以成为一个领域内的TOP。



同样是干到30岁，普通人写业务代码划水，榜样们深度学习拓宽视野晋升管理。

这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。



**269页《前端大厂面试宝典》**

包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。

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

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



**前端面试题汇总**

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



**JavaScript**

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



nvert/b98713ee557d94286de8afe404cb51d1.png)



**前端面试题汇总**

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



**JavaScript**

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

2401_84619467

关注

12
点赞
踩
17

收藏

觉得还不错? 一键收藏
0
评论
2024年Vue3进阶（贰）：Vue3 新特性_vue3 context(2)，15个经典面试问题及回答思路图片

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
复制链接

扫一扫