2021.5.15 面试准备

1.自我介绍

面试官好，我叫xxx，来自xxx，有过x工作经验，
主要擅长的前端技术有vue全家桶，vue3.0，uniapp，ts，微信小程序，微信公众号，
擅长的后端技术有tp6，fastadmin，nginx，redis，mysql，phpstudy，宝塔等一些常用技术，
个人性格比较随意一点，我更喜欢去学习新的知识，钻研不懂的问题，以上就是我的自我介绍，谢谢！

2.面试题

css

1.css中如何让div水平居中

1.不确定当前div的宽度和高度，采用 transform: translate(-50%,-50%); 当前div的父级添加相对定位（position: relative;）
2.确定了当前div的宽度，margin值为当前div宽度一半的负值
3.绝对定位下top left right bottom 都设置0

2.flex常用属性

1.justify-content: space-between：两端对齐，空格在中间
2.space-around：空格环绕
3.flex-wrap: wrap：允许换行

vue

1.Vue3.0和Vue2.0的区别

1.默认进行懒观察
 在 2.0里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。
 3.0 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，在页面载入时性能更加流畅
 
2.重构响应式系统，使用Proxy替换Object.defineProperty
 可直接监听数组类型的数据变化
 监听的目标为对象本身，不需要像以前一样遍历每个属性，有一定的性能提升
 
3.新增Composition API
 在2.0版本使用的是 Options API ，它的特点是 特定的区域写特定的代码 ，小项目使用这种写法更加清晰明了，但是当项目很大，功能很多时就会产生 代码混乱的问题
 而3.0Composition API 的特点是根据逻辑功能来组织代码的，一个功能所有的api放到一起，提高了代码的可读性和可维护性

2.父子组件传值问题

父传子props：子组件在prop中声明后可以直接进行使用，但是传递值不能在子组件进行修改
子传父emit：父组件需要写一个方法用来接收子组件传递出来的数据，而子组件则可以通过$emit(‘方法名’，数据)的方式给父组件传值

3.v-show和v-if指令的共同点和不同点

1.共同点：都能控制元素的显示和隐藏
2.不同点：v-show通过css的display：none，display：block，控制显示隐藏
         v-if是动态的向DOM树内添加或者删除DOM元素，v-if的销毁和创建比较消耗性能

4.如何让CSS只在当前组件中起作用

在组件中的style前面加上scoped

5.vue中如何获取dom(调用子组件方法)

ref="domName" 用法：this.$refs.domName

6.$nextTick的使用

当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功

7.vue有哪些生命周期，说说他们的特点

1.beforeCreate（创建前）：在实例初始化之后，这个时候数据还没有挂载，无法访问数据和真实的DOM 一般不做操作
2.created（创建后）：实例已经创建，仍然不能获取DOM节点，但可以访问data数据，一般在这里进行axios请求
3.beforeMount（挂载前）：在挂载开始之前被调用，虚拟DOM已经创建完成，渲染前最后一个更改数据的机会，一般用于修改data数据
4.mounted（挂载后）：挂在完成，已经渲染出真实的DOM，一般需要操作DOM的方法可以放在这里
5.beforeUpdate（更新前）：检测到数据更新时，但在DOM更新前执行，可以在该钩子中进一步地更改状态，不会触发附加地重渲染过程
6.updated（更新后）：更新结束后执行，所以可以执行依赖于DOM的操作
7.beforeDestroy（销毁前）：当要销毁vue实例时，在销毁前执行。一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件
8.destroyed（销毁后）：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

8.vue父子组件钩子函数的执行顺序？

父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

9.computed和watch的区别

computed:计算属性，举个栗子，当我们在购买商品功能时，需要计算商品总价，我们可以在计算属性中写一个方法，return 商品单价*商品数量，
把方法名称双括号放在HTML中，就会显示出商品总价，而当商品单价或者商品数量发生变化时，商品总价也会随之变化
watch：监听器：一般用来监听data数据的变化，当data数据变化后，就会触发方法，并且可以在参数中查看新数据和旧数据

10.watch的两种属性

1.immediate： 立即处理 进入页面就触发
2.deep：深度监听 因为对象和数组是引用类型，不会触发watch，我们需要进行深度监听
'food.name'(newVal, oldVal) {}也可进行深度监听

11说说你对MVVM设计模式的理解

