2024-07-09

1.组件懒加载:
👉又叫延迟加载或者按需加载,使用import函数来实现
2.盒子模型:
👉分为内容内容框和边框盒模型,有外边距(margin)、内边距(padding)边框(border),内容区域(content)组成
3.什么是js闭包,有什么作用
👉内部函数能访问外部函数作用域中的变量;
外部函数定义了内部函数,并在其作用域声明了一些变量;
内部函数能够捕获并保留对外部作用域变量的引用,即便外部函数执行结束;
用于数据封装(创建私有变量和方法),模块化,状态维持(让变量的生命周期超出原本的作用域),函数柯里化(通过闭包保留部分参数,创造新的函数),模块化,异步编程
function 外部函数() {
function 内部函数() {
var 内部变量 = "我是内部变量"
// 直接返回内部变量
return 内部变量
}
// 调用内部函数并获取内部变量的值
var 内部变量的值 = 内部函数()
console.log(内部变量的值)
}
外部函数()4.事件循环
👉是JS处理异步操作的一种机制,确保了非阻塞的执行环境;
1.执行桟运行所有同步代码,比如函数调用,按照先进后出的规则
2.任务队列分为宏任务(如setTimeout,setInterval)和微任务(如Promise的then,process.nextTick)
3.事件循环过程首先执行全局脚本作为初始桟任务,桟内任务执行完毕,检查微任务队列,一次性执行完所有微任务,随后取出一个宏任务执行,执行过程中又生成新的微任务,如此宏任务微任务交替执行,直到完成所有任务;
举例说明:

  • 先执行所有同步代码。
  • 然后执行当前微任务队列中的所有任务。
  • 接着执行下一个宏任务。
  • 重复上述过程,不断检查微任务队列,再执行宏任务。
    5.原型链
    👉是JS实现继承的核心机制,允许对象之间共享属性和方法,每个JS对象都有一个内置的属性为Prototype(它是一个原型对象可以使用proto或者getprototypeOf访问对象内部原链接,这个链接指向最终原型对象)
    1.原型对象每个构造函数都有一个prototype属性,这个属性就是原型对象,原型对象上定义的属性和方法,可以被构造函数创建的所有实例共享;
    2.对象的属性查找当访问一个对象的属性和方法时,如果没有对应的属性和方法js会继续在该对象的原型上查找,如果还是没有,则继续在原型的原型上查找,直到找到或到达原型链的末端(Object.prototype)这个过程就是原型链遍历
    最好不要修改原型,会影响到已经存在的实例。
    6.JS模块化开发
    把一个复杂的程序,分解成一个一个的独立模块,有助于避免全局变量污染,增强代码的复用
    使用import和export关键字实现模块导入导出。支持动态导入、命名和默认导出等特性。
    还有CommonJS,require用于倒入模块,module.exports用于导出
    区别在于值的传递不同前者为引用后者为浅拷贝;
    加载时机不同前者为静态加载是异步的,后者为运行时加载是同步的;
    前者支持动态导入,实现按需加载后者不行;
    前者为ES标准的一部分,后者主要运用于node.js
    7.MVVM开发模式和VUE特点
    model view viewModel 数据改变视图改变,视图改变数据改变;model代表数据层,view代表视图层,它们都通过viewModel进行通信
    vue主要特点有:
    1.声明式渲染(将数据绑定在dom上,使得视图能够根据数据变化进行更新)
    2.组件化(每个组件都是自包含的,可以复用)
    3.mvvm模式
    4.虚拟dom(可以理解为记录下所有需要更新的dom,然后只更新这部分)
    5.响应式系统(自动响应数据变化并更新视图)
    8.VUE的生命周期,一般在哪一块发请求
    beforeCreate/create
    beforeMount/mounted
    beforeUpdate/update
    beforeDestroy/destroyed
    一般在created和mounted里发送请求
    9.Computed和Watch的区别及应用场景
    计算属性有缓存,声明式,默认为只读,不支持异步,适用于数据转换场景
    监听无缓存,支持异步,可手动触发,适用于数据变化之后的操作
    10.VUE常用指令
    v-bind v-on v-if v-for v-else-if v-model v-show v-text v-html v-pre v-cloak v-once
    11.VUEX是什么,怎么使用,哪些功能场景使用它
    状态管理模式和库
    安装之后创建store.js在里面定义你的store,然后在main.js中引入store,也可以通过this.store访问store实例 使用场景有:全局状态管理,组件间通信,状态持久化(localStorage),异步操作 12.组件传值方式有哪些 父子组件传值propsemit
    兄弟组件传值vuex eventBus
    13.v-model如何实现双向绑定
    它的内部实际是v-bind和v-on,使用双向绑定时,通过v-bind:value将属性绑定到表单的value属性上然后通过v-on:input监听表单的input事件
    14.VUE-router的两种模式
    哈希模式:#后面的部分用来表示当前路由,利用了window.onhashchange事件监听哈希的变化,并在哈希改变时更新页面视图,且兼容性好
    历史模式:页面切换改变url,不需要重新加载页面
    15.axios是什么,它的特点有哪些
    它基于promise的http客户端
    支持promise使得请求代码更加优雅简洁
    可以设置拦截器
    自动解析JSON格式的响应数据,也支持序列化js对象为JSON数据进行发送
    支持取消请求
    提供了get post put delete 等方法
    支持链式调用
    16.var let const 之间的区别
    var:声明的变量具有函数作用域,在函数外部声明为全局变量,可以重新赋值,变量提升,函数作用域
    let:无法变量提升,可重新赋值,块级作用域(只能在指定的代码块内访问)
    const:无法变量提升,不可重新赋值,块级作用域
    17.使用箭头函数需要注意什么
    没有自己的this,它的this是从最近的一层函数继承来的,
    不可改变this的绑定
    不能用作构造函数,没有原型链
    如果箭头函数只有一条语句可以省略大括号和return
    18.前端如何优化性能
    减少不必要的空白和注释,减少文件大小
    优化图片可以使用SVG和JPEG格式
    按需加载
    在元素状态改变少的情况下用v-if
    若元素状态改变频繁用v-show
    尽量减少api请求数量
    18.vue2和vu3有哪些区别(请分别从生命周期、diff 算法、响应式原理方面做出解答)
    vue2的生命周期:
    beforeCreate/create
    beforeMount/mounted
    beforeUpdate/update
    beforeDestroy/destroyed
    vue3的生命周期:
    beforeUnmount/unmounted替换了beforeDestroy/destroyed
    vue2 diff算法:
    双向绑定,数据更新的时候要重新遍历对象
    vue3 diff算法:
    单向流,数据更新了只要在新的虚拟dom中找到更新之后的数据即可
    vue3响应式原理:
    双向绑定通过Object.defineProperty来绑定
    vue3响应式原理:
    通过proxy代理解决绑定
    19.说一说vue的diff算法
    数据发生改变会生成一个虚拟dom,用这个虚拟dom跟就dom就行对比,然后更新已经修改过的
    20.iframe的作用以及优缺点
    用于页面的内嵌(嵌入另一个html页面,通常用于加载广告,嵌入视频,地图等第三方页面)
    优点:
    • <iframe> 中的内容是独立加载的,不会阻塞主页面的加载
    • 可以进行局部刷新,减小带宽,增加网站安全性能
    • 无需离开当前页面
    缺点:
    • 搜索引擎难以抓取iframe中的内容,从而影响用户检索时的网站排布优先级
    • iframe加载的内容无法追踪,难以提供详细的日志记录;
    • iframe会增加页面的请求次数和大小,降低页面速度
    21.事件委托以及冒泡原理
    事件委托是在父级元素上监听子级元素,基于事件冒泡原理实现的。
    当一个事件在某个元素上触发时,该事件会从最深的节点开始向上冒泡,直到到达文档的根结点,利用这个特性我们可以在一个共同的祖先元素上设置事件监听器,当子元素触发事件时,事件会冒泡到这个祖先元素,然后我们通过事件对象判断是哪个子元素触发的事件。
    22.什么是防抖和节流
    防抖主要是延迟函数的执行,在用户最后一次点击后,等待固定时间去执行,相当于加了一个冷却时间。
    节流主要是保证一个函数在一定时间内只被调用一次,可以使用定时器和时间戳来实现。
    23.前端如何实现即时通讯
    👉ajax轮询:最早的实时通信技术之一,定时向服务器发送请求来检查是否有新消息
    WebSocket(使用了全双工的通信渠道,允许服务器和客户端双向实时通信,协议为ws://或wss://)
    以WebSocket为例,实现前端即时通讯的基本步骤如下:
    建立WebSocket连接:使用new WebSocket(url)创建WebSocket实例,连接到服务器。
    处理连接状态:监听open、close、error事件,处理连接的打开、关闭和错误状态。
    发送消息:使用socket.send(data)方法向服务器发送消息。
    接收消息:监听message事件,处理从服务器接收到的消息。
    断开连接:使用socket.close()方法断开WebSocket连接。
    24.小程序中bindtap和catchtap区别
    👉bindtap:默认的事件绑定方式,单点击组件并松开触发bindtap事件,且向上冒泡,直到查到被处理或到达跟元素,如果父元素绑定了事件,子元素触发之后也会触发父元素的事件
    catchtap:是一个特殊的事件绑定方式,主要作用为阻止事件冒泡
    25.小程序有哪些数据传递的方法
    👉数据绑定:最基本的传递方式,在模版中使用{{ }}语法来绑定页面的显示数据,在Page对象的data属性中定义的数据
    事件绑定:在组件中使用bind前缀的事件绑定,可以将事件处理函数与组件事件关联起来,当用户与组件交互时,触发的事件会携带数据,实现子传父
    组件间传参:父页面可以通过<my-component data-param="{{param}}"></my-component>的方式向子组件传参,子组件通过properties来接受这些参数
    使用$emit和on(自定义事件,通过事件绑定和触发来实现)
    App对象:在app.js里的App对象的globaData属性可以用来存储全局数据,在任何页面都可以访问
    使用微信小程序的本地存储API:wx.setStorageSync和wx.getStorageSync
    26.vue中Class与Style如何动态绑定
    👉可以使用:来动态绑定class和style
    语法:<div :class="{ action:isAction }"></div>
    27.vue中的mixins有何作用,如何使用
    👉代码复用,逻辑封装,行为一致性
    可以定义混入,组件中使用混入,全局混入(一般不建议)
    28.vue中的transition动画有哪些作用,如何使用
    用于添加进入和离开的动画效果
    css:transition: opacity .5s
    html:用<transition>把需要过渡的元素包括起来
    29.ES6有哪些新特性
    Promis 扩展运算符 模版字符串 结构赋值 箭头函数 const和let symbol set和map Class Module
    30.Promise是什么,有什么作用
    es6新特性,为了解决回调地狱,特点是状态不受外界影响(有进行中(padding)、已成功(fulfilled)、已结束(redected)三种状态)且状态不可逆
    31.什么原因会造成内存泄漏
    闭包:(如果闭包中的变量一直被引用,外部函数执行完毕也不会被垃圾回收导致)
    全局变量:(因为全局变量在程序的生命周期都是可访问的,不会垃圾回收)
    未移除的事件监听器:(在为dom元素创建事件监听器时,js会创建一个指向该元素的引用,如果监听器在不需要的时候没被移除,即时dom元素销毁,也会保留对该元素的引用,因为dom元素虽然不在了但是引用还在,使得垃圾无法回收)
    定时器:(类似事件监听器,定时器也会创建相关函数变量的引用,如果定时器设置后没被清除,引用就会存在,导致内存泄漏)
    32.v-show和v-if的指令区别是什么
    v-show为操作display属性进行隐藏,v-if是直接把元素从dom树中移除,在开发中为了新能优化,若条件变化不多则使用v-if,反之用v-show
    33.vue2 对象及数组 数据改变 视图不改变(响应式时效)
    对象使用this.set可以解决,数组使用
    34.vue2中 onMounted 对应js中什么函数
    window.onload()
    35.有三个接口,要求只有前面两个接口调用成功了 ,才能调用第三个接口
    Promise.all监听前面两个函数
    36.数组有哪些方法,有啥功能
    👉includes():判断数组中是否存在某个元素,存在返回true否则返回false
    filter():建一个新数组,其包含通过测试的所有元素
    map():创建一个新数组,数组中的元素为原始数组元素调用函数处理后的值
    forEach():对数组中的每个元素执行提供的函数
    37.怎么解决跨域
    • 在webpack或vite的config配置文件中可以设置proxy代理
    • 使用JSONP借助回调函数解决跨域
    • 服务器端:服务器配置cors开启允许跨域、Nginx 服务器反向代理
    38.组件封装思路
    • 明确组件职责:每个组件应该有明确的职责,尽量做到单一职责原则。组件的功能应该尽可能单一,这样可以提高组件的复用性和可维护性。
    • 组合组件:通过组合多个小组件来构建更复杂的组件。这样的小组件可以独立开发、测试和维护,同时也能提高代码的可读性。
    • 组件通讯与插槽:props/emit、slots插槽、provide/inject 注入
    • 确保组件之间的样式隔离
    39.常用指令优先级
    • v-for v-if : v2中v-for高于v-if v3中 v-if高于v-for
    ◦ 如果一定要同时使用则在外层包裹一个 <template> 在其上使用v-for, 内层包裹v-if
    40.http 401 403 301 303 分别代表什么
    401:没有认证
    403:有认证,但没有权限
    301:访问的资源转移,会返回location头,指明新的url
    303:比如get post请求方法使用错了
    41.重绘和回流 是什么意思 有什么功能
    重绘改变元素的外观属性,比如:颜色,背景颜色,边框颜色
    回流是改变元素的大小,可能会dom树重建
    42.vux actions 为什么是异步的
    它是被设计成异步的,原因为:分离关注点、用户界面更新、链式调用、promise支持、更好的测试性
    43.css的 : 和 :: 有啥区别
    单冒号:伪类
    双冒号:伪元素
    44.微信小程序授权登陆 解释一下
    不需要用户输入账户密码,点击授权微信生成一个临时的code,通过回调函数传给小程序
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容