AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）

2023-06-14 298
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue —— 进阶 Vuex（一）（四个 map 的用法、模块化和命名空间）

一、四个 map 的用法

1. mapState 方法

用于帮助我们映射 state 中的数据为计算属性

  computed: {
    // 借助 mapState 生成计算属性：sum、school、subject (对象写法)
    ...mapState({ sum: "sum", school: "school", subject: "subject" })
    // 借助 mapState 生成计算属性：sum、school、subject (数组写法)
    ...mapState(['sum', 'school', 'subject'])
  }
2. mapGetters 方法

用于帮助我们映射 getters 中的数据为计算属性

  computed:{
    // 借助 mapGetters 生成计算属性：bigSum (对象写法)
    ...mapGetters({bigSum: bigSum})
    // 借助 mapGetters 生成计算属性：bigSum (数组写法)
    ...mapGetters(['bigSum'])
  }
实例：使用 mapState 和 mapGetters

使用 mapState 和 mapGetters，可以少些很多代码。

index.js

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {
      addOdd(context, value){
          console.log('actions中的addOdd被调用了');
          if(context.state.sum % 2){
              context.commit('ADD',value)
          }
      },
      addWait(context, value){
          console.log('actions中的addWait被调用了');
          setTimeout(()=>{
              context.commit('ADD', value)
          },500)
      }
  }
  // 准备mutations——用于修改state中的数据（state）
  const mutations = {
      ADD(state, value){
          console.log('mutations中的ADD被调用了',state, value);
          state.sum += value
      },
      SUB(state, value){
          console.log('mutations中的SUB被调用了',state, value);
          state.sum -= value
      }
  }
  // 准备state——用于存储具体的数据
  const state = {
      sum: 0, //当前的和
      school: '尚硅谷',
      subject: '前端'
  } 
  // 准备getters——用于将state中的数据进行加工
  const getters = {
      bigSum(state){
          return state.sum * 10
      }
  }
  // 创建并暴露store
  export default new Vuex({
      actions,
      mutations,
      state,
      getters
  })

