Девять секретов, которые должны знать разработчики vue

Vue.js

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

require.context()

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

import outExperInfo from "@/components/userInfo/outExperInfo";
import baseUserInfo from "@/components/userInfo/baseUserInfo";
import technicalExperInfo from "@/components/userInfo/technicalExperInfo";
import skillExperInfo from "@/components/userInfo/skillExperInfo";

components:{
    outExperInfo,
    baseUserInfo,
    technicalExperInfo,
    skillExperInfo
}

В таком написании нет ничего плохого, но после тщательного наблюдения я обнаружил, что было написано много повторяющегося кода.На данный момент использование require.context() можно записать так:

const path = require('path')
const files = require.context('@/components/userInfo', false, /\.vue$/)
const userComponents = {}
files.keys().forEach(key => {
 const name = path.basename(key, '.vue')
 userComponents[name] = files(key).default || files(key)
})
components:userComponents

Таким образом, независимо от того, сколько компонентов необходимо ввести, этот метод можно использовать.

Загрузка маршрутов по запросу

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

webpack< 2.4 时
{
 path:'/',
 name:'home',
 components:resolve=>require(['@/components/home'],resolve)
}
 
webpack> 2.4 时
{
 path:'/',
 name:'home',
 components:()=>import('@/components/home')
}

МЕТОД ИМПОРТ (), предложенного ES6, динамически загрузка Обещание Возвращает объект, то параметры метода загружаются в модуль. Требуется метод, аналогичный Node.js, в основном импорт () метод асинхронной нагрузки.

динамические компоненты

Сценарий: Если в проекте есть необходимость переключения вкладок, то будет задействована динамическая загрузка компонентов.Общая методика написания следующая:

<component v-bind:is="currentTab"></component>

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

<keep-alive>
 <component v-bind:is="currentTab"></component>
</keep-alive>

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

<transition>
<keep-alive>
 <component v-bind:is="currentTab"></component>
</keep-alive>
</transition>

компоненты и vue.component

Первый является компонентом локальной регистрации, который используется следующим образом:

export default{
 components:{home}
}

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

Vue.component('home',home)

Vue.nextTick

Метод Vue.nextTick() выполняет отложенный обратный вызов после окончания следующего цикла обновления DOM, поэтому функция обратного вызова может быть выполнена после загрузки обновления страницы. Вот несколько распространенных сценариев:

сцена первая 

<template>
    <div>
        <div ref = "ref"/>
    </div>
</template>
<script>
export default {
    created(){
        console.log(this.$refs.ref)
        //undefined
    })
}
}
</script>

Поскольку DOM на созданном этапе не полностью визуализируется в это время, полученное значение не определено, давайте преобразуем его:

<template>
    <div>
        <div ref = "ref"/>
    </div>
</template>
<script>
export default {
    created(){
        Vue.nextTick(()=>{
            console.log(this.$refs.ref)
        })
        //<div></div>
        
    })
}
}
</script>

Таким образом можно получить дом.

сцена вторая 

<template>
    <div>
        <div v-if="visible" ref = "ref"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
          visible: false
        };
    },
    showRef() {
        this.visible = true;
        console.log(this.$refs.ref);
        //undefined
    },
}
}
</script>

Поскольку в настоящее время, несмотря на то, что значение visible равно true, домен страницы не был обновлен, поэтому полученное значение не определено, давайте преобразуем его:

<template>
    <div>
        <div v-if="visible" ref = "ref"/>
    </div>
</template>
<script>
export default {
    data() {
        return {
          visible: false
        };
    },
    showRef() {
        this.visible = true;
        Vue.nextTick(()=>{
            console.log(this.$refs.ref)
        })
        //<div></div>
    },
}
}
</script>

Таким образом можно получить дом.

Vue.directive

Сценарий: Официальный предоставляет нам много инструкций, но если мы хотим превратить текст в указанный цвет и определить его как инструкцию, нам нужно использовать Vue.directive в это время Пример выглядит следующим образом:

// 全局定义
Vue.directive("change-color",function(el,binding,vnode){
 el.style["color"]= binding.value;
})
 
// 使用
<template>
    <div v-change-color>{{message}}
    </div>
</template>
<script>
 export default{
     data(){
      return{
      color:'green'
      }
     }
 }
</script>

Vue.set()

Когда вы напрямую устанавливаете значение элемента массива в проекте или напрямую устанавливаете значение свойства объекта, в это время вы обнаружите, что страница не обновляется. Это связано с ограничением Object.defineprototype() и не может отслеживать изменения.

Решение:

  • this.$set (массив/объект, который вы хотите изменить, позицию/ключ, который вы хотите изменить, какое значение вы хотите изменить)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组
this.$set(this.obj, "c", "OBKoro1"); // 改变对象
  • Собственные методы массива запускают обновления представления, и vue может отслеживать изменения данных, вызванные собственными методами массива.
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()

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

модификатор события

  • .stop: прекратить пузыриться
  • .prevent: предотвратить поведение по умолчанию
  • .self: срабатывает только на самом элементе привязки
  • .once: добавлено в версии 2.1.4, срабатывает только один раз.
  • пассивный: добавлено в 2.3.0, поведение событий прокрутки по умолчанию (т.е. поведение прокрутки) будет запущено немедленно, не может использоваться с .prevent
  • модификатор .sync

从 2.3.0 起vue重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。 Пример кода выглядит следующим образом:

<comp :foo.sync="bar"></comp>

будет расширен до:

<comp :foo="bar" @update:foo="val => bar = val"></comp>

Когда дочернему компоненту необходимо обновить значение foo, ему необходимо явно запустить событие обновления:

this.$emit('update:foo', newValue)

Оптимизация производительности длинных списков (замораживание данных)

Как мы все знаем, vue захватит данные через object.defineProperty, а затем реализует изменение соответствующих данных на странице в режиме реального времени.Однако иногда нам нужно только отобразить данные чисто, потому что данные не изменятся, нам не нужен vue, чтобы захватить наши данные. В случае больших объемов данных это может значительно сократить время загрузки.

Итак, как предотвратить захват наших данных vue? Данные можно заморозить с помощью метода object.freeze, после чего данные нельзя будет изменить. Пример выглядит следующим образом:

let longList = [
    {name:'monkeysoft'},
    ...
]
this.longList = Object.freeze(longList)

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

В этой статье используетсяmdniceнабор текста

Категории