2024年最新Vue3新特性体验--中（Composition API），2024年最新字节跳动面试问题及答案

最后

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

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

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

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

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

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

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

一技之长分五个层次

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

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

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

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

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

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

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

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

name: ‘A’,

data() { //里面的数据具有响应性，通过Object.defineProperty()劫持getter、setter

return {

name: ‘leo’

}

},

methods: {

changeName() {

this.name = ‘lion’

}

}

}

vue3中的写法：

我是A组件

我的名字：{{name}}

<button @click=“changeName”>修改名字

页面展示：

在vue2中name和它的方法changeName是分开的，分别分布在data属性和methods属性，当实现一个功能时，代码是分开的。试想一下，如果这个组件里需要实现很多功能，那data中可能需要很多的数据，methods中也会构造很多的方法，代码分散，就会比较难找。在工作中确实存在这种情况，有时候找个变量很费时，特别是变量跟功能特别多的时候。而对比vue3，其将相同功能的逻辑组合在一块，如该例中name的声明与修改它的方法放一起，一眼就能看到某个功能的相关实现代码，方便功能代码的维护与管理。

setup

setup是Composition API中的入口函数，它只在初始化时执行一次，且在beforeCreate生命周期之前执行，验证一下：

我是A组件

我的名字：{{name}}

<button @click=“changeName”>修改名字

在控制台先打印了setup()里面的内容，说明它在beforeCreate()之前执行，且只执行一次。这也代表着在setup执行的时候,组件对象还没有创建,组件实例对象this还不可用，不能通过this来访问data、computed、methods中的内容，所以不建议混合使用。

setup里面有两个参数props、context。

props：props为一个对象，子组件通过它拿到父组件传递下来的属性。

context：上下文对象，里面有三个属性attrs、slots、emit。attrs：获取当前组件模板标签上所有没有通过props接收的属性的对象。slots：包含所有传入的插槽内容的对象。emit：用来分发自定义事件的函数，可以进行父子组件的通信。（该内容不展开，可自行查阅深究）

ref

ref在vue3中定义一个具有响应性数据，可以是基本数据类型，也可以是对象。类似vue2中data中的响应式变量。

let name = ref(‘leo’)

返回的是一个对象，真实值放于其value属性，不妨打印出来看看。

let name = ref(‘leo’)

console.log(name,‘ref’) //控制台打印，查看返回数据结构

注意：在改变name（ref类型对象）的值的时候，不能直接“name = ”而需要“name.value = ”。

reactive

可以定义多个具有响应性的数据，接收一个对象，返回该对象的响应式代理器对象（Proxy），而且代理了该对象中所有的属性，不管该对象层级多深，所有的属性都具有响应性。对比vue2中让对象具有相应性的方式是遍历该对象中所有的属性，通过defineProperty()劫持属性的getter、setter，使其具有响应性。当存在多个对象，且对象层级很深，那么遍历所有属性使其都具有响应性，这是耗时间、耗资源的过程。vue3通过代理的方式改进了这个过程，提高了效率。

举个例子，创建一个爱好like对象，代理使其具有响应性。

我是A组件

我的名字：{{name}}

<button @click=“changeName”>改变内容

喜欢的电影：{{like.movie}}

喜欢的音乐：{{like.music}}

观察控制台打印结果，跟ref不一样，真实的值不在value中，而是在对象原本对应的属性中，因此修改值时候不需要加“.value”。

初始页面

点击按钮，验证其响应性

computed

计算属性与vue2中的基本一致，举个例子：

计算属性的函数中如果只传入一个回调函数，表示一个get的过程

我是A组件

我的名字：{{name}}

<button @click=“changeName”>改变内容

{{content}}

通过控制台打印出来，发现与ref类型的数据结构一样，说明computed返回的是一个ref类型的数据。

注意：computed返回的ref类型的.value是只读属性，不允许修改。

function changeName(){

name.value = ‘lion’

like.movie = ‘战狼2’

content.value = ‘注意啦！！！’ + content.value

}

计算属性当然也可以传入一个对象，里面可以存在读、写方法，打印观察。

let content = computed({

get(){

return ‘我喜欢看：’ + like.movie + ‘；喜欢听：’ + like.music

},

set(newVal){

like.movie = newVal

}

})

console.log(content,‘content’)

watch

watch与vue2中的配置一致。都是包括要监听的数据、回调函数、监听配置。

我是A组件

我的名字：{{name}}

<button @click=“changeName”>改变内容

{{content}}

{{newContent}}