江上之清风，山间之明月

reduce() 方法对数组的每个元素依次执行自定义回调函数，返回值为回调函数 return 的处理结果。
先看一个示例：

1
2
3
4

const arr = [1, 2, 3, 4];
const reduceFn = (accumulator, currentVal) => accumulator + currentVal;
console.log(arr.reduce(reduceFn));// 10
console.log(arr.reduce(reduceFn, 5));// 15

数组更新检测注意事项

由于 JS 的限制，下列情形数组的更新不能被检测到。

1. 使用数组下标设置一个数组项时
2. 操作数组长度时

1
2
3
4
5
6
7

var vm = new Vue({
  data: {
    arr: ['a', 'b', 'c']
  }
})
vm.arr[1] = 'x'; // 不是响应式
vm.arr.length = 2; // 不是响应式

前言

今天在翻阅 Vue 的文档查看 watch 相关解释时，在查看到 vm.$watch 时看到了“变异”一词。官网内容摘抄如下：

注意：在变异 (不是替换) 对象或数组时，旧值将与新值相同，因为它们的引用指向同一个对象/数组。Vue 不会保留变异之前值的副本。

当时内心充满了困惑，当真是不小的朋友也有很多问号？明明是我认识的词语，却又那么陌生。为了理解“变异”一词的意思，写下这篇文章。

什么是变异？

变异方法，顾名思义，会改变调用了这些方法的原始数组。

数组的变异方法包括 push(), pop(), shift(), unshift(), splice(), sort(), reverse()。这些变异方法也会触发视图更新。

为什么写这篇笔记？

记得在以往的面试中多次被问到这个问题，回答的都不理想，仔细想想也是理解的不到位。今天借着休息的时间准备查阅文档，写写示例代码去仔细理解下。

computed 计算属性是什么？

computed 计算属性介绍：

computed 计算属性是一个对象。它的使用方法是在 computed 属性中定义一个方法，和给对象定义方法一样，方法名可以直接在页面（template）中使用，不需要加 （），这是因为计算属性看起来是指向了方法（function），其实指向的是方法 return 的结果。
computed 计算属性的特性是计算结果会被缓存，如果 function 中依赖的响应式属性发生变化，computed 便会重新计算。注意如果依赖实例之外的属性（比如非响应式属性）则计算结果不会更新。
此外，如果在计算属性中使用了箭头函数，则 this 不会指向组件的实例，但在函数中依然可以将实例以函数的第一个参数访问。如下：

1
2
3

computed: {
	aDouble: vm => vm.a * 2
}

flex: 1; 到底是什么意思？

首先 flex 是 flex-grow, flex-shrink, flex-basis. 三个属性的简写，默认值为 0 1 auto。该属性有两个快捷值：auto(1 1 auto) 和 none(0 0 auto)。建议优先写 flex 属性，而不是写三个分离的属性，因为浏览器会自动计算其相关值。

• flex-grow 默认为 0， 只能是正整数。即父元素有剩余空间也不放大元素。如果为 1，则把剩余空间的一份加给自己的宽度。
• flex-shrink 默认为 1，只能是正整数。即父元素空间不足则按比例收缩。如果为 0，则不收缩
• flex-basis 默认为 auto, 即元素本身的大小。这个属性定义了在分配多余空间之前，元素占据的主轴空间，浏览器根据这个属性计算是否有多余空间。可以设置为和 width 和 height 属性一样的值，比如 220px，则元素占据固定空间。

以上大部分是我初次学习 flex 布局记下的笔记内容。

一、开发情况简述：

后端未部署，目前开发阶段直接连同事电脑，前端由我负责。

二、问题描述

最近在使用 uni-app 开发微信小程序时，遇到了真机调试接口访问失败的问题。一开始草草的翻了官方文档，没看出个所以然。昨天在网上搜了一下原因，记得有网友提到了防火墙的问题。今天上午我试着关闭本机的防火墙后，还是不行。

前言

layuiAdmin pro 使用 gulp 构建源码时, controller 里的大部分文件夹里的 js 代码没有压缩输出，但也未报错。

问题详述

1. src/controller 目录结构如图：
   
   阅读全文 »

相同点

1. 都有虚拟 DOM，都有组件概念，都有自己的构建工具，都有自己的 Chrome 调试工具，都支持服务端渲染，都是数据驱动视图。
2. 都通过 props 参数进行父子组件的数据传递。

不同点

1. Vue 使用普通的 HTML 书写页面结构。而 React 使用 JSX 书写页面结构，也就是在 JS 中书写 HTML 。（从技术上来说，Vue 也支持 render 函数和 JSX 语法。）
2. Vue 文档友好，相对简单易学，便于整合现有系统，不需要整体重构。而 React 文档是英文的，组件更多靠 JS 实现。
3. Vue 由尤雨溪的团队维护，React 由 Facebook 官方维护。vue-router 和 vuex 由 Vue 官方维护，而 react-router 和 react-redux 由社区成员维护。
4. Vue 使用 data 属性保存数据，而 React 使用 state 对象保存数据，state 对象要使用 setState() 方法改变状态。
5. Vue 构建移动应用的 weex 仍处于开发试验阶段，不够完善，而 React Native 更加成熟强大。
6. Vue 会追踪每个组件的状态，不会重新渲染整个组件树，而 React 会重新渲染所有的子组件，所以 React 有 shouldComponentUpdated 生命周期函数去控制。
7. Vue 使用单文件创建组件，而 React 使用 JSX + 行内样式创建组件。
8. Vue 支持双向数据绑定，而 React 是单向数据流，需要自己去模拟实现。
9. Vue 中传递给子组件的 props 会自动更新，而 React 需要通过 componentWillReceiveProps 生命周期钩子去监测 props 变化。

ECMAScript 关键字

• function
  解释：
  function 关键字用于创建一个函数。
  语法：

1
2
3

function(){

}

• this
  解释：
  this 关键字在 js 中是指当前行为执行的主体。

  • this 指向
    1. 普通函数调用，this 指向 window 。注意：严格模式（’use strict’）下，this 指向 undefined 。
    2. 构造函数中 this 指向构造函数实例化出来的对象，原型方法中的 this 也是指向实例化对象。
    3. 方法调用中 this 指向调用该方法的对象。
    4. 事件处理函数中的 this 指向触发事件的对象（事件源）。
    5. 定时器中的 this 指向 window 。

• new
  解释：
  new 关键字用于搭配构造函数创建实例化对象。

  • new 关键字执行过程
    1. 创建空对象。
    2. 让 this 指向空对象。
    3. 执行构造函数，给创建的新对象添加属性和方法。
    4. 返回对象给函数的调用者。

• return
  解释：
  return 关键字用于函数中，使用 return 可以返回需要返回的值，return 后面可以是任意的 js 数据类型。
  return 后面不写数据会返回 undefined 。
  return 后面的代码不再执行，直接结束函数。
  return 关键字作用范围是函数内。
  语法：

1
2
3

function(){
  return;
}

本人喜欢前端开发，大学专业是软件工程（数字多媒体方向），对设计方面略懂一点，也比较热爱骑行。上图是我以前为我们学校的骑行车队——周师如风车队（非官方组织）设计的队旗，Logo 部分有借鉴一位网友的设计。