vue，小程序，html，js 60道常见面试题_js小程序vue面试题

1.Vue，react，jq对比
vue 是一个以数据驱动视图的渐进式 mvvm 模式框架，双向数据绑定
react专注视图层的响应式框架，单项数据绑定
jq操作dom类库的

2.vue指令？v-if v-show ；v-html v-text区别
v-for，v-model，v-bind，v-on， v-once；
v-if控制的是元素的加载与销毁，v-show控制元素的display样式；
v-html可以渲染dom片段，v-text只能渲染文本

3.vue组件通信
1.父传子：父组件用v-bind绑定自定义属性将数据传给子组件件，子组件props接收
2.子传父：父组件用v-on绑定自定义事件将函数传递给子组件，子组件$emit接收
3.父子通信：v-model，在子组件里注入一个 value 值和 input 事件函数；
（value 在 props 获取，input 函数使用$emit 触发，好处是很简洁，坏处是不容易维护，尤其是容易和其他名字冲突）
4..sync修饰符，对属性进行假的数据双向绑定，让子组件在不调用父组件传递过来的函数的情况下修改父组件传递过来的属性值
5.跨级：vuex
6.其他：父子/provide/inject 兄弟bus

4.什么是高阶组件
高阶组件就是一个函数，传给他一个组件，返回一个新的组件，新组件使用传入的组件作为子组件，主要用于代码复用

5.为什么组件中的data必须是一个函数，然后return一个对象
Data是一个函数时，每个组件实例都有自己的作用域，每个实例相互独立，不相互影响
Object是引用数据类型，如果不用function返回，每个组件的data都是内存的同一个地址，一个数据改变其他的也会改变

6.vue2.x的双向绑定原理
API是通过object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发消息给订阅者，触发相应的监听回调。

7.Vue内置组件
动态加载组价
组件缓存
Slot 作为插槽，能让我们在组件标签内填充内容
Template 模板
Transition 为组件载入和切换提供动画效果

8.vue生命周期
创建阶段：beforeCreat和created
挂载阶段：beforeMount和mounted （请求接口）
更新阶段：beforeUpdate和updated
销毁阶段：beforeDestory（清除全局变量，定时器）和destoryed

9.修饰符
事件修饰符：.once 让事件只执行一次 ; stop：禁止冒泡； prevent：阻止默认事件； native：绑定原生事件
按键修饰符：.13 enter 监听回车 ； left，right鼠标左右点击；
指令修饰符：v-model：.number 将值转为数字
属性修饰符：.sync 让子组件直接使用$emit修改父组件传过来的值

10.计算属性和监听器
Computed：对数据或属性进行监听操作，但是不能修改，对操作后的数据进行返回，得到一个新值； 不受数据类型影响。
Watch：只是对数据或值进行监听，没有返回值，对引用数据类型要开启深度监听，受数据类型影响

11.computed是一个对象时，有哪些选项？Computed和methods区别？Watch是一个对象时，有哪些选项？
有set和get两个选项；
methods是一个方法可以接收参数，computed不能，computed是可以缓存的；
watch配置：handler deep immeditate 是否立即执行

12.vue路由有哪些模式，区别
History 和 hash
Hash：它是锚点技术实现的，弊端：不美观，微信qq内置浏览器有些情况会过滤掉#后面的值。兼容所有
History：h5新api history封装的，ie9下不兼容。

13.路由配置规则
嵌套路由：基于同一个根地址，所有子路由都在children里，都有对应页面
动态路由基于同一个根地址，可以匹配到多个地址，所有匹配成功的地址，页面都是同一个。
重定向：redirect：地址（容错处理）
别名：alias
元信息：meta 用于做路由权限标记
Name：路由取名

14.路由跳转方式？Route和outer区别？传参方式，区别？
标签跳转叫声明式导航，js跳转叫编程式导航
Router值示例对象，包含路由所有方法和属性，一般用于路由跳转；route指当前路由页面信息一般用于获取当前路由传参或路径
Query传参，在地址栏中用类似get请求的方式传参：?键名=值 ；
params ：显示：动态路由。 隐式传参：params属性配置参数。
隐式params数据存在内存中，页面刷新导致数据丢失， query和显示parmas数据在地址栏中，刷新不会丢