Count.vue

  1. 要在该组件导入 mapState 和 mapGetters
  2. import { mapState, mapGetters } from "vuex";
  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      //...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(['sum','school','subject']),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(['bigSum'])
    },
    methods: {
      increment() {
        this.$store.commit("ADD", this.n);
      },
      decrement() {
        this.$store.cmommit("SUB", this.n);
      },
      incrementOdd() {
        this.$store.dispatch("addOdd", this.n);
      },
      incrementWait() {
        this.$store.dispatch("addWait", this.n);
      },
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

629d0afd80e049dab400bd8108e1030b.png

如果不使用 mapState 和 mapGetters，则需要在 computed 中手动配置如下代码。

  computed: {
    sum() {
      return this.$store.state.sum;
    },
    school() {
      return this.$store.state.school;
    },
    subject() {
      return this.$store.state.subject;
    },
    bigSum() {
      return this.$store.getters.bigSum;
    }
  }

629d0afd80e049dab400bd8108e1030b.png

3. mapActions 方法

用于帮助我们生成与 actions 对话的方法，即：包含 $store.dispatch(xxx) 的函数。

  methods: {
    // 靠mapActions生成：addOdd、addWait (对象写法)
    ...mapActions({addOdd: 'addOdd', addWait: 'addWait'})
    // 靠mapActions生成：addOdd、addWait (数组写法)
    ...mapActions(['addOdd', 'addWait'])
  }
4. mapMutations 方法

用于帮助我们生成与 mutations 对话的方法，即：包含 $store.commit(xxx) 的函数。

  methods: {
      // 靠mapMutations生成：ADD、SUB (对象写法)
      ...mapMutations({add: 'ADD', sub: 'SUB'})
      // 靠mapMutations生成：ADD、SUB (数组写法)
      ...mapMutations(['ADD', 'SUB'])
  }
实例：使用 mapActions 和 mapMutations

index.js 不变


Count.vue


要在该组件导入 mapActions 和 mapMutations

import { mapActions, mapMutations} from "vuex";

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(["sum", "school", "subject"]),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(["bigSum"]),
    },
    methods: {
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (对象的写法)
      ...mapMutations({add: 'ADD', sub: 'SUB'}),
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (数组的写法)
      //...mapMutations(['ADD','SUB']), //此时上面的绑定也要 @ADD @SUB
      //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (对象写法)
      ...mapActions({addOdd: 'addOdd', addWait: 'addWait'})
      //借助mapActions生成对应的方法，方法中会调用dispatch去联系actions (数组写法)
      //...mapActions(['addOdd','addWait'])
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

二、多组件共享数据

基本功能

  1. Person 组件添加一个人，Count 组件响应地加一
  2. Count 组件加一，Person 组件响应地加一

https://www.bilibili.com/video/BV1r3411G7KS?t=15.8

多组件共享

index.js

  // 该文件用于创建Vuex中最为核心的store
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 准备actions——用于响应组件中的动作
  const actions = {
      addOdd(context, value) {
          console.log('actions中的addOdd被调用了');
          if (context.state.sum % 2) {
              context.commit('ADD', value)
          }
      },
      addWait(context, value) {
          console.log('actions中的addWait被调用了');
          setTimeout(() => {
              context.commit('ADD', value)
          }, 500)
      }
  }
  // 准备mutations——用于修改state中的数据（state）
  const mutations = {
      ADD(state, value) {
          console.log('mutations中的ADD被调用了');
          state.sum += value
      },
      SUB(state, value) {
          console.log('mutations中的SUB被调用了');
          state.sum -= value
      },
      ADD_PERSON(state, value) {
          console.log('mutations中的ADD_PERSON被调用了');
          state.personList.unshift(value)
      }
  }
  // 准备state——用于存储具体的数据
  const state = {
      sum: 0, //当前的和
      school: '清华大学',
      subject: 'Web前端',
      personList: [{
          id: '001',
          name: '张三'
      }]
  }
  const getters = {
      bigSum() {
          return state.sum * 10
      }
  }
  // 创建并暴露store
  export default new Vuex.Store({
      actions,
      mutations,
      state,
      getters
  })

Count.vue

  1. 使用 map 写法
  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      // 借助mapState生成计算属性，从state中读取数据 （对象写法）
      // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
      // 借助mapState生成计算属性，从state中读取数据 （数组写法）
      ...mapState(["sum", "school", "subject", "personList"]),
      // 借助mapGetters生成计算属性，从getters中读取数据（对象写法）
      //...mapGetters({bigSum: 'bigSum'}),
      // 借助mapGetters生成计算属性，从getters中读取数据（数组写法）
      ...mapGetters(["bigSum"]),
    },
    methods: {
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (对象的写法)
      ...mapMutations({ add: "ADD", sub: "SUB" }),
      //借助mapMutations生成对应的方法，方法中会调用commit去联系mutations (数组的写法)
      // ...mapMutations(['ADD','SUB']), //此时上面的绑定也要 @ADD @SUB
      ...mapActions({ addOdd: "addOdd", addWait: "addWait" }),
      // ...mapActions(['addOdd','addWait'])
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

Person.vue

  1. 使用普通的写法
  <template>
    <div>
      <h3>人员列表</h3>
      <h3 style="color: red">Count组件的求和为：{{ sum }}</h3>
      <input type="text" placeholder="请输入名字" v-model="name" />
      <button @click="addPerson">添加</button>
      <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
      </ul>
    </div>
  </template>
  <script>
  import { nanoid } from "nanoid";
  export default {
    name: "myPerson",
    data() {
      return {
        name: "",
      };
    },
    computed: {
      personList() {
        return this.$store.state.personList;
      },
      sum() {
        return this.$store.state.sum;
      },
    },
    methods: {
      addPerson() {
        const personObj = { id: nanoid(), name: this.name };
        this.$store.commit("ADD_PERSON", personObj);
        this.name = "";
      },
    },
  };
  </script>

三、模块化（module）和命名空间（namespace）

1. 目的

让代码更好维护，让多种数据分类更加明确。

2. 修改 .store/xxx.js 文件

index.js

  1. 使用模块化编程
  2. 导入 count.js 和 person.js 文件
  3. 在 modules 中配置 countOptions 和 personAbout
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  import countOptions from './count'
  import personOptions from './person'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 创建并暴露store
  export default new Vuex.Store({
      modules: {
          countAbout: countOptions,
          personAbout: personOptions
      }
  })

count.js

  1. 此文件内容为求和相关的配置
  2. 注意开启命名空间，用于解决不同模块的命名冲突问题。
  const countAbout = {
      namespaced: true, //开启命名空间
      actions: {...},
      mutations: {...},
      state: {...},
      getters: {
          xxx(state){
              return state.x
          }
      }
  }

person.js

  1. 此文件内容为人员信息相关的配置
  2. 注意开启命名空间，用于解决不同模块的命名冲突问题。
  const personAbout = {
      namespaced: true, //开启命名空间
      actions: {},
      mutations: {},
      state: {},
      getters: {}
  }
3. 组件中读取 state 数据

开启命名空间后，组件中读取 state 数据

  //方式一：自己读取数据
  this.$store.state.personAbout.personlist
  //方式二：借助 mapState 读取
  ...mapState('countAbout', ['sum', 'school', 'subject'])
4. 组件中读取 getters 数据

开启命名空间后，组件中读取 getters 数据

  //方式一：自己直接读取
  this.$store.getters['personAbout/firstPersonName']
  //方式二：借助 mapGetters 读取
  ...mapGetters('countAbout', ['bigSum'])
5. 组件中调用 dispatch

开启命名空间后，组件中调用 dispatch

  //方式一：自己直接调用 dispatch
  this.$store.dispatch('personAbout/addPersonWang', person)
  //方式二：借助 mapActions 调用
  ...mapActions('countAbout', {addOdd: 'addOdd', addWait: 'addWait'})
6. 组件中调用 commit

开启命名空间后，组件中调用 commit

  //方式一：自己直接调用 commit
  this.$store.commit('personAbout/ADD_PERSON', person)
  //方式二：借助 mapMutations 调用
  ...mapMutations('countAbout', {add: 'ADD', sub: 'SUB'})

四、模块化实例

效果如下：

https://www.bilibili.com/video/BV1G3411V73h?t=1.2

vuex模块化

index.js

  1. 模块化 count.js 和 person.js
  // 引入vue核心库
  import Vue from 'vue'
  // 引入Vuex
  import Vuex from 'vuex'
  import countOptions from './count'
  import personOptions from './person'
  // 应用Vuex插件
  Vue.use(Vuex)
  // 创建并暴露store
  export default new Vuex.Store({
      modules: {
          countAbout: countOptions,
          personAbout: personOptions
      }
  })

count.js

  1. 求和相关的配置
  // 求和相关的配置
  export default {
    // 开启命名空间
    namespaced: true,
    // 用于响应组件中的动作
    actions: {
      addOdd(context, value) {
        console.log('actions中的addOdd被调用了');
        if (context.state.sum % 2) {
          context.commit('ADD', value)
        }
      },
      addWait(context, value) {
        console.log('actions中的addWait被调用了');
          setTimeout(() => {
            context.commit('ADD', value)
          }, 500)
       }
    },
    // 用于修改state中的数据（state）
    mutations: {
      ADD(state, value) {
        console.log('mutations中的ADD被调用了');
        state.sum += value
      },
      SUB(state, value) {
        console.log('mutations中的SUB被调用了');
        state.sum -= value
      },
    },
    // 用于存储具体的数据
    state: {
      sum: 0, //当前的和
      school: '清华大学',
      subject: 'Web前端',
    },
    getters: {
      bigSum(state) {
        return state.sum * 10
      }
      }
  }

person.js

  1. 人员相关的配置
  import axios from 'axios'
  import { nanoid } from 'nanoid'
  export default {
    // 开启命名空间
    namespaced: true,
    // 用于响应组件中的动作
    actions: {
      addPersonWang(context, value){
        if(value.name.indexOf('王') === 0){
          context.commit('ADD_PERSON', value)
        }else{
          alert('添加的人必须姓王！')
          }
        },
      //连接服务器
      addPersonServer(context){
        axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then(
          response => {
            context.commit('ADD_PERSON', {id:nanoid(), name:response.data})
          },
          error => {
            alert(error.message)
          }
        )
      }
      },
    // 用于修改state中的数据（state）
    mutations: {
      ADD_PERSON(state, value) {
        console.log('mutations中的ADD_PERSON被调用了');
        state.personList.unshift(value)
      }
    },
    // 用于存储具体的数据
    state: {
      personList: [{
        id: '001',
        name: '张三'
      }]
    },
    getters: {
      firstPersonName(state){
        return state.personList[0].name
      }
    }
    }

Count.vue

  <template>
    <div>
      <h2>当前求和为：{{ sum }}</h2>
      <h3>当前求和放大10倍：{{ bigSum }}</h3>
      <h3>我在{{ school }}，学习{{ subject }}</h3>
      <h3 style="color: red">Person组件的总人数是：{{ personList.length }}</h3>
      <select v-model.number="n">
        <option :value="1">1</option>
        <option :value="2">2</option>
        <option :value="3">3</option>
      </select>
      <button @click="add(n)">+</button>
      <button @click="sub(n)">-</button>
      <button @click="addOdd(n)">当前求和为奇数再加</button>
      <button @click="addWait(n)">等一等再加</button>
    </div>
  </template>
  <script>
  import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
  export default {
    name: "myCount",
    data() {
      return {
        n: 1, //用户选择的数字
      };
    },
    computed: {
      ...mapState("countAbout", ['sum','school','subject']),
      ...mapState("personAbout", ['personList']),
      ...mapGetters('countAbout', ['bigSum']),
    },
    methods: {
      ...mapMutations('countAbout', { add: "ADD", sub: "SUB" }),
      ...mapActions('countAbout', { addOdd: "addOdd", addWait: "addWait" }),
    },
  };
  </script>
  <style scoped>
  button {
    margin-left: 5px;
  }
  </style>

Person.vue

  <template>
    <div>
      <h3>人员列表</h3>
      <h3 style="color: red">Count组件的求和为：{{ sum }}</h3>
      <h3>列表中第一个人的名字是：{{firstPersonName}}</h3>
      <input type="text" placeholder="请输入名字" v-model="name" />
      <button @click="addPerson">添加</button>
      <button @click="addPersonWang">添加姓王的</button>
      <button @click="addPersonServer">添加随机人</button>
      <ul>
        <li v-for="p in personList" :key="p.id">{{ p.name }}</li>
      </ul>
    </div>
  </template>
  <script>
  import { nanoid } from "nanoid";
  export default {
    name: "myPerson",
    data() {
      return {
        name: "",
      };
    }, 
    computed: {
      personList() {
        return this.$store.state.personAbout.personList;
      },
      sum() {
        return this.$store.state.countAbout.sum;
      },
      firstPersonName(){
          return this.$store.getters['personAbout/firstPersonName']
      }
    },
    methods: {
      addPerson() {
        const personObj = { id: nanoid(), name: this.name };
        this.$store.commit("personAbout/ADD_PERSON", personObj);
        this.name = "";
      },
      addPersonWang(){
          const personObj = { id: nanoid(), name: this.name };
          this.$store.dispatch('personAbout/addPersonWang', personObj)
          this.name = ''
      },
      addPersonServer(){
        this.$store.dispatch('personAbout/addPersonServer')
      }
    },
  };
  </script>
  <style scoped>
  button{
    margin-left: 5px;
  }
  </style>

不积跬步无以至千里 不积小流无以成江海

文章标签：
JavaScript
关键词：
vue vuex VUE.js
vuex VUE.js
vue用法VUE.js
用法VUE.js
vuex Map
前端杂货铺
目录
相关文章
游客zi3qmblbcdexu
|
15天前
|
存储 JavaScript
Vue 状态管理工具vuex
Vue 状态管理工具vuex
游客zi3qmblbcdexu
42 5
dufadayang
|
27天前
|
JavaScript
Vue 中mixin 的用法
【10月更文挑战第18天】Vue 中mixin 的用法
dufadayang
30 3
刘大猫.
|
1月前
|
存储 JavaScript 前端开发
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
《进阶篇第8章：vuex》包括理解vuex、安装vuex、搭建vuex环境、四个map方法的使用、模块化+名命空间
刘大猫.
17 3
刘大猫.
|
1月前
|
JavaScript
《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码
《进阶篇第9章》学习vuex知识点后练习：求和案例_纯vue版代码
刘大猫.
13 1
九月天空
|
1月前
|
存储 JavaScript 前端开发
深入理解 Vuex：Vue.js 状态管理的利器
【10月更文挑战第11天】 深入理解 Vuex：Vue.js 状态管理的利器
九月天空
34 2
邹荣乐
|
1月前
|
存储 缓存 资源调度
Vue3状态管理新选择：Pinia安装与使用详解，以及与Vuex的对比分析
Vue3状态管理新选择：Pinia安装与使用详解，以及与Vuex的对比分析
邹荣乐
113 0
邹荣乐
|
1月前
|
缓存 JavaScript Serverless
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
vue中computed计算属性、watch侦听器、methods方法的区别以及用法
邹荣乐
105 0
九月天空
|
1月前
|
存储 缓存 JavaScript
深入探讨 Vuex：Vue.js 状态管理的最佳实践
【10月更文挑战第11天】深入探讨 Vuex：Vue.js 状态管理的最佳实践
九月天空
24 0
凌浩雨
|
JavaScript 测试技术 容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具 检测版本 node -v npm -v 图1.png 2). 安装vue-cli(vue脚手架) npm install -g vue-cli --registry=https://registry.
凌浩雨
1052 0
我是快乐的嘟嘟
|
8天前
|
JavaScript 前端开发
如何在 Vue 项目中配置 Tree Shaking？
通过以上针对 Webpack 或 Rollup 的配置方法，就可以在 Vue 项目中有效地启用 Tree Shaking，从而优化项目的打包体积，提高项目的性能和加载速度。在实际配置过程中，需要根据项目的具体情况和需求，对配置进行适当的调整和优化。
我是快乐的嘟嘟
82 26

热门文章

最新文章

  • 1
    vue视图更新原理、nextTick()原理
  • 2
    简单vue父子iframe页面之间跨域通信传值postMessage()
  • 3
    基于springboot+vue的医院预约系统(前后端分离)
  • 4
    Vue环境下，在单页面中遍历显示出多个Echarts图表
  • 5
    vue数据绑定原理
  • 6
    揭密 Vue 的双向绑定
  • 7
    Vue打包后Echarts图表不显示问题解决
  • 8
    vue中异步函数async和await的用法
  • 9
    renrenfast开源项目打包过程，前端使用vue element-UI，前后端分离，打包为一个jar包运行
  • 10
    模拟Vue数据的双向绑定
  • 1
    Go语言map并发安全，互斥锁和读写锁谁更优？
    58
  • 2
    Go语言map并发安全使用的正确姿势
    60
  • 3
    Go语言中的map为什么默认不是并发安全的？
    56
  • 4
    【C++】开散列实现unordered_map与unordered_set的封装
    54
  • 5
    【C++】map和set封装
    38
  • 6
    Kotlin小技巧之用Transformations.map方法转换LiveData
    54
  • 7
    Java基础之集合Map
    40
  • 8
    Java Map集合：选择正确的实现方式
    49
  • 9
    算法金 | 推导式、生成器、向量化、map、filter、reduce、itertools，再见 for 循环
    53
  • 10
    js【最佳实践】遍历数组的八种方法（含数组遍历 API 的对比）for,forEach,for of,map,filter,reduce,every,some
    79

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Go语言核心编程 - 基础语法、数组、切片、Map
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • Vue.js在前端服务化上的实践与探索
  • 利用编译将 Vue 组件转成 React 组件

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云OSS设置跨域访问