前端面试记录（二）

面试时间：2023年3月17日9:00     前端实习（暑期）

keep-alive钩子函数什么时候触发

activated

• 在 keep-alive 组件激活时调用
• 该钩子函数在服务器端渲染期间不被调用

deactivated

• 在 keep-alive 组件停用时调用
• 该钩子在服务器端渲染期间不被调用
• 被包含在 keep-alive 中创建的组件，会多出两个生命周期的钩子: activated 与 deactivated
• 使用 keep-alive 会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在 activated 阶段获取数据，承担原来 created 钩子函数中获取数据的任务。

只有组件被 keep-alive 包裹时，这两个生命周期函数才会被调用，如果作为正常组件使用，是不会被调用的，以及在 2.1.0 版本之后，使用 exclude 排除之后，就算被包裹在 keep-alive 中，这两个钩子函数依然不会被调用！另外，在服务端渲染时，此钩子函数也不会被调用
 

v-for注意事项

进行查找的数据类型，也就是in后写的，是数组和对象

v-for所在的节点提供一个唯一的 key 属性。key属性的类型只能为 string 类型或者 number 类型。

key在有id时就设置为id，没有就设置为index

v-for与v-if不能一起使用，v-for 的优先级比 v-if 更高

微信小程序登录功能如何实现

写一个云函数，名称为open，用来获取微信调用上下文

通过 getApp 方法获取到全局唯一的 App 实例，利用getApp().globalData.openid获取用户的openid并存储到本地缓存，也存储到云数据库

点击登录按钮，查询云数据库中是否有用户头像，有与用户openid匹配的头像就直接用，如果没有，就通过wx.cloud.uploadFile上传用户头像，将头像缓存到本地缓存

查询用户openid进行缓存，本地缓存用到的是wx.setStorageSync

【别人的做法】

1：首先需要一个按钮触发事件

2：调用微信小程序的登录接口wx.login，拿到code

3：调用微信小程序的获取用户信息的接口wx.getUserProfile，拿到用户的个人信息

4：拿到的个人信息调用后台的接口，把个人信息传给后台，登录成功并把相关信息存储在本地的缓存中，方便之后的开发使用:

你提到的 wx.setStorageSync，有sync和无sync有什么区别？

相同点：（功能）

将数据存储在本地缓存中指定的 key 中。会覆盖掉原来该 key 对应的内容。除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用。单个 key 允许存储的最大数据长度为 1MB，所有数据存储上限为 10MB。

不同点：

1、参数上

wx.setStorage有6个参数=》key（必有）、data（必有）、encrypt、success、fail、complete

wx.setStorageSync有2个参数=》string key、any data

2、缓存类型上

wx.setStorage是异步缓存

wx.setStorageSync是同步缓存，同步方法没有success（即缓存成功）、fail（缓存失败）、complete（即缓存完成）3个通用方法。

【注意】微信小程序中以Sync（同步，同时）结尾的，都是都是同步缓存。异步不管保没保存成功,程序都会继续往下执行。同步是等保存成功了,才会执行下面的代码。使用异步,性能会更好;而使用同步,数据会更安全。