15.路由的生命周期（拦截器-守卫-钩子）
全局：前置beforeEach 三个参数 to from next 后置afterEach
组件内：beforeRouteUpdate beforeRouteLeave

16.vue组件上scoped属性的作用，原理？ nextTick原理及优点？
Style标签上添加scoped属性，表示它的样式作用于当下的模块，实现样式私有化。
原理：使用postCss来实现转换，给dom增加一个动态属性，然后css选择器也额外增加对应的属性来选择该dom，达到该样式只属于该属性的dom，实现组件样式的模块
nextTick：将回调延迟到下次dom更新循环之后的操作，在修改数据后立即使用它，等待dom更新，相对未来更新后的视图进行操作，我们只需要把要执行的函数传递给this.$nextTick方法，

17.vuex组成部分，及工作流程
State：全局状态存放的地方，等价data
Getters：计算处理state，等价于组件中的computed
Mutations：专门修改state的，只执行同步，使用commit调用
Actions：专门用于执行异步函数代码的，一般用于接口请求，返回值通过mutations调用。使用dispath调用
Plugins：拓展vuex功能插件接口，一般做本地数据持久化。
工作流程：1.客户端操作事件，dispatch调用一个action 2.对应的action处理参数，比如接口，逻辑操作 3.mutation接收一个type类型触发对应函数，修改state。4.state更改后对应view视图在render作用下重新渲染

web

18.ajax请求的五个步骤
1.设置XML.Httprequest请求 2.设置请求方式和请求地址 3.用send发送请求 4.监听状态变化 5.接收返回的数据

19.Ajax没有请求完，终止请求
再new一个cancelToken函数的参数，让这个参数被外部使用，所以就使用了第四个参数、函数，使用参数进行返回，对第四个参数重新赋值

20.promise解决回调地狱及异步处理
Promise一旦建立就立即执行，此时的状态是pending（进行中），他接受两个参数resolve和reject，他俩都是函数。
Resolve是将promise进行中的状态变为成功，在异步操作成功时，将结果作为参数传递出去。
Reject是将promise进行中状态变为失败，异步操作失败时调用，将异步操作的错误作为参数传递出去。

21.什么是回调地狱
一个异步请求套着一个异步请求，一个异步请求依赖于另一个的执行结果，使用回调的方式相互嵌套

22.作用域
全局作用域：直接编写在script标签之中的js代码，任何地方都可以访问到的变量。都是全局作用域。页面打开时创建，关闭时销毁。
局部作用域：调用函数时创建函数作用域，函数执行完毕，函数作用域销毁

23.什么是闭包
能够读取其他函数内部变量的函数，简单理解为“定义在函数内部的函数”。
内存消耗大，大量使用可能会造成内存泄露。解决内存泄漏，在外部给变量值赋为null。最后垃圾回收机制回收掉就行了

24.回流重绘
回流：页面每次加载都会有一次回流，元素的尺寸，布局，隐藏等改变需要重建。称回流。
重绘：dom元素样式改变，但不影响布局。如背景色，字体颜色改变。称为重绘

25.递归
在运行的过程中调用自己；如：阶乘，斐波拉契数

26.跨域解决方法
1.通过jsonp跨域 2.nginx代理跨域 3.location.hash + iframe跨域 4.CORS跨域资源共享 5.node js 中间代理跨域 6.webSocket协议跨域

27.jsonp跨域原理
动态创建script标签，请求服务端的php文件，这个文件返回的结果是一段js（作用：调用我们定义好的函数）从而将服务端的数据发送客户端

28.函数，原型，对象关系。原型链
原型链：任意对象都有原型，原型也有原型，其终点是object.prototype，在对象和object.prototype之间由一条__proto__串起来的链式结构。称为原型链
对象通过__proto__找到原型，原型通过constructor找到构造函数，构造函数通过prototype找到原型，构造函数new成实例化对象

