«Как изящно использовать VUE?» Основные боевые навыки VUE

Vue.js

предисловие

используется всемиvueВ эту эпоху, как мы можем отличить, новичок это или старшийvueА игроки?Как сделать самому и просто научитьсяvueлюди, чтобы увеличить разрыв? На самом деле, многие людиvueПросто оставайтесь на основах. Если вы хотите улучшить себя, вы должны найти способ применить это на более высоком уровне.

Эта статья продвинет наше пониманиеvueспособность использовать

  • 组件 : Глобальная регистрация компонентов
  • Render函数 : Сохраните грязный шаблон
  • Vue权限控制 : Высокоточный глобальный контроль разрешений

1 - "Глобальная регистрация компонентов"

Компоненты — это то, что мы используем очень часто Многие люди используют компоненты для ссылки и регистрации файлов один за другим. Если компонент используется много раз во всем проекте, это будет особенно проблематично, если на него нужно ссылаться и регистрировать каждый раз, когда он используется.

  • Общие недостатки применения компонентов
    • глупый, слишком неуклюжий
    • громоздкий, неэффективный
<template>
  <div>
    <h1>I am HelloWorld</h1>
    <Child1></Child1>
  </div>
</template>

<script>
import Child1 from './child1.vue'   // 引入
export default {
  name: 'HelloWorld',
  data(){
    return{
    }
  },
  components:{   // 注册
    Child1
  },
  props: {
    msg: String
  },
  methods:{
  }
}
</script>

<style scoped lang="less">
</style>

Когда нам нужно повторно использовать этот компонент в проекте, это приведет к большому количеству повторного кода введения и регистрации, что громоздко и некрасиво. Таким образом, мы можем передать глобальныйJsУправление файлами, понадобитсяиспользовать много разкомпоненты зарегистрированы по всему миру

создать глобальный.jsГлобальные компоненты управления файлами

// 1 - globalComponent.js

import Vue from 'vue' // 引入vue

// 处理首字母大写 abc => Abc
function changeStr(str){
    return str.charAt(0).toUpperCase() + str.slice(1)
}

/*
    require.context(arg1,arg2,arg3)
        arg1 - 读取文件的路径
        arg2 - 是否遍历文件的子目录
        arg3 - 匹配文件的正则
    关于这个Api的用法，建议小伙伴们去查阅一下，用途也比较广泛
*/
const requireComponent = require.context('.', false, /\.vue$/)
console.log('requireComponent.keys():',requireComponent.keys())  // 打印
requireComponent.keys().forEach(fileName => {
    const config = requireComponent(fileName)
    console.log('config:',config)  // 打印
    const componentName = changeStr(
        fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')   // ./child1.vue => child1
    )
    
    Vue.component(componentName, config.default || config) // 动态注册该目录下的所有.vue文件
})

// 2 - 将globalComponent.js引入main.js

import global from './components/globalComponent'

// 3 - 使用这类组件不再需要引入和注册，直接标签使用即可

<template>
  <div>
    <h1>I am HelloWorld</h1>
    <Child1></Child1>
  </div>
</template>

Запускаем программу, посмотрим, может ли она нормально отображаться и проанализируем два отпечатка

Дополнительно: раздел маршрута и динамическое добавление маршрутов

Предположим, что у нас много маршрутов, и каждый маршрут введен по-дурацки, что приведет к увеличению объема кода всего проекта, что громоздко, а главное, увеличивает сложность пост-обслуживания. Следовательно, мы также можем управлять введением и использованием маршрутов так же, как описано выше, реализовывать введение маршрутов по разделам, различать маршруты по разным функциям и импортировать их динамическим способом, что удобно, быстро и удобно в сопровождении.

Создавайте выделенные маршруты.jsФайл управляет всеми маршрутами
总路由管理文件 - index.js

分区路由
    - index.routes.js
    - login.routes.js

在大型项目中，往往会有很多互不关联的模块，例如电商平台中的商城，个人信息，这种情况下就可以对路由进行分区


// 分区路由文件写法

export default {
    path:'/index',
    name:'Index',
    component: () => import('../views/Index.vue'),  // 懒加载式引入，当跳转到时才进行引入chunk
    children: [...]
}

// 总路由管理文件 index.js 写法
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routerList = []  // 路由数组 - 存放所有路由
function importAll(routerArr){
    // 该函数用于将所有分区路由中的路由添加到路由数组
    routerArr.keys().forEach( key => {
        console.log(key)
        routerList.push(routerArr(key).default)
    })
}
importAll(require.context('.',true,/\.routes\.js/))

const routes = [
    ...routerList
]

const router = new VueRouter({
    routes
})

export default router

Запускаем программу, посмотрим, может ли она нормально отображаться и проанализируем два отпечатка

Оптимизированный код будет более гибким, более декоративным, удобным и эффективным, а также простым в обслуживании.

2 - «Сохранить грязный шаблон»

Когда многие люди пишут компоненты, они будут полагаться на строительные леса.<template></template>этикетка, на самом делеtemplateТакже есть определенные дефекты, такие как:

  • templateодно значение-много-суждение
  • чрезмерное использованиеtemplateДелает код избыточным и загроможденным

VUEпредоставляет намrenderфункцию, мы можем ловко решить этуtemplateвызвал проблемы

Реальный бой — работа с несколькими кнопками

<template>
  <div>
    <h1>I am Home</h1>
    <!-- 假设按钮有多种类型,通过value来显示不同类型 -->
    <div v-if='value === 1'>
      <button>button1</button>
    </div>
    <div v-else-if='value === 2'>
      <button>button2</button>
    </div>
    <div v-else>
      <button>button3</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Home',
  data(){
    return{
        value:1
    }
  },
  methods:{
  }
}
</script>

<style scoped lang="less">
</style>

В приведенном выше способе написания, когда есть различные типы кнопок, он будет выглядеть неорганизованным.Конечно, многие люди предпочтут инкапсулировать компонент кнопки, поэтому инкапсуляция этого компонента является еще одним навыком.VUEизrenderфункция уменьшения ненужныхtemplate, поэтому мы можем написать

// 创建一个button.vue文件 写法如下

<script>
export default {
    props:{
        type:{
            type:String,
            default:'normal'
        },
        text:{
            type:String,
            default:'button'
        }
    },
    render(h){
        /*
            h 类似于 createElement， 接受2个参数
            1 - 元素
            2 - 选项
         */
        return h('button',{
            // 相当于 v-bind:class
            class:{
                btn:true,
                'btn-success':this.type === 'success',
                'btn-danger':this.type === 'danger',
                'btn-warning':this.type === 'warning',
                'btn-normal':this.type === 'normal',
            },
            domProps:{
                innerText: this.text || '默认'
            },
            on:{
                click:this.handleClick
            }
        })
    },
    methods:{
        handleClick(){
            this.$emit('myClick')
        }
    }
}
</script>

<style scoped>
.btn{
    width: 100px;
    height:40px;
    line-height:40px;
    border:0px;
    border-radius:5px;
    color:#ffff;
}
.btn-success{
    background:#2ecc71;
}
.btn-danger{
    background:#e74c3c;
}
.btn-warning{
    background:#f39c12;
}
.btn-normal{
    background:#bdc3c7;
}
</style>

//  引入

<template>
  <div>
    <h1>I am Home</h1>
    <!-- 按钮根据value显示不同类型的button -->
    <Button type='success' text='button1' @myClick='...'></Button>
  </div>
</template>

<script>
import Button from './button.vue'
export default {
  name: 'Home',
  data(){
    return{
        value:1
    }
  },
  components:{
      Button
  },
  methods:{
  }
}
</script>

<style scoped lang="less">
</style>

Вышеприведенное письмо, согласноvalueдля отображения различных типовbutton, нам просто нужно пройтиvalueмодифицироватьtype，textи т. д., вы можете добиться этого, не создавая несколько<button>,пройти черезv-ifсудить

Оптимизированный код позволяет избежать недостатков одного значения и множественных суждений, уменьшает избыточность и является более гибким.Этот метод больше подходит для компонентов с простым бизнесом и многократного использования.

3 - "Высокоточная глобальная обработка разрешений"

Существует много сценариев, в которых управление разрешениями осуществляется интерфейсом, например, по содержимому, возвращаемому из фона, судят, есть ли у человека разрешение на эту функцию, а затем модифицируется элемент.v-if / v-show, в этом случае, когда эта функция появляется в нескольких местах, это заставит нас делать много ненужного дублирования кода.Если условия оценки громоздки, это будет более избыточно, и объем кода сильно увеличится. Поэтому мы можем построить маленькое колесо и управлять разрешениями в глобальном масштабе.

Фактический бой - решение проблемы с разрешением отображения кнопок

Этот сценарий имеет очень высокую вероятность возникновения, особенно при работе с проектами с несколькими ролями.Если этот тип оценки разрешений обрабатывается несколько раз, и оценка выполняется каждый раз, когда это происходит, код будет чрезвычайно уродливым и избыточным, поэтому мы можем обрабатывать через глобальное решение о разрешении

/* 
    在项目里新建一个common文件夹用于存放全局 .js 文件
    这种全局文件夹做法相当普遍，一般项目里都应该有这样一个文件夹来管理全局的东西
*/

// common/jurisdiction.js  用于存放与权限相关的全局函数/变量

export function checkJurisdiction(key) {
    // 权限数组
    let jurisdictionList = ['1', '2', '3', '5']
    let index = jurisdictionList.indexOf(key)
    console.log('index:',index)
    if (index > -1) {
        // 有权限
        return true
    } else {
        // 无权限
        return false
    }
}

// 将全局权限Js挂载到全局中 
// main.js

import { checkJurisdiction } from './common/jurisdiction'

// 优雅操作 - VUE自定义指令
Vue.directive('permission',{
  inserted(el, binding){
    // inserted → 元素插入的时候
    
    let permission = binding.value // 获取到 v-permission的值

    if(permission){
      let hasPermission = checkJurisdiction(permission)
      if(!hasPermission){
        // 没有权限 移除Dom元素
        el.parentNode && el.parentNode.removeChild(el)
      }
    }else{
      throw new Error('需要传key')
    }
  }
})

// 使用方式

<template>
  <div>
    <h1>I am Home</h1>
    <!-- 按钮根据value -->
    <div v-permission="'10'">
      <button>权限1</button>
    </div>
    <div v-permission="'5'">
      <button>权限2</button>
    </div>
  </div>
</template>

// 无需再通过value去判断，直接通过v-permission的值进行判断即可

Запускаем программу, посмотрим, нормально ли она отображается и проанализируем печать

можно увидетьv-permission = "'10'"не авторизован и не отображает,v-permission = "'5'"Является ли разрешение и отображение

Суммировать

Вышеупомянутые три аспекта кажутся простыми в использовании, но когда многие люди пишут код, им нравится оставаться в бизнесе и думать только о том, можно ли его реализовать.На самом деле, многие крупномасштабные проекты нуждаются в этих концепциях, чтобы уменьшить количество кода и уменьшите избыточность. Использование правильного метода в правильной ситуации может улучшить ваши возможности.

❗ Советы: Если в статье есть ошибки, я надеюсь указать на это, и друзьям, которые найдут это полезным, это понравится QAQ

Категории