Web前端最全快应用开发快速上手及简明教程，2024年最新2024年最新腾讯Web前端面经

2401_84620191

于 2024-05-17 04:25:47 发布

阅读量1.1k

点赞数 15

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

本文链接：https://blog.csdn.net/2401_84620191/article/details/138985982

版权

程序员专栏收录该内容

88 篇文章 0 订阅

订阅专栏

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
…

算法

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

冒泡排序
选择排序
快速排序
二叉树查找: 最大值、最小值、固定值
二叉树遍历
二叉树的最大深度
给予链表中的任一节点，把它删除掉
链表倒叙
如何判断一个单链表有环
给定一个有序数组，找出两个数相加为一个目标数
…

由于篇幅限制小编，pdf文档的详解资料太全面，细节内容实在太多啦，所以只把部分知识点截图出来粗略的介绍，每个小节点里面都有更细化的内容！有需要的程序猿（媛）可以帮忙点赞+评论666

This is children of hint templete.

开发基础

保留字

除了传统保留字，添加了 show tid 等;

生命周期

页面生命周期

| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |

| — | — | — | — | — | — |

A页面的生命周期接口的调用顺序：

打开页面A：onInit() -> onReady() -> onShow()
在页面A打开页面B：onHide()
从页面B返回页面A：onShow()
A页面返回：onBackPress() -> onHide() -> onDestroy()

应用生命周期

| 属性 | 类型 | 参数 | 返回值 | 描述 | 触发时机 |

| — | — | — | — | — | — |

预置对象

全局对象 (通过 this 访问)

| 的属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $app | Object | - | 应用对象 |

* this.$page.setTitleBar 参数属性包括：

{

text: ‘Hello QuickApp’, //标题栏文字

textColor: ‘#ffff’, //文字颜色

backgroundColor: ‘#434343’, //背景颜色

backgroundOpacity: ‘0.8’, //背景透明度

menu: false, //是否在标题栏右上角显示菜单按钮 | 设置当前

}

| 属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $e l e m e n t ∣ F u n c t i o n ∣ i d : St r in g ∣ 获取指定 i d 的组件 d o m 对象，如果没有指定 i d ，则返回根组件 d o m 对象用法： ‘ t hi s .$ element(‘xxx’)获取id为xxx的组件实例对象 this.$element()` 获取根组件实例对象 |

$forceUpdate | Function | 无 | 强制页面刷新

| 公共属性 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $set | Function | key: String

value: Any | 添加数据属性，必须在onInit函数中使用，用法：this.$set('key',value) |

| $d e l e t e ∣ F u n c t i o n ∣ k ey : St r in g ∣ 删除数据属性，如果在 o n I ni t 函数中使用，用法： ‘ t hi s .$ delete(‘key’)` |

| 元素属性/方法 | 类型 | 参数 | 描述 |

| — | — | — | — |

| $set | Function | key: String

value: Any | 添加数据属性，用法：this.$vm('id').$set('key',value) |

