1、代理

分类：

• 正向代理。
• 反向代理。

1.1、 正向代理：

1. 开发环境中。
2. 脚手架服务器实现代理。
3. webpack devServer。
4. 浏览器发请求先请求正向代理服务器，由正向代理服务器发请求给目标服务器。
5. 服务器端不知道请求到底由谁来发出。

1.2、反向代理：

1. 生产环境中。
2. 反向代理服务器实现。
3. nginx。
4. 浏览器发请求到服务器端，先由反向代理服务器接收，转发请求给目标服务器。
5. 浏览器端不知道由谁返回的数据。

2、Vuex

2.1、作用

1. 集中管理状态数据。
2. 用于给多个组件共享。

2.2、核心概念

1. store对象。
2. state：状态数据。
3. mutations：同步修改状态数据。
4. actions：

• 获取异步数据。
• 将异步数据交给mutation同步处理。

5. dispatch：分发action。
6. getters：

• 用于根据已有的状态数据计算得到新的状态数据。
• 等同于Vue中的computed。

7. modules：用于模块化管理。

• 附：

<script>
// 从 vuex 中按需导入 mapState 函数
import { mapGetters } from 'vuex'
import { mapState } from 'vuex'
import { mapMutations } from 'vuex'
import { mapActions } from 'vuex'
export default {
    data() {
        return {}
    },
    computed: {
        // 通过刚才导入的 mapState 函数，将当前组件需要的全局数据，映射为当前组件的 computed 计算属性：
        // 将全局数据，映射为当前组件的计算属性

        // 第一种方式：数组。
        ...mapState(['count']),
        // 第二种方式：传一个对象
        ...mapState({
            indexDate: state => state.home.indexDate
        })
        ...mapGetters(['show'])
    },
    methods: {
        // this.$store.commit() 是触发 mutations 的第一种方式，触发 mutations 的第二种方式：
        ...mapMutations(['add', 'addn']),


        // 第一种方式:传一个数组。
        ...mapActions(['addasyncN'])
        // 第二种方式：传一个对象。
        ...mapAction({
            key: value, // key：当前组件定义的方法名；value：是从store映射的函数名，注意：value不能随便写，必须是store中已有的action
        })
    }
}
</script>

3、css样式

3.1、white-space（pre-wrap）

3.2、vertical-align（top）

3.3、两行文本益处省略号显示

display: -webkit-box;
-webkit-line-clamp: 2; // 设置几行
-webkit-box-orient: vertical; // 设置对其模式
text-overflow: ellipsis;
overflow: hidden;

3.4、calc()

calc()函数用于动态计算长度值。

• 要注意运算符前后都需要保留一个空格，例如height: calc(100vh - 80px);
• 任何长度值都可以使用calc()函数进行计算。
• calc()函数支持“+”，“-”，“*”，“/”，运算。
• calc()函数使用标准的数学运算优先级规则。
• 注意⚠️：在uniapp开发小程序时最下面的个人中心、购物车所在模块高度不用减。

3.5、flex布局justify-content所遇到的问题

当子元素为奇数时，最后一个元素会居中对齐，此时可以用伪类取解决：

.aa {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  &:after {
    content: '',
    width: 340rpx //'子元素宽度'
  }
  .item {
    width: 340rpx;
  }
}

4、计算属性computed和监视属性watch

4.1、计算属性computed

• 注意⚠️： 如果你为计算属性使用了箭头函数，则this不会指向这个组件的实例，不过你仍然可以将其实例作为箭头函数的第一个参数来访问。

computed: {
    numRead: (vm) => vm.num*2 
}

• 计算属性的结果会被缓存，除非依赖的响应式property变化才会重新计算。注意，如果某个依赖（比如非响应式property）在该实例范畴之外，则计算属性是不会被更新的

var vm = new Vue({
    data: { num: 1 },
    computed: {
        // 简写（仅读取）
        numRead: function() {
            return this.num*2
        },
        // 读取和设置
        numReadAndSet: {
            // get有什么作用？当读取numReadAndSet时，get就会被调用，且返回值就作为numReadAndSet的值。
            // get什么时候被调用？1.初次读取numReadAndSet时。2.所依赖的数据发生变化时
            get: function () {
                return this.num + 1
            },
            // 当numReadAndSet发生变化时，可设置num的值。
            set: function (v) {
                this.num = v - 1
            }
         }
    }
})
// 输出
vm.aReadAndSet // => 2
vm.aReadAndSet = 3
vm.num // => 2
vm.aRead // => 4

