zaoqinghuan的博客

提到map用法，很多人想到forEach，那么这两种方法的区别是什么？会有人说，forEach会改变原数组；map不会改变原数组，返回一个新数组。事实是这样的吗？答案不是，这种说法不准确，是有条件的。1、当数组的值为基本类型的时候，map遍历数组，当对数组中的值做处理的时候，的确不会改变原数组。let a = [1,2,3]b=a.map(item => { item = item+1 })console.log(a) // [1,2,3]console.log(b) // [2,3,4]

一、vue初始化做了什么？1、创建Vue实例对象2、init过程会初始化生命周期，初始化事件中心，初始化渲染、执行beforeCreate周期函数、初始化 data、props、computed、watcher、执行created周期函数等。3、初始化后，调用mount方法对Vue实例进行挂载（挂载的核心过程包括模板编译、渲染以及更新三个过程）。4、如果没有在Vue实例上定义render方法而是定义了template，那么需要经历∗∗编译阶段∗∗。需要先将template字符串编译成renderfu.

在移动端项目中，用户通过向上滑动，加载列表数据，实现分页的功能。当总页数为1页或者是最后一页时候，底部显示“没有更多数据”字样，否则显示“滑动加载更多”的字样。一、组件的封装1、html2、jsexport default {props: {parentPullUpState: {default: 0},onInfiniteLoad: {type: Function,require: false}},components: {// “van-loading”: Loading

方法一、封装成组件页面使用该组件放大镜组件代码 方法二、使用vue插件vue-piczoom1、安装vue-piczoomnpm install vue-piczoom --save2、使用组件默认是100%的高宽，所以建议将组件包含在一个有固定高宽的容器内。如： import PicZoom from 'vue-piczoom'export default { name: 'App', components: { PicZoom }}.

移动端项目开发中，处理滚动列表是再常见不过的需求。1、better-scroll 常见的 html 结构：2、安装better-scroll插件 npm i better-scroll -D页面引入import BScroll from “better-scroll”;2、初始化better-scrollbetter-scroll 的初始化时机很重要，因为它在初始化的时候，会计算父元素和子元素的高度和宽度，来决定是否可以纵向和横向滚动。因此，我们在初始化它的时候，必须确保父元素和子元素的内容已

背景：在一些项目中，在页面的右下角会有一个返回顶部的按钮。点击这个按钮，页面会平滑的滚动到顶部。我们向大家介绍了页面平滑滚动的2种方法。一、window.scrollTo()window.scrollTo(x, y) 可以通过传入文档(HTML 中的 document)中的x轴坐标和y轴坐标将页面滚动到某个位置。该 API 还支持传入一个 options 对象，其中left属性等同于x轴坐标；top属性等同于y轴坐标；behavior 属性表示滚动行为，其类型为 String，可选值有 3 个：smo

在微信小程序里插入折线图，可以使用wx-charts，在绘制到canvas上。wx-charts具体用法就不介绍了。折线图显示后，却发现了一个问题：数据x轴长度不确定，导致如果数据很长的话，数据就会挤在一起，如果长度较大，canvas能滚动就好了。在网页中，我们直接设置父元素固定宽度，子元素宽度超过父元素，让父元素overflow：auto;就行了，可是对微信小程序的canvas组件不起作用。第一时间想到scroll-view组件，但是scroll-view组件不能作为canvas的父元素。但是研究

在vue中，有一个插槽的概念。什么是插槽？插槽是子组件提供给父组件使用的一个占位符，父组件可以在这个占位符中填充任何模板代码，如HTML，组件等，填充的内容会替换子组件中的slot标签。也就是说插槽是组件的一块HTML模板，这块模板显示不显示，怎么显示由父组件来决定。插槽有普通插槽（匿名插槽、具名插槽）和作用域插槽。一、匿名插槽匿名插槽，也可以叫它默认插槽，或者与单个插槽（vue的官方叫法），我们可以叫它匿名插槽。因为它不用设置name属性。单个插槽可以放置在组件的任意位置，但是就像它的名字一样，一

前提: 在小程序中，子组件需要接受父组件传来的2个值A和B，子组件需要同时根据A和B做一些业务处理。通常，我们可以在properties单独的针对A和B进行监听，但是我们发现，在A中使用B，取不到B值，或在B中使用A，取不到A值。这是为什么呢？其实这个涉及到事件循环的知识。那么，有没有同时能监测到这两个值的方法呢？所以针对子组件需要同时根据A和B做一些业务处理的情况，我们需要同时监听这两个值变化。只要有一个值发生变化，都会重新处理相关业务。参考微信开发文档：https://developers.w

前提：浏览器中的事件循环（Event Loop）和node环境下的事件循环表现是不同的。因为运行和执行是两个概念，不同的环境造就不同的人生。一、浏览器中的 Event Loop1、核心概念事件循环中的异步队列有两种：macro（宏任务）队列和 micro（微任务）队列。宏任务队列可以有多个，微任务队列只有一个。（1）常见的 macro-task 比如：setTimeout、setInterval、 setImmediate、script（整体代码）、 I/O 操作、UI 渲染等。（2）常见的 mi

一、问题描述在这个例子中，通过 forEach 遍历的将每一个数字都执行 multi 操作。代码执行的结果是：1 秒后，一次性输出1，4，9。这个结果和我们的预期有些区别，我们是希望每间隔 1 秒，然后依次输出 1，4，9；所以当前代码应该是并行执行了，而我们期望的应该是串行执行。 forEach 的回调函数是一个异步函数，异步函数中包含一个 await 等待 Promise 返回结果，我们期望数组元素串行执行这个异步操作，但是实际却是并行执行了。二、怎么解决方法一、方法二、利用for of 代

一、计算属性computed :1.结合源码分析， 支持缓存，只有依赖数据发生改变，才会重新进行计算得到新值，新值和旧值进行比较，如果相等，取缓存，不会重新渲染视图，反之，渲染视图（这是vue后来的优化，之前是只要依赖数据发生变化，便会重新渲染视图）2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化3.computed 属性值会默认走缓存，计算属性是基于它们的响应式依赖进行缓存的，也就是基于data中声明过或者父组件传递的props中的数据通过计算得到的值4. 如果一个属性是

一、问题及原因在项目中，我们会发现sopPopups的值在被修改为true后，结果打印出来的sopPopups值还是之前的false,但是在this.$nextTick中打印sopPopups的值为true。这是为什么呢？？原因：Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新，dom更新是一个异步过程。具体来说，异步执行的运行机制如下（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。（2）主线

随着项目越来越大，性能问题已经成为了困扰业务发展的重要因素。业务发展、用户体验都非常迫切的需要释放页面的负载，提高页面加载速度。vue项目中，异步组件的使用有利于项目的性能优化。一、什么是异步组件异步组件就是定义的时候什么都不做，只在组件需要渲染（组件第一次显示）的时候进行加载渲染并缓存，缓存是以备下次访问。结合vue的源码分析，异步组件的本质是：实现了2次渲染，先渲染成注释节点（占位），当组件渲染成功后，调用forceRender重新渲染二、异步组件的三种方法1、工厂函数实现在大型应用中，.

在做小程序的项目中，对接口返回的时间格式，有时为“2021-03-20 11:28:50”，前端对该格式转为时间戳的过程中，发现不生效且在苹果手机上。所以解决的方法有两种。方法1、让接口直接返回时间戳的格式方法2、前端对格式进行特殊处理，将“-”转为"/"：...

在项目开发中整理了常用的一些js技巧，灵活的运用，会增强你解决问题的能力，也会对你的代码简洁性有很大的改观，有利于指导工作的开展一、数组去重1、利用set数据结构，set类似数组，成员都是唯一的，没有重复的，本身是构造函数，所以可以new。const arr=[1,1,1,4,5,5,4,3,9,3];function unique(arr){uniqueArray.from(new Set(arr)) // 或者 […new Set(arr)]}newArr(arr)2、利用indexOf

互联网项目，最重要的便是用户体验。对于网站的性能，在行业内有很多既定的指标，但就以前端er而言，我们应该更加关注以下指标：白屏时间、首屏时间、整页时间、DNS时间、CPU占用率。今天，我们将从性能优化的以下方面展开介绍一、网络传输性能优化1、善用缓存，不重复加载相同的资源浏览器的缓存策略（1）为了避免用户每次访问网站都得请求文件，我们可以通过添加 Expires 或 max-age 来控制这一行为。Expires 设置了一个时间，只要在这个时间之前，浏览器都不会请求文件，而是直接使用强缓存。而

在开发vue项目的时候，对整个项目会有一些配置。这对整个项目是有很大的帮助的一、启用gzip压缩，让页面加载更快一般来说，gzip的开启只要服务端去做就好，但是服务端需要先根据设置好的压缩等级去压缩文件，然后再将压缩文件返回到浏览器。而这里，webpack的CompressionWebpackPlugin插件可以帮我们生成gzip的压缩文件。可以如果提前将压缩文件存放在服务器中，服务器在处理请求的时候将节省资源的压缩时间，直接读取服务器上的.gz文件。在vue-cli2中，只需要将config/ind

有时候我们开发的移动端项目在PC端浏览器显示的很正常，但是到了手机上就有问题了，这可就让人很纠结，只能盲改，如何能在手机上面查看log,查看接口请求等等，你需要使用vConsole方法一、安装vcosole1、yarn add vConsole -S 或者 npm i vConsole -S2、main.js 引用// 开发环境下面使用vConsole进行调试if (process.env.NODE_ENV === ‘development’) {const VConsole = requir

之前有一种流行已久的移动端适配方案，那就是rem。const deviceWidth = document.documentElement.clientWidth || document.body.clientWidth;document.querySelector(‘html’).style.fontSize = deviceWidth / 7.5 + ‘px’;设置根font-size后，px和rem的转换比例成了100, 为比如UI稿一个长宽分别为120px40px，那么开发者对应的写成1.2