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.emit
兄弟组件传值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,通过回调函数传给小程序