Web前端最全Vue3的学习记录，腾讯&字节&网易&华为前端面试题分享

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

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

}).$mount(‘#app’)

// v3 创建

import { createApp } from ‘vue’

import App from ‘./App.vue’

var app = createApp(App);

app.mount(‘#app’)

在"app"之间共享配置的一种方式是工厂模式：

import { createApp } from ‘vue’

import App1 from ‘./App1.vue’

import App2 from ‘./App2.vue’

const createMyApp = options => {

const app = createApp(options)

app.directive(‘focus’ /* … */)

return app

}

createMyApp(App1).mount(‘#foo’)

createMyApp(App2).mount(‘#bar’)

v3将可以全局改变Vue行为的API从原来的Vue构造函数上转移到了实例上了。列表如下

除此之外，还有一些全局API和内部组件都做了重构，考虑到tree-shaking，只能通过ES模块的方式导入，意味着当你的应用程序中没用到的组件和接口都不会被打包。受影响的API列表如下：

• Vue.nextTick

• Vue.observable (用 Vue.reactive 替换)

• Vue.version

• Vue.compile (仅全构建)

• Vue.set (仅兼容构建)

• Vue.delete (仅兼容构建)

// 错误使用

import Vue from ‘vue’

Vue.nextTick(() => {

// 一些和DOM有关的东西

})

// 正确使用

import { nextTick } from ‘vue’

nextTick(() => {

// 一些和DOM有关的东西

})

1. 组合式API

---

重头戏！！！

这是v3中的新概念，vue给我们提供了一些新的api，这些新的api在一个地方使用，而这个地方就是vue给我们新提供了一个从组件初始化到销毁的过程中我们能够做一些事情的地方，我将之理解为钩子函数——Setup,在Setup里，你可以做原本你能在vue组件里面能做的所有事情，比如你在created,mounted，computed，watch,methods 里面做的所有事情，都能在Setup里面完成，那要怎么才能做到呢，就是要通过vue提供的那些新的API。那这个东西主要解决什么事情呢？我们都知道组件的作用就是对功能的提取以及代码的复用。这使得我们的程序在灵活性和可维护性上能走的更远，但是这还不够，当一个组件内部的逻辑很复杂的时候，我们将逻辑分别散落在 created,mounted,methods，computed，watch里面，然后整个文件代码长达好几百行。这对于没有编写这个组件的人来说，尝试去理解这些逻辑代码无疑是最头疼的事情。而Setup正是解决了这个事情，将所有的逻辑都集中起来在Setup中处理。从今以后，当你想制造一辆汽车的时候，你再也不用去全世界进口各种零件，你在Setup工厂中就能完成。让我们来见识一下Setup和那些新的API的使用以及作用(听说这种东西才被称之为干货？？？)：

Setup

如果你听懂了我上面所说的，那我开局这么写你应该也能理解了：

// 当运行起来打印了run

Setup可以返回一个对象，你可以在组件的其他地方访问这个对象中的属性。

“

注意：在执行Setup的时候尚未创建组件实例，所以在Setup中没有this。不过它提供了两个接收参数——props和context。在Setup中无法访问组件中其他的任何属性。

”

// 调用Demo组件

// Demo 组件

我们会发现试图并没有更新，我们发现setup返回的对象不是响应式的，响应式我们应该不陌生，在data()选项中的property都是响应式的，那是应为Vue在组件初始化的过程中就已经对data()中的property创建了依赖关系。所以当property发生变化时，视图即会自动更新，这就是响应式。那怎么让它变成响应式的呢？

ref & reactive

我们可以通过ref,reactive创建响应式状态,

我们使用ref可以创建基础数据类型和复杂数据类型的响应式状态，使用reactive只能创建复杂数据类型的响应式状态,如果使用创建数据类型不正确，控制台会给出对应的警告value cannot be made reactive: **。那ref和reactive的区别到底在哪里呢？

const refNum = ref(10);

const refObj = ref({

name:‘jac’,

age:20

});

const reactiveNum = reactive(10);

const reactiveObj = reactive({

name: ‘jac’,

age: 20

})

console.log(‘refNum’,refNum);

console.log(‘refObj’,refObj);

console.log(‘reactiveNum’, reactiveNum);

console.log(‘reactiveObj’, reactiveObj);

结果如下：

当ref创建的是复杂数据类型的时候内部其实也是用reactive创建的。所以ref也是可以创建复杂数据类型的响应状态的，只是在setup中写法会有所不同。

setup(){

const refObj = ref({

name:‘jac’,

age:20

});

const reactiveObj = reactive({

name: ‘jac’,

age: 20

})

// ref 方式的更新

const changeRefObj = () => {

refObj.value.name=“mac”

}

// reactive 方式的更新

const changeReactiveObj = () => {

reactiveObj.name = ‘mac’

}

return {

…

}

}

“

注意：通过ref对值进行了包裹，在Setup中你需要使用变量.value的方式进行访问和设置值，从Setup中暴露出去的对象你可以直接通过this.变量访问。

”

…

小伙伴可以根据自己的编码习惯选择运用。

toRef & toRefs

有时候我们想通过解构的方式从一个复杂的响应式变量中剥离出一些变量时，我们的代码可能是这样的：

<button @click=“changeObj”>my name is {{info.name}}

这样会使我们解构出来的两个property失去响应性，这个时候我们需要使用toRef和toRefs从中解构出来，toRef用于解构出单个property的响应式变量，toRefs是将源对象中所有property都创建响应式变量，在通过解构的方式创建我们对应的变量。

<button @click=“changeObj”>my name is {{info.name}}

watch & computed & 注册生命周期钩子

在Setup中我们还能watch属性，创建独立的computed，还可以注册各种生命周期钩子，由于Setup执行的阶段是围绕beforeCreate和created和进行的，所以原本在这两个生命周期中做的事情都能够放在Setup中处理。

…

// 输出结果如下：

我首先执行

created执行了

onMounted也执行了，结果输出如下

0

总计数:1

mounted执行了

看的出来，Setup中注册的生命周期钩子函数要比外面注册的钩子函数先执行！

provide & inject

provide和inject通常情况下我们在业务场景中使用不多，但在写插件或组件库的时候还是有用的，provide和inject用于在"祖"组件提供属性，在子组件中注入使用。在setup中怎么使用呢？

// demo组件中提供

// test组件中注入使用

…

以上是setup的基本应用，需要好好的感受它还需要在多种场景下去实际运用，才能更好的理解它棒在哪里，比如下面这段代码：

// a.js

import { ref, onMounted } from ‘vue’

export default function doSomething(refName,fn){

const a = ref(0);

const b = ref(0);

// …,

onMounted(() => {

fn();

})

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。

} from ‘vue’

export default function doSomething(refName,fn){

const a = ref(0);

const b = ref(0);

// …,

onMounted(() => {

fn();

})

最后

中年危机是真实存在的，即便有技术傍身，还是难免对自己的生存能力产生质疑和焦虑，这些年职业发展，一直在寻求消除焦虑的依靠。

• 技术要深入到什么程度？

• 做久了技术总要转型管理？

• 我能做什么，我想做什么？

• 一技之长，就是深耕你的专业技能，你的专业技术。（重点）

• 独立做事，当你的一技之长达到一定深度的时候，需要开始思考如何独立做事。（创业）

• 拥有事业，选择一份使命，带领团队实现它。（创业）

一技之长分五个层次

• 栈内技术 - 是指你的前端专业领域技术

• 栈外技术 - 是指栈内技术的上下游，领域外的相关专业知识

• 工程经验 - 是建设专业技术体系的“解决方案”

• 带人做事 - 是对团队协作能力的要求

• 业界发声 - 工作经验总结对外分享，与他人交流

永远不要放弃一技之长，它值得你长期信仰持有。

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

主要内容包括html，css，html5，css3，JavaScript，正则表达式，函数，BOM，DOM，jQuery，AJAX，vue 等等。