29.Get和post区别
Get的内容在url显示，传送数据量小不能大于2kb，安全性低，一般用于请求
Post不在url显示，数据量大，安全性高，一般用于发送数据到服务器

30.前端性能优化
1.减少http请求 2.合并文件，图片 3.减少dom操作，尽量用变量代替 4.压缩js，css代码 5.图片格式选择合理 6.css放在head中加载，js放在body末尾

31.清除浮动
1.在最后一个浮动标签后添加一个标签，设置clear：both
2.父级添加overflow：hidden
3.使用after伪元素清除
4.给父级元素定义高度

32.元素水平处置居中
父级Display:flex; justify-content:center; align-item:center;
父级：display:flex; 子级：margin:auto
父级：text-align:center; line-height:; 子级：display: inline-block
父级：position:relative; 子级：position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)

33.Link和@import区别
Link是HTML提供的标签，不仅可以加载css，还可以定义rss，rel连接属性等，它引入的css被同时加载，不存在兼容，可以通过js操作dom，来插入link标签改变样式
@import是css提供的语法规则，只有导入样式的作用，在页面加载完毕后加载css，IE5之前不支持。

34.Call，apply，bind区别
都可以改变this指向，call和apply立即执行，call传序列参数，apply传数组或类数组。Bind需要调用才执行，传序列参数

35.节流防抖
节流：当持续触发事件时，保证一定时间内调用一次事件处理函数（固定时间内处理一次）
防抖：当持续触发事件时，一定时间内没有再次触发，事件处理函数才会执行一次。（固定时间内触发了就继续延时，当不触发时执行）

36.上拉下拉开发思路
上拉：只要上拉，触发函数，就让page页+1，然后调用接口，将页码传过去，拿到数据，追加到数组。
下拉：只要下拉，就让page=1，请求接口，将page传递到后台，拿到数据后，将之前数据清空，再添加新请求的。

Wx

37.Wx有哪些文件
app.json：全局配置。决定页面文件的路径，窗口表现，多tab等
app.js：全局写逻辑的地方
app.wxss：全局样式
Sitemap.json：用于被微信搜索爬取页面
Project.config.json：项目描述

App.json中window的属性：navigationBarBackgroundColor navigationBarTitleText navigationBarTextStyle

38.事件绑定的两种方法，事件流？事件委托？
Bind：不阻止事件冒泡
Catch：阻止事件冒泡
冒泡事件：当一个组件上的事件被触发后，该事件向父节点传递。
事件流：三阶段：捕获 执行 冒泡
事件委托：利用事件冒泡，将子元素上的事件写在父元素上

**39.路由跳转方式 **
保留当前页面：navigateTo 关闭所有页面：reLaunch
关闭当前页面：redirectTo 关闭当前，返回上级或多级：navigateBack
Url属性 跳转地址

40.生命周期
onLoad首先触发，之后onShow，onReady，路由跳转后上一个页面关闭了触发onHide，之后onUnload
监听页码加载：onLoad 监听页面初次渲染：onReady
监听页面显示：onShow 监听页面隐藏：onHide
监听卸载：onUnload

41.小程序wxss和css区别
Wxss只能引入外链，不能使用本地图片。
@import引入外链样式文件，地址为相对路径
尺寸单位rpx，响应式像素。自适应

42.Wx数据的展现与修改
数据初始化：Data:{ age:12 }
使用：双大括号表达式 {{ age}}
修改：this.setData({ age:22 })

43.滑块视图容器 swiper ；请求数据方法
其中只可放swiper-item组件，否则会导致未定义的行为。
属性：indicator-dots 是否显示面板指示点
indicator-color 指示点颜色
indicator-active-color 当前选中的指示点颜色
Circular 是否衔接滑动
next-margin
Wx.request 参数：url,data,methods,header,success

44.自定义组件component
根目录下新建component文件夹，右键新建compoent，它的js文件是在component下的。
properties中设置页面默认值。
在要使用它的父页面的json中注册自定义组件,usingComponents对象下 命名: 路径
之后就可以在wxml页面使用，自己的命名就相当于那个组件，参数直接在标签上赋值
它不会在app.json中生成路径，普通页面js用 page调用。组件component调用

45.自定义模板 template
根目录下创建template文件，新建俩wxml和wxss文件。Wxml的所有内容都在template标签下。Name属性命名模板。
别的页面使用，在wxml中import引入模板地址。Template标签的is属性显示要使用的模板。
Wxss内也要@import引入模板样式。在js内给模板的变量赋值就行了
一般只用于页面展示

46.Change和input事件的区别
Change事件指当前输入框内容发生改变时触发的事件，前提是失去了焦点。
Input事件指当前输入框内容发生改变时就会触发的事件，实时触发，不用失去焦点
获取input框输入的内容。e.detail.value
同一个事件绑定多个input区分：给input一个id值。e.currentTraget.id获取不同id。以此做对应的事情

47.Target和currentTarget的区别
currentTarget要求绑定事件的元素一定是触发事件的元素
target不是

48.页面事件传参的方式，页面弹窗
Id data-key 事件通过event对象获取
Wx.showToast 弹窗，可选参数 titel 和 icon

49.Wx本地存储
存：Wx.setStorageSync(‘键名’,对应的值) 取Wx.gettStorageSync(‘键名’)
注意：存储的数据为json数据 ；属于永久存储 ；单个key最大1MB，上限10MB

50.获取视频实例，视频操作
Wx.createVideoContext 它需要一个组件的id。
VideoContext.seek跳到视频指定位置。Bindtimeupdate获取视频秒数
Bindended播放到末尾时触发
Image替代video性能优化

51.scroll-view下拉刷新上拉加载
下拉刷新，发送请求数据。
自定义下拉刷新事件：bindrefresherrefres
开启自定义下拉刷新：refresher-enabled
自定义下拉刷新默认样式：refredher-default-style
设置当前下拉刷新状态：true 已刷新。False未刷新 refresher-triggered

52.转发分享功能
onShareAppMessage事件函数
Title、page、imageUrl 参数可选
一般写在最下面

53.怎么封装小程序的数据请求的
在根目录下创建utils目录及api和apiConfig.js文件
在apiConfig中封装基础的get，post请求方法。
在api文件引入apiConfig封装好的请求方法，根据页面数据请求的urls，设置对应的方法导出。

54.小程序有哪些传递数据的方法
1.使用全局变量
2.页面跳转时，使用url带参数
3.使用组件模板template传递参数
4.使用本地存储
5.使用插件pubsub ； .subscribe订阅 .publish发布 。先订阅再发布 ;

55.音频
获取背景音频实例：getBackgroundAudioManager()
监听播放onPlay
监听暂停onPause
监听停止onStop
监听进度更新onTimeUpdate
监听自然结束事件onEnded
关闭stop

56.小程序的双向绑定和vue异同
大体相同，但小程序直接this.data的属性不可以同步到视图。必须调用this.setData来更新值

57.wxml和html异同
1.没有dom数和window对象。
2.标签名不一样，小程序标签更少，单一标签多。
3.多了一些像wx:if这样的属性和{{}} 表达式
4.wxml对组件进行了重新封装
5.wxml仅能在微信小程序开发者工具中预览

58.哪些方法可提高小程序应用速度
1.提高页面加载速度
2.用户行为预测
3.减少默认data大小
4.组件化方案

59.小程序wx:if和hidden区别
Wx:if：更高的切换消耗，运行条件变化使用
Hidden：更高的初始渲染消耗，频繁切换使用

60.小程序运行机制
热启动：用过打开过，一定时间内再次打开时不需要重新启动了，这就需要把我们的后台打开的小程序切换到前台
冷启动：用户首次打开或微信主动注销再次打开，需要重新加载启动