几个你不知道的技巧助你写出更优雅的vue.js代码

前端之家收集整理的这篇文章主要介绍了几个你不知道的技巧助你写出更优雅的vue.js代码前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1. watch 与 computed 的巧妙结合

如上图,一个简单的列表页面。

你可能会这么做:

如果参数比较多,比如上图

  • 关键字筛选,
  • 区域筛选,
  • 设备ID筛选,
  • 分页数,
  • 每页几条数据,
  • @H_301_28@

    可能会是这样:

    不过这么写,明显有问题,主要是watch了很多参数,而且函数的处理都差不多,可以修改一下,通过methods处理

    当然这么写,需要在模板里面每个参数change的地方绑定事件,并传递参数值,比如分页change时:

    相比上面的各种watch,代码明显少了很多,但是还有一个问题,那就是要在template的很多地方绑定change事件。

    最后,当然是使用我们重点推荐的computed + watch

    通过增加一个computed属性,watch这个属性并设置immediate为true,无需再手动绑定事件,相比之上的方法都要简洁。当然,缺点就是对性能稍微有些影响,不过问题不大。

    2. 使用mixin提取公共部分

    很多列表页其实使用的很多属性都是一样的,比如

    • 分页 page
    • 数量 size
    • 搜索关键 字keyword
    • 表格数据 tableData
    • @H_301_28@

      这些公共的部分其实可以通过mixin来提取出来

      在要用到的页面

      代码 */ ...

      3. 自动注册全局组件

      正常情况下,我们需要使用一个我们自己封装的组件时,需要先引入,再注册,最后才能在template模板中使用。

      当有多个页面需要用到这些组件时,那么就需要在每个需要的页面重复这些步骤。

      为了简化这些步骤,可以考虑把这些组件作为全局组件来使用,这样每个页面需要时,就可以直接使用了。

      不过还有一个问题,那就是需要我们手动的全局注册

      Vue.component('component1',Component1)
      Vue.component('component2',Component2)
      Vue.component('component3',Component3)

      当组件多了以后,手动注册也变得繁琐起来,可以通过require.context()实现自动注册组件。

      requireComponent.keys().forEach(fileName => {

      const componentConfig = requireComponent(fileName)
      const componentName = fileName.replace(/^.\//,'').replace(/.vue/,'')

      Vue.component(componentName,componentConfig.default || componentConfig)
      })

      4. 自动注册vuex模块

      之前我们是这么注册vuex模块的

      import alarm from './modules/alarm'
      import history from './modules/history'
      import factory from './modules/factory'
      import contact from './modules/contact'
      import company from './modules/company';
      import deviceManage from './modules/device-manage'
      import deviceModel from './modules/device-model'
      import deviceActivation from './modules/device-activation'
      import user from './modules/user'
      import role from './modules/role'
      import setAlarm from './modules/setAlarm'
      import factoryMode from "./modules/factoryMode";
      import ScreenDeviceWatch from './modules/screen-device-watch'
      import ScreenDeviceForecast from './modules/screen-device-forecast'

      export default {
      alarm,company,deviceManage,deviceModel,user,factory,contact,deviceActivation,history,role,setAlarm,factoryMode,ScreenDeviceWatch,ScreenDeviceForecast,}

      / index.js /
      import Vue from 'vue'
      import Vuex from 'vuex'

      import state from './state'
      import getters from './getters'
      import modules from './modules'
      import actions from './actions'
      import mutations from './mutations'

      Vue.use(Vuex)
      export default new Vuex.Store({
      state,getters,mutations,actions,modules
      })

      可以发现每个模块都要我们手动导入,然后加入到module里面,如此重复。当模块不多还好,假如项目大了,有50个模块,那就得要做很多重复的工作。

      注册组件一样,我们还是利用require.context来实现。

      requireModule.keys().forEach(fileName => {
      const moduleName = fileName.replace(/(.\/|.js)/g,'')
      modules[moduleName] = {
      namespaced: true,...requireModule(fileName).default
      }
      })

      export default modules

      / index.js /
      import Vue from 'vue'
      import Vuex from 'vuex'
      import modules from './modules'

      Vue.use(Vuex)
      export default new Vuex.Store({
      state,modules
      })

      这篇关于如何写出更优雅的vue.js代码文章就介绍到这了,希望大家以后多多支持编程之家。

猜你在找的Vue相关文章