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同步处理。
  1. dispatch:分发action。
  2. getters:
  • 用于根据已有的状态数据计算得到新的状态数据。
  • 等同于Vue中的computed。
  1. 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
    在这里插入图片描述

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