工作中的一些总结

vue的keep-alive生命周期

1. 当引入keep-alive 的时候，页面第一次进入，钩子函数的触发顺序：created ➡️ mounted ➡️ activated，退出当前页面时触发deactivated。再次进入此页面时，只触发activated。

2. 只要进入页面activated就会被触发，但是mounted不会重复触发。

3. 如果需要每次进入页面时，都执行一些方法，可以在最外层包裹一层<keep-alive>这样每次进入页面就会执行你想执行的方法，如果只需要执行一次，那么放在mounted中，不失为一种很好的选择。

kep-alive详细使用

WebStorage的使用

1. localStorage和sessionStorage属性，允许在浏览器中存储key/value对的数据。

2. sessionStorage用于临时保存同一窗口的数据，关闭窗口就会删除这些数据。如果关闭窗口不想数据删除，那么请使用localStorage。

WebStorage详细使用

nvm包管理工具的使用

1. nvm是node管理工具，在项目开发中经常遇到node版本过高或过低的问题。这时利用nvm就可以很好的解决这个问题。

2. nvm是一个大家长管着node和npm这两个兄弟，npm是和node一起安装的。所以不用担心npm的问题，没有node就没有npm。

nvm详细使用

vue-router的使用

Vue.js + Vue Router 创建单页面应用

埋点的使用

前端埋点主要分为以下三类：

1. 代码埋点：在需要埋点的地方添加埋点逻辑代码或自定义属性实现。

2. 可视化埋点：使用可视化的工具进行埋点，即无痕埋点。前端页面加载时根据埋点配置，自动调用接口上传埋点数据。

3. 无埋点：前端自动采集全部事件并上报埋点数据。

CSS选择器

选择器的详细使用

微信小程序解码base64

 // 解密base64
    getBase64ImageUrl(URL) {
        let base64Data = URL;
        base64Data = wx.arrayBufferToBase64(wx.base64ToArrayBuffer(base64Data));
        const base64ImgUrl = "data:image/png;base64," + base64Data;
        return base64ImgUrl;
    }

自定义属性

H5新增自定义属性，在标签上，以data-开头
<div data-index="1"></div>

获取自定义属性
const div = document.querySelector('div')
console.log(div.getAttribute(data-index))
div.dataset['index']