m：代表数据层 只关注数据本身，没有任何业务逻辑
v：代表视图层  只负责展示页面
vm：代表业务逻辑层：负责连接起view和model层，将model层的数据通过设定的逻辑处理展示到view层

12.说几个vue指令

v-model：数据绑定
v-for：循环
v-if：显示隐藏
v-else-if ：和v-if连用
v-else：和v-if连用
v-show：显示隐藏
v-bind：动态绑定
v-on：绑定事件

13.vue常用的修饰符

.stop：防止事件冒泡
.once：只会触发一次
.self：只会触发自己范围内的事件，不包含子元素

15.this.$set的作用

	我们在为数组或者对象赋值时，视图并未更新，vue监听不到对象的添加和删除，我们需要用到this.$set
	this.$set(this.data, key, value)

14.vue在script和在data里定义变量有什么不同

在script中直接定义变量会出现环境污染问题，影响其他页面数据

15.浅拷贝和深拷贝的区别

深拷贝和浅拷贝只针对像 Object, Array 这样的复杂对象，假设B复制了A，当修改B时，看A是否会发生变化，如果A变了，说明是浅拷贝；如果A没变，那就是深拷贝

vue-router

1.$ router和$route的区别

	router是VueRouter的实例，相当于一个全局的路由器对象，里面含有很多属性和子对象，比如经常用到的跳转this.$router.push
	route是当前的路由对象。。可以从里面获取当前路由的名称、路径、参数等信息

2.使用路由模块来实现页面跳转的两种方式

	this.$router.push(‘路由地址’)
	<router-link to="路由地址"></router-link>

3.vue-router的两种模式

Hash模式：vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载，使用hash模式时URL中始终有#号
History模式：这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面，如果后台没有正确的配置，当用户在浏览器直接访问 URL就会返回 404

4.vue-router两种传参方式

params：this.$router.push({ name: 'news', params: { userId: 123 }})
query：this.$router.push({ path: '/news', query: { userId: 123 }})
获取参数：{{this.$route.query.userId}}
命名路由搭配params，刷新页面参数会丢失
查询参数搭配query，刷新页面数据不会丢失

vuex

1.vuex是什么？怎么使用？哪种功能场景使用它？

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。应用场景是多个组件共享数据或者是跨组件传递数据时

2.vuex有哪几种属性

1. state：vuex的基本数据，用来存储变量
2. geeter：从基本数据(state)派生的数据，相当于state的计算属性
3. mutation：提交更新数据的方法，必须是同步的(如果需要异步使用action)。每个mutation 都有一个字符串的 事件类型 (type) 和 一个 回调函数 (handler)。回调函数就是我们实际进行状态更改的地方，并且它会接受 state 作为第一个参数，提交载荷作为第二个参数。
4. action：和mutation的功能大致相同，不同之处在于 ==》1. Action 提交的是 mutation，而不是直接变更状态。 2. Action 可以包含任意异步操作。
5. modules：模块化vuex，可以让每一个模块拥有自己的state、mutation、action、getters,使得结构非常清晰，方便管理。

3.vuex如何同步或异步更改state数据

	1.同步：this.$store.commit("xxx")
	2.异步：this.$vuex.dispatch("xxx")

uniapp

1.uniapp声明周期

1. onLoad：首次进入页面加载时触发，可以在 onLoad 的参数中获取打开当前页面路径中的参数
2. onShow：加载完成后、后台切到前台或重新进入页面时触发
3. onReady：页面首次渲染完成时触发
4. onHide：从前台切到后台或进入其他页面触发
5. onUnload：页面卸载时触发
6. onPullDownRefresh：监听用户下拉动作
7. onReachBottom：页面上拉触底事件的处理函数
8. onShareAppMessage：用户点击右上角转发

2.uni-app的优缺点

优点:
a. 一套代码可以生成多端
b. 学习成本低,语法是vue的,组件是小程序的
缺点:
a. 问世时间短,很多地方不完善
b. 社区不大
c. 官方对问题的反馈不及时

3.uniapp 有哪6种跳转方式

uni.navigateTo：保留当前页面，跳转到应用内的某个页面
uni.redirectTo：关闭当前页面，跳转到应用内的某个页面
uni.reLaunch：关闭所有页面，打开到应用内的某个页面
uni.switchTab： 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
uni.navigateBack：关闭当前页面，返回上一页面或多级页面
uni.preloadPage：预加载页面，是一种性能优化技术。被预载的页面，在打开时速度更快