4.2、监视属性watch

监视属性可以监视data中的值，也可以监视计算属性中的值

watch: {
    example: {
        // immediate为true表示初始化时让handler调用一下。
        immediate: true,
        // 深度监听，一般用于监视多层数据结构的时候调用，比如对象中某个数据的变化。
        deep: true,
        // handler什么时候调用？当isHot发生改变时，里面可以观察到旧值和新值的变化。
        handler(newValue, oldValue) {
            console.log('被调用了'， newValue， oldValue)
        }
    }
}

• 注意：在不使用immediate、deep的时候可以使用简写形式。

watch: {
    a(newVal, oldVal) {}
    // 或者
    a: function(newVal, oldVal) {}
}

• 注意⚠️：不应该使用箭头函数来定义watcher函数（例如searchQuery: newValue => this.updataAutocomplete(newValue)）理由是箭头函数绑定了父级作用域的上下文，所以this将不会按照期望指向Vue实例，this.updataAutocomplete将是undefined。

var vm = new Vue({
  data: {
      a: 1,
      b: 2,
      c: 3,
      d: 4,
      e: {
          f: {
              g: 5
          }
      }
  },
  watch: {
      a: function(val, oldVal) {
          console.log('new: %s, old: %s', val, oldVal)
      },
      // 方法名
      b: 'someMethod',
      // 该回调会在任何被侦听的对象的property改变时被调用，不论其被嵌套多深。
      c: {
          handler: function(val, oldVal) {},
          deep: true
      },
      // 该回调将会在侦听开始之后被立即调用
      d: {
          handler: 'someMethod',
          immediate: true
      },
      // 你可以传入回调数组，它们会被逐一调用
      e: [
          'handle1',
          function handle2(val, oldVal) {},
          {
              handler: function handle3(val, oldVal) {}
          }
      ],
      // watch vm.e.f's value: {g: 5}
      'e.f': function(val, oldVal) {}
  }
})

vm.a = 2 // => new: 2, old: 1

应用案例：

watch: {
    '$route.query.id'(newVal, oldVal) {
        console.log('变化'， newVal， oldval)
        location.reload() // 当路由中参数变化时，刷新当前页面
    }
}

5、响应式数据vs非响应式数据

• 响应式数据

1. 组件实例初始化的时候已有的数据。
2. 当数据发生变化的时候会触发视图更新。

• 非响应式数据

1. 组件实例初始化的时候没有的数据，后期直接添加的数据。
2. 数据发生改变的时候不会触发视图更新。
   解决：
   可以使用Vue.set(target, propertyName / index, value)或vm.$set()

• 参数：
  1、{ Object | Array } target
  2、{ string | number } propertyName / index
  3、{ any } value
• 用法
  向响应式对象中添加一个property，并确保这个新的property同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新property，因为Vue无法探测普通的新增property（比如：this.myObect.newProperty = ‘hi’）
• 注意⚠️：对象不能是Vue实例，或者Vue实例的跟数据对象

6、数组中every和some的区别及其他常用方法

6.1、 arry.every(()=>{})

• every：所有的元素都满足条件，才返回true。

6.2.、arry.some(()=>{})

• some：只要有一个满足条件就为true。

6.3、map()

• map(): 指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。

var arr = [1,2,3,4,5]
var arr2 = arr.map((item) => {
    return item*item
})
console.log(arr2); // [1,4,9,16,25]

6.4、reduce方法

arry.reduce((previousValue, currentValue, index, array)) => {}，val)

• reduce()方法接受一个回调函数，去调用数组里的每一项，直到数组结束。
• reduce接受一个函数，函数里面有四个参数：

1. 上一次的值。
2. 当前值。
3. 当前值的索引。
4. 数组。

比如：

• reduce有第二个参数，如果没有传，则会从第二项开始，第一个参数会取第一项的值。
  

7、第三方库：接口请求fly、token加密jsonwebtoken(jwt)

8、小程序支付API

• wx.requestPayment(Object object)
  
  

• https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_10&index=1