| $d e l e t e ∣ F u n c t i o n ∣ k ey : St r in g ∣ 删除数据属性，用法： ‘ t hi s .$ vm(‘id’).$delete(‘key’)` |

| $on | Function | eventName: String

handler: Function | 在当前页面注册监听事件，可监听$emit()、 $dispatch()、 $broadcast()等触发的自定义事件，不能用于注册组件节点的事件响应 |

| $off | Function | eventName: String

handler: Function | 移除事件监听，参数 fnHandler 为可选，传递仅移除指定的响应函数，不传递则移除此事件的所有监听 |

* 注意，获取元素应该在页面已渲染后，如 onReady 事件中或 onReady 事件执行完以后。

页面设计

布局和尺寸

采用 border-box 模型且不支持 box-sizing 属性
设计稿1px / 设计稿基准宽度 = 框架样式1px / 项目配置基准宽度(项目配置基准宽度:/src/manifest.json 中 config.designWidth 的值，默认750)

可以使用内联样式、tag选择器、class选择器、id选择器来为组件设置样式
仅可以使用并列选择、后代选择器、子代选择器
支持@import引入外部样式、内联样式、行内样式
颜色值不支持缩写，伪类支持不完全（支持:disabled,:checked,:focus等)

通用

通用事件：click, longpress, focus, blur, appear(组件出现)，disappear(组件消失)，swipe(快速滑动，参数direction:[left|right|up|down])
通用属性： id, class, style, if, elif, else, for, show, disabled 等；
通用样式：width, height, padding, padding-, margin, margin-, border, border-style, border-width, border-color, border--color, border--width, border-radius, border---radius, background-color, background-size, background-image(仅本地图片), background-repeat, opacity, display(flex|none), flex, flex-grow, flex-shrick, flex-basis, position(none|fix), linear-gradient, repeating-inear-gradient, transform-origin, animation, animation-name, animation-delay, animation-duration, animation-iteration-count, animation-timing-function, animation-fill-mode, @key-frames(background-color|opacity|width|height|transform), transform(translate|translateX|translateY|rotate|rotateX|rotateY|scale|scaleX|scaleY)(以上*代表枚举[left|right|top|bottom], 具体和 css 一致。注：缩写形式和展开形式不要同时使用)

组件

默认支持通用事件、属性和样式

<text>、<a>、<span>、<label>组件为文本容器组件，其它组件不能直接放置文本内容

<div>: 和 HTML 一样

支持样式 flex-direction, flex-wrap, justify-content, align-items, align-content

<popup>: 气泡框

支持属性 target 和 placement
支持样式 mask-color
支持事件 visibilitychange
自组件只能是<text>

<refresh>: 下拉刷新

支持属性 offset 和 refreshing
支持样式 background-color 和 progress-color
支持事件 refresh

<richtext>: 富文本编辑器

支持属性 type(值为 html)
支持div样式, height 无效
不支持子组件

<stack>: 子组件排列方式为层叠排列，每个直接子组件按照先后顺序依次堆叠，覆盖前一个子组件

支持div样式

<swiper>: 轮播视图容器

支持属性 index, interval, autoplay 和 indicator(是否显示indicator)
支持样式 indicator-color, indicator-selected-color 和 indicator-size
支持事件 change
支持方法 swipeTo(index)

<tabs>: 选项卡

支持属性 index
支持事件 change
子组件仅支持最多一个和最多一个

<tab-bar>: 用来展示tab的标签区，子组件排列方式为横向排列

支持属性 mode(scrollable|fix)
支持样式 height
支持事件 visibilitychange

<tab-content>: 用来展示tab的内容区，高度默认充满tabs剩余空间，子组件排列方式为横向排列

支持属性 target 和 placement
支持样式 mask-color
支持事件 visibilitychange

<list>: 开发者在页面中实现长列表或者屏幕滚动等效果时，习惯使用div组件做循环遍历

子组件必须是 <list-item>;
支持属性 scrollpage，默认关闭，标志是否将顶部页面中非<list>的元素随<list>一起滚动。开启 scrollpage 会降低<list>渲染性能
组件的性能优化分为: 精简 DOM 层级、复用<list-item>、细粒度划分<list-item>、关闭 scrollpage 四个方面
支持 flex-direction 和 column
具有方法scrollTo(num)和事件scroll, scrollBottom, scrollTop

<list-item> list 的子元素

的子组件可以是任何标签或除<list>以外的组件
有一个属性 type，type 值相同的 <list-item> 后代 DOM 必须一模一样，如果不一样，请使用不同的 type 值。type 不能为空！
支持<div>样式和 column-span，不支持 position

<a>: 链接

支持属性 href
href 属性值可根据路由配置
href还支持http和https开头的网址，点击后会打开webview加载网页
href还可以通过“?param1=value1”的方式添加参数，参数可以在页面中通过this.param1的方式使用
子组件仅支持
仅支持 `text
支持 sms, tel, mailto
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

<image>: 图片

支持属性 src 和 alt
支持样式 resize-mode(cover|contain|stretch|center)
不支持子组件

<process>: 进度条

支持属性 percent 和 type(horizontal|circular)
支持样式 color 和 stroke-width
支持事件 visibilitychange
不支持子组件

<rating>: 星级评分

支持属性 numstars(总数), stepsize(步长), indicator(是否可操作)和 rating(值)
支持样式 star-background, star-secondary, star-foreground（三种状态的图片）
支持事件 change，不支持click、longpress事件
不支持子组件

<span>: 格式化的文本

只能作为<text>与<a>的子组件
不支持 show 和 disabled 属性
支持样式 color, font-size, font-style, font-weight(normal|bold),text-decoration
不支持任何事件
不支持子组件

<text>: 文本内容写在标签内容区，支持转义字符”\”

仅支持<a>与<span>子组件
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow

<input>: 接收用户的输入

不支持子组件
支持属性 type(button|checkbox|radio|text|email|date|time|number|password), name, value, checked 和 placeholder
支持样式 color, placeholder-color, width, height 和 font-size
支持事件 change
支持方法 focus()

<label>: 为input、textarea组件定义标注

不支持子组件
支持属性 target
支持样式 lines, color, font-style, font-weight(normal|bold),text-decoration, text-align, line-height, text-overflow
不支持事件

<option>: <select>的子组件，用来展示下拉选择具体项目

不支持子组件
支持属性 value 和 selected
不支持事件

<picker>: 滚动选择器，目前支持三种选择器，普通选择器，日期选择器，时间选择器。默认为普通选择器。

支持子组件
支持属性 type(text|date|time), range, start, end, value 和 selected
不支持 click 事件, 支持 change 事件
支持方法 show()

<select>: 下拉菜单

仅支持子组件
不支持 click 事件, 支持 change 事件

<slider>: 滑动选择器

不支持子组件
支持属性 min, max, value 和 step
支持样式 color, selected-color, padding 仅支持 left 和 right
支持事件 change

<switch>: 开关选择

不支持子组件
支持属性 checked
支持事件 change

<textarea>: 接收用户的输入

不支持子组件
支持属性 placeholder
支持样式 color, placeholder-color 和 font-size
支持事件 change
支持方法 focus()

<video>: 视频播放器

支持属性 src, poster 和 autoplay
支持事件 prepared, start, pause, finish, error, seeking, seeked, timeupdate 和 fullscreenchange
支持方法 start(), pause(), setCurrentTime(seconds), requestFullscreen() 和 exitFullscreen()

<web>: 用于显示在线的html页面

必须声明”打开网页”接口，否则会提示缺乏权限。
支持属性 src, src 值为 Deeplink, 参考下文 Deeplink 部分
支持样式 mask-color
支持事件 titlereceive, pagestart, pagefinish 和 error
支持方法 reload(), forward(), back(), canForward(callback), canBack(callback)

接口

以下接口通过 import app from '@system.app' 或 require('@system.app')方式引入

接口申明在 manifest 文件的 features 中，除了@system.app使用前以外都需要申明。

@system.app

getInfo(), 得到应用名称、版本名称、版本号、log级别，三级来源

@system.share

内置分享，接口声明：{"name": "system.share"}
share({type: MIME Type, data:String/URL/FileList, success, fail, cancel, complete}): 分享调用
第三方分享，接口声明：{"name": "service.share","params": {"appSign": "abcdefg...","qqKey":"1234567","wxKey":"wx1234","sinaKey":"1234"}}
manifest 参数说明: appSign 签名; qqKey QQ后台ID; wxKey: 微信后台ID, sinaKey 新浪后台ID
getProvider(): 获取厂商信息
share({shareType:int, title, summary, targetUrl,imagePath, mediaUrl, success, fail, cancel, complete})

其中 shareType 默认图文０,纯文字1,纯图片2,音乐３,视频４

cancel

@system.router

接口声明：{"name": "system.router"}
push({url, params:Object}): 跳转url
replace({url, params:Object}): 跳转url, 后退不会来
back(): 后退
clear(): 清空历史栈
getLength(): 获取历史栈长度
getState(): 获取当然页面位置，名称，路径

@system.prompt

接口声明：{"name": "system.prompt"}
showToast({message, duratuon:(0 or 1)}): 显示吐司
showDialog({title:, message:, buttons:[{text,color}], success({index}), fail, cancel, complete}): 显示对话框
showContextMenu({itemList:String[], itemColor:HexColor, success, fail, cancel, complete}): 显示上下文菜单

@system.notification

接口声明：{"name": "system.notification"}
show({contentTitle, contentText, clickAction:{url}}): 显示通知

@system.vibrator

接口声明：{"name": "system.vibrator"}
vibrate(): 震动1s

@system.webview

接口声明：{"name": "system.webview"}
loadUrl({url}): 通过 webview 加载 url
在webview打开的网页中可以使用的api: system.go(path): url 跳转

@system.request

接口声明：{"name": "system.request"}
upload({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 上传
download({url, header:Object, success({token}), fail, complete}): 下载
onDownloadComplete({token, success({url}), fail({code}), complete}): 监听下载任务

@system.fetch

接口声明：{"name": "system.fetch"}
fetch({url, header:Object, method(POST|GET), files:{filename,name,url,type}[], data:{name,value}[], success({code,data,headers}), fail, complete}): 发起请求

@system.storage

接口声明：{"name": "system.storage"}
get({key, default, success({data}), fail, complete}): 获取值
set({key, value, success, fail, complete}): 存储值
clear({success, fail, complete}): 清空数据
delete({key, success, fail, complete}): 删除数据

@system.file

接口声明：{"name": "system.file"}
move({srcUri, dstUri, success, fail({code}), complete}): 移动文件
copy({srcUri, dstUri, success, fail({code}), complete}): 复制文件
list({uri, success(fileList:{uil,list,lastModifiedTime}[]), fail({code}), complete}): 获取目录下文件列表
get({uri, success({uil,list,lastModifiedTime}), fail({code}), complete}): 获取文件信息
delete({uri, success, fail(code**), complete}): 获取文件信息

@system.barcode (需要用户授权)

接口声明：{"name": "system.barcode"}
scan({success({result}), fail(code:201用户拒绝), cancel, complete}): 扫描二维码

@system.sensor

接口声明：{"name": "system.sensor"}
subscribeAccelerometer({callback(x,y,c)}): 获取重力感应数据
unsubscribeAccelerometer(): 停止获取重力感应数据
subscribeCompass({callback(direction)}): 获取罗盘数据
unsubscribeCompass(): 停止获取罗盘数据
subscribeProximity({callback(distance)}): 获取距离感应数据
unsubscribeProximity(): 停止获取距离感应数据
subscribeLight({callback(intensity)}): 获取光线感应数据
unsubscribeLight(): 停止获取光线感应数据

@system.clipboard

接口声明：{"name": "system.clipboard"}
set({text, success, fail, complete}): 写入
get({success({text}), fail, complete}): 读取

@system.geolocation (需要用户授权)

接口声明：{"name": "system.geolocation"}
getLocation({timeout, success({longitude, latitude}), fail, complete}): 获取地理位置
subscribe({callback(longitude, latitude), fail}): 监听用户位置
unsubscribe(): 取消监听用户位置

@system.shortcut (需要用户授权)

接口声明：{"name": "system.shortcut"}
hasInstalled({success, fail, complete}): 是否已创建桌面图标
install({success, fail, complete}): 创建桌面图标

@system.calandar (需要用户授权)

接口声明：{"name": "system.calandar"}
insert({title, description, startDate:number, endDate:number, timezone:string, allDay:boolean是否整天, rrule:string重复规则, remindMinutes:number[]提前提醒时间, organizer: string, success, fail, cancel}): 插入日历事件

@system.network

接口声明：{"name": "system.network"}
getType({success(metered是否按流量计费, type网络类型), fail, complete}): 获取网络类型
subscribe({callback(metered, type), fail}): 监听网络情况
unsubscribe(): 取消监听网络情况

@system.device (需要用户授权)

接口声明：{"name": "system.device"}
getInfo({success({brand, manufacturer, model, product, osType, osVersionName, osVersionCode, platformVersionName, platformVersionCode, language, region, screenWidth, screenHeight}), fail, complete}): 获取设备基本信息
getId({type(device|mac|user|advertising)[], success({device, mac, user, advertising}), fail, complete}): 获取设备标识
getDeviceId({success({deviceId}), fail, complete}): 获取设备ID
getUserId({success({userId}), fail, complete}): 获取用户ID
getAdvertisingId({success({advertisingId}), fail, complete}): 获取广告ID
getTotalStorage({success({totalStorage}), fail, complete}): 获取总容量
getAvailableStorage({success({availableStorage}), fail, complete}): 获取可用容量
getCpuInfo({success({cpuInfo}), fail, complete}): 获取cpu信息

@system.brightness

接口声明：{"name": "system.brightness"}
getValue({success({value}), fail, complete}): 获取屏幕亮度
setValue({value, success(value:0手动;1自动), fail, complete}): 设置屏幕亮度
getMode({success(value:0手动;1自动), fail, complete}): 获取屏幕亮度模式
setMode({value, success, fail, complete}): 设置屏幕亮度模式 1. 接口声明：{"name": "system.volume"}

@system.volume

接口声明：{"name": "system.volume"}
getMediaValue({success(value:0到1), fail, complete}): 获取音量
setMediaValue({value, success, fail, complete}): 设置音量

@system.battary

接口声明：{"name": "system.battary"}
getStatus({success(charging, level:0到1), fail, complete}): 获取当前电池状态

@system.package

接口声明：{"name": "system.package"}
hasInstalled({package包名, success(result:boolean), fail, complete}): 判断是否安装了某个应用
install({package, success(result:boolean), fail, complete}): 安装应用
利用路由中的 push 操作打开应用

@system.record (需要用户授权)

接口声明：{"name": "system.record"}
start({success({url}), fail, complete}): 开始录音
record.stop(): 停止录音

@system.cipher

接口声明：{"name": "system.cipher"}
rsa({action:encrypt|decrypt, text, key加密为公钥|解密为私钥, transformation补充项，success({text}), fail, complete}): rsa 加密解密

@system.media (需要用户授权)

接口声明：{"name": "system.media"}
takePhoto({success({uri}), fail, complete, cancel}): 拍照
takeVideo({success({uri}), fail, complete, cancel}): 录像
pickImage({success({uri}), fail, complete, cancel}): 选择图片
pickVideo({success({uri}), fail, complete, cancel}): 选择视频

@system.image

接口声明：{"name": "system.image"}
getImageInfo({uri, success({uri, width, height, size}), fail, complete, cancel}): 获取图片基础信息
compressImage({uri, quality:1到100, ratio:number缩放比, format:图片格式, success({uri, width, height, size}), fail, complete, cancel}): 压缩图片
applyOperations({uri, operations:Object[](如下), quality, format, success({uri}), fail, complete, cancel}}): 对图片按顺序执行编辑操作

剪裁: {action: 'crop', x, y, width, height}
缩放: {action: 'scale', scaleX, scaleY}
旋转: {action: 'rotate', degree}

editImage({uri, success({uri}), fail, complete, cancel}): 使用编辑器编辑图片

@system.audio

接口声明：{"name": "system.audio"}
play(): 播放
pause(): 暂停
属性: src, currentTime, duration, autoplay, loop, volume, muted
事件: play, pause, loadeddata, ended, durationchange, error, timeupdate

@system.push

接口声明：{"name": "system.push"}
getProvider(): 获取服务提供商
subscribe({success({regId}), fail, complete}): 订阅push
unsubscribe(): 取消订阅push
on({callback(messageId, data)}): 添加push事件回调
off(): 移除push事件回调

@system.pay

接口声明：{"name": "system.pay"}
getProvider(): 获取服务提供商
pay({orderInfo:String, success({code, message, result}), fail({code, message}), complete}): 付款

@system.stats

接口声明：{"name": "system.stats"}
getProvider(): 获取服务提供商
recordCountEvent({category, key, map}): 计数类型事件
recordCalculateEvent({category, key, value, map}): 计算类型事件

@system.account

接口声明：{"name": "system.account"}
getProvider(): 获取服务提供商
authorize({type:string(code|token), redirectUri, scope, state, success({state, code, accessToken, tokenType, expiresIn, scope}), fail, complete): 认证
getProfile({token, success({openid, id, unionid, nickname, avatar}), fail, complete}): 获取用户认证信息

@system.alipay

接口声明：{"name": "system.alipay"}
pay({orderInfo:string, callback}): 支付
支付宝支付细节，请查看请求参数说明文档

@system.wxpay

接口声明：{"name": "service.wxpay", "params": {"package": "com.your.package", "sign": "abcdefg", "url": "http://your.domain/page"}}
两种方式的 manifest 配置：

app 原生：package: 包名，sign: 签名
web 方式：url：H5 url

getType(): 返回调用方式(none|APP|MWEB)
pay({prepayid, extra, success({prepayid,final_url}), fail(code**), complete}): 支付

extra app 版参数如下

app_id: 微信支付订单中的app_id
partner_id: 微信支付订单中的partner_id
package_value: 微信支付订单中的package_value
nonce_str: 微信支付订单中的nonce_str
time_stamp: 微信支付订单中的time_stamp
order_sign: 微信支付订单中的order_sign

extra app 版参数如下

mweb_url: 在微信的支付服务器下单以后，微信返回的 MWEB_URL，在CP用于微信支付的h5页面中，直接将mweb_url取出后跳转过去即可，但这个做法并不是强制的，您也可以通过其他自定义键值向您自己的服务器换取MWEB_URL
custome_key: 其他的自定义键值，cp可以根据需要增加其他自己认为需要的键名和键值
微信支付细节,请参考微信网页支付和微信app支付

以上接口错误列表如下：

- 201 用户拒绝

- 202 参数错误

- 204 超时

- 300 I/O错误

- 301 路径不存在

- 900 签名有误

- 901 包名有误

- 1000 应用未安装|下载失败|位置开关关闭

- 1001 url配置找不到|任务不存在

- 2001 内部错误

页面切换和参数传递

传递方法1. <a>标签配合 queryString 传递参数, 这个和前端一致。

跳转页面

传递方法2. 通过 router 接口：router.push(), router.replace(), 接受一个如下结构的对象，用法这个和前端 router 一致。

{

url: ‘/src/home/index.html’,

params: { key: 2333 /* 需要传递的参数 */ }

}

接收方法：上述2种传递参数的方法，其接收方法一致，在接收参数页面的 protected 对象中获取即可（可设置默认值）

回传参数：借助 this. app. a p p . app.data 实现，相当于绑定数据到全局了，这个不再举例

页面间通信

这个部分和 HTML5 中的同源页面通信如出一辙。会利用到一个构造函数 new BroadcastChannel(string), 它接受一个字符串参数，作为实例的频道名称。它的实例具有以下属性和方法：

| 名称 | 类型 | 参数 | 描述 |

| — | — | — | — |

其中 onmessage 事件有2个属性(通过 event 对象访问)：

| 属性 | 类型 | 描述 |

| — | — | — |

| type | String | “message” |

| data | Any | 接收到的消息内容 |

由于和 HTML5 用法一样，这里就不演示了。

组件通信

父子组件通信

父子组件使用见 template 部分

父组件到子组件

子组件通过 props 获取父组件传入的值，见上文 template 部分
通过 this.watch(props, callback) 监控传入数据变化并调用回调函数
父组件通过this.$broadcast()完成事件触发，子组件通过$on()绑定事件并响应

子组件到父组件

父子组件传对象类型属于引用传递，可以直接修改父组件传入对象改变父组件数据
子组件通过this.$dispatch()完成事件触发，父组件通过$on()绑定事件并响应
子组件通过this.$emit()触发在节点上绑定的事件来执行父组件的方法

* 注：this.$broadcast()、this.$emit() 和 this.$dispatch() 参数一致

* 注：触发时传递参数，再接收时使用event.detail来获取参数

* 注：当传递结束后，可以调用event.stop()来结束传递

Deeplink

数据结构与算法

这一块在笔试、面试的代码题中考核较多，其中常考的数据结构主要有：数组、链表、队列、栈、Set、Map、哈希表等，不同数据结构有不同的方法以及储存原理，这些算是技术岗的必备知识。算法部分主要分为两大块，排序算法与一些其他算法题。

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

排序算法根据考频高低主要有：快速排序、归并排序、堆排序、冒泡排序、插入排序、选择排序、希尔排序、桶排序、基数排序、Timsort这十种，这类考核点要么是算法的时间、空间复杂度、稳定度，要么是直接手写代码，故在理解算法原理的同时，对JS语言版的排序算法代码也要加强记忆。

二叉树层序遍历
B 树的特性，B 树和 B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
知道的排序算法说一下冒泡快排的原理
Heap 排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
知道数据结构里面的常见的数据结构
找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
合并两个有序数组
给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）

通过 this.watch(props, callback) 监控传入数据变化并调用回调函数

父组件通过this.$broadcast()完成事件触发，子组件通过$on()绑定事件并响应

子组件到父组件

父子组件传对象类型属于引用传递，可以直接修改父组件传入对象改变父组件数据
子组件通过this.$dispatch()完成事件触发，父组件通过$on()绑定事件并响应
子组件通过this.$emit()触发在节点上绑定的事件来执行父组件的方法

* 注：this.$broadcast()、this.$emit() 和 this.$dispatch() 参数一致

* 注：触发时传递参数，再接收时使用event.detail来获取参数

* 注：当传递结束后，可以调用event.stop()来结束传递

Deeplink

数据结构与算法

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

二叉树层序遍历
B 树的特性，B 树和 B+树的区别
尾递归
如何写一个大数阶乘？递归的方法会出现什么问题？
把多维数组变成一维数组的方法
知道的排序算法说一下冒泡快排的原理
Heap 排序方法的原理？复杂度？
几种常见的排序算法，手写
数组的去重，尽可能写出多个方法
如果有一个大的数组，都是整型，怎么找出最大的前 10 个数
知道数据结构里面的常见的数据结构
找出数组中第 k 大的数组出现多少次，比如数组【1，2， 4，4，3，5】第二大的数字是 4，出现两次，所以返回 2
合并两个有序数组
给一个数，去一个已经排好序的数组中寻找这个数的位置（通过快速查找，二分查找）

[外链图片转存中…(img-OF7G22t7-1715891123750)]

2401_84620191

关注

15
点赞
踩
29

收藏

觉得还不错? 一键收藏
0
评论
Web前端最全快应用开发快速上手及简明教程，2024年最新2024年最新腾讯Web前端面经

vm‘deprecated‘|Function|id:String|请使用上面this. v m ‘ d e p r e c a t e d ‘ | F u n c t i o n | i d : S t r i n g | 请使用上面 t h i s . vm `deprecated` | Function | id: String | 请使用上面this.child(‘xxx’)替代。| $page.action | String | - | 获取打开当前页面的action。
复制链接

扫一扫