4.uniapp常用的数据缓存

uni.setStorage：将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口
uni.setStorageSync：将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口
uni.clearStorage：清理本地数据缓存

5.如何让图片宽度不变，高度自动变化

给image标签添加 mode='widthFix'

git

1.举例git基本命令

1. git init 把这个目录变成git可以管理的仓库
2. git add . 将所有文件修改提交到本地暂存区
3. git commit -m ‘***’ 把暂存区文件提交到仓库
4. git pull  拉取远程仓库所有分支更新并合并到本地
5. git push 把本地库的所有内容推送到远程库上

2.Git和SVN的区别

Git是分布式版本控制系统，SVN是集中式版本控制系统

跨域

1.什么是跨域

跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据。源指协议，端口，域名。只要这个3个中有一个不同就是跨域

2.跨域解决方案

后端：header('Access-Control-Allow-Origin: *')

前端：
	代理：可以配置一个代理的服务器可以请求另一个服务器中的数据，然后把请求出来的数据返回到代理服务器中，代理服务器再返回数据给客户端，这样就可以实现跨域访问数据。
	比如配置一个代理名称叫做api 把target设置为服务器域名 ，pathRewrite设置为api，在请求接口时在接口路径拼接上api，就可以进行访问了
	示例图："proxy": {
				"/api": {
					"target": "http://接口域名.com/",
					"pathRewrite":{"^/api":""}
				}
			}

Typescript

1.什么是Typescript

Typescript是强类型的Javascript超集，支持ES6语法，支持面向对象编程的概念，如类、接口、继承、泛型等。
Typescript并不直接在浏览器上运行，需要编译器编译成纯Javascript来运行。

2.Typescript的优缺点

优点：
1.编译时提供错误检查， 在代码运行前就会进行错误提示
2.使用继承提供可重用性
3.代码结构更加明确，提高代码的可读性和可维护性

缺点：
1.需要长时间的来编译代码

3.Typescript有哪些基础类型

1.any：声明为 any 的变量可以赋予任意类型的值
2.number：表示整数和分数
3.string：字符串
4.boolean：布尔值
5.[]：数组
6.[string, number]: 元组
7.enum：枚举
8.void：用于标识方法返回值的类型
9.null：null
10.undefined：undefined
11.never：是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

微信小程序

1.小程序登陆流程

1.客户端调用 wx.login() ，获得返回参数 code
2.调用wx.getUserProfile()获取用户信息
3.客户端调用 wx.request() 将 code ,和用户信息发送到服务器
4.服务器将 code 和存储在服务器的 appid 和 appSecret 共三个参数作为请求参数加入URL，向微信服务器接口发起请求
5.微信服务器会获得返回参数 openid 和 session_key 。这两个数据主要用在支付，数据签名，数据解密等与用户登陆态和标识有关的逻辑中。
6.服务器返回token则登陆成功

2.小程序支付流程

1.小程序调用调用开发者服务器获取支付参数的接口传入token
2.开发者服务器调用微信支付SDK传入用户和订单相关参数，再次签名完成后，就把五个参数返回给小程序
3.小程序获取支付参数后调用wx.requestPayment请求支付api

小程序和uniapp差不多可互相参考。。。

php

1.什么是面向对象？主要特征是什么？

面向对象是程序的一种设计方式，它利于提高程序的重用性，使程序结构更加清晰。主要特征：封装、继承、多态。

2.SESSION 与 COOKIE的区别是什么，请从协议，产生的原因与作用说明?

1.SESSION存储在服务器端，COOKIE保存在客户端。
2.Session比较安全，cookie用某些手段可以修改，不安全。Session依赖于cookie进行传递。

nginx

1.什么是nginx？

	Nginx是一个 轻量级/高性能的反向代理Web服务器，他实现非常高效的反向代理、负载平衡

2.什么是正向代理和反向代理

1.正向代理就是一个人发送一个请求直接就到达了目标的服务器
2.反方代理就是请求统一被Nginx接收，nginx反向代理服务器接收到之后，按照一定的规 则分发给了后端的业务处理服务器进行处理

3.什么是负载均衡

N台服务器平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况