Я слышал, что вы умеете пользоваться Vue. Вы освоили эти 9 технологий Vue?

Эта статья была впервые опубликована в публичном аккаунте «Front-End Full-Stack Developer». Читайте последние статьи как можно скорее, а публикация новых статей будет приоритетной в течение двух дней. Обратив внимание, ответьте, пожалуйста, личным письмом: Большая подарочная упаковка, отправка по сети качественных видеокурсов онлайн с информацией о дисках, безусловно, сэкономит вам много денег!

Теперь Vue.js стал популярным фреймворком для фронтенд-разработки. Есть много инженеров, которые пользуются удобством и мощью Vue.js. Однако некоторые из наших готовых решений могут не соответствовать передовым практикам. Что ж, давайте взглянем на эти обязательные технологии Vue.

1. Функциональные компоненты

функциональный компонентне имеет состояния, не имеет жизненного цикла или методов, поэтому не может быть создан

Создать функциональный компонент очень просто, все, что вам нужно сделать, это добавитьfunctional: trueатрибут или добавьте его в шаблонfunctional. Поскольку он такой же легкий, как функция, без ссылок на экземпляры, производительность рендеринга значительно повышается.

Функциональные компоненты зависят от контекста и мутируют с данными, указанными в нем.

<template functional>
  <div class="book">
    {{props.book.name}} {{props.book.price}}
  </div>
</template>

<script>
Vue.component('book', {
  functional: true,
  props: {
    book: {
      type: () => ({}),
      required: true
    }
  },
  render: function (createElement, context) {
    return createElement(
      'div',
      {
        attrs: {
          class: 'book'
        }
      },
      [context.props.book]
    )
  }
})
</script>

2. Глубокий селектор

Иногда вам нужно изменить CSS сторонних компонентов, этоscopedстиль, удалитьscopeИли открытие нового стиля невозможно.

в настоящее время,глубокий селектор >>> /deep/ ::v-deepмогу помочь тебе.

<style scoped>
>>> .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
/deep/ .scoped-third-party-class {
  color: gray;
}
</style>

<style scoped>
::v-deep .scoped-third-party-class {
  color: gray;
}
</style>

3. Продвинутые «наблюдатели»

выполнить немедленно

Связанное чтение:Расширенное использование часов в Vue.js

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

Да, есть простое решение: вcreatedОбработчик вызывается в хуке, но это не выглядит элегантно и добавляет сложности.

Кроме того, вы можете добавить в наблюдательimmediateАтрибуты:

watch: {
  value: {
    handler: 'printValue',
      immediate: true
  }
},
methods : {
  printValue () {
    console.log(this.value)
  }
}

Глубокое слушание

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

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

data () {
  return {
    value: {
      one: {
        two: {
          three: 3
        }
      }
    }
  }
},
watch: {
  value: {
    handler: 'printValue',
    deep: true
  }
},
methods : {
  printValue () {
    console.log(this.value)
  }
}

несколько обработчиков

На самом деле часы можно задать как массив, а поддерживаемые типы — String, Function, Object. После срабатывания зарегистрированные обработчики наблюдения будут вызываться один за другим.

watch: {
  value: [
    'printValue',
    function (val, oldVal) {
      console.log(val)
    },
    {
      handler: 'printValue',
      deep: true
    }
  ]
},
methods : {
  printValue () {
    console.log(this.value)
  }
}

Подписка на множественные вариабельные мутации

watcherНевозможно прослушивать несколько переменных, но мы можем группировать цели вместе как новыйcomputedи наблюдайте за этой новой «переменной».

computed: {
  multipleValues () {
    return {
      value1: this.value1,
      value2: this.value2,
    }
  }
},
watch: {
  multipleValues (val, oldVal) {
    console.log(val)
  }
}

4. Параметры события: $event

$eventявляется специальной переменной объекта события. В некоторых сценариях он предоставляет больше необязательных параметров для сложных функций.

родное событие

В собственных событиях значение совпадает с событием по умолчанию (событие DOM или событие окна).

<template>
  <input type="text" @input="handleInput('hello', $event)" />
</template>

<script>
export default {
  methods: {
    handleInput (val, e) {
      console.log(e.target.value) // hello
    }
  }
}
</script>

пользовательское событие

В пользовательском событии значение захватывается из его дочерних компонентов.

<!-- Child -->
<template>
  <input type="text" @input="$emit('custom-event', 'hello')" />
</template>

<!-- Parent -->
<template>
  <Child @custom-event="handleCustomevent" />
</template>

<script>
export default {
  methods: {
    handleCustomevent (value) {
      console.log(value) // hello
    }
  }
}
</script>

5. Разделение параметров маршрутизатора

Я считаю, что именно так большинство людей обрабатывают параметры маршрутизатора в компонентах:

export default {
  methods: {
    getRouteParamsId() {
      return this.$route.params.id
    }
  }
}

использовать внутри компонента$routeБудет сильная связь с URL-адресом, что ограничивает гибкость компонента.

Правильное решение — добавить реквизиты в роутер.

const router = new VueRouter({
  routes: [{
    path: '/:id',
    component: Component,
    props: true
  }]
})

Таким образом, компоненты могут быть получены непосредственно из реквизита.params.

export default {
  props: ['id'],
  methods: {
    getParamsId() {
      return this.id
    }
  }
}

Кроме того, вы можете передавать функции для возврата пользовательскихprops.

const router = new VueRouter({
  routes: [{
    path: '/:id',
    component: Component,
    props: router => ({ id: route.query.id })
  }]
})

6. Двусторонняя привязка пользовательских компонентов

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

v-modelназывается двусторонней привязкой.inputявляется событием обновления по умолчанию. в состоянии пройти$emitОбновите значение. Единственным ограничением является то, что этот компонент требует<input>отметить способность сvalueпривязка свойств.

<my-checkbox v-model="val"></my-checkbox>

<template>
  <input type="checkbox" :value="value" @input="handleInputChange(value)" />
</template>

<script>
export default {
  props: {
    value: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    handleInputChange (val) {
      console.log(val)
    }
  }
}
</script>

Существует еще одно решение для двусторонней привязки, а именноsyncмодификатор. иv-modelРазница в том, что он не требует, чтобы ваш компонент имел<input>метка и привязать к ней значение. это только вызываетupdate:<your_prop>Свойства изменяются через систему событий.

<custom-component :value.sync="value" />

7. Крюк жизненного цикла компонентов

Как правило, вы можете прослушивать жизненный цикл дочернего компонента следующим образом (например,mounted)

<!-- Child -->
<script>
export default {
  mounted () {
    this.$emit('onMounted')
  }
}
</script>

<!-- Parent -->
<template>
  <Child @onMounted="handleOnMounted" />
</template>

Есть еще одно простое решение, вы можете использовать вместо него@hook:mountИспользуется во внутренней системе Vue.

<!-- Parent -->
<template>
  <Child @hook:mounted="handleOnMounted" />
</template>

8. API прослушивания событий

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

Откровенно говоря, только вbeforeDestroyиспользуется вthis.timerИмеет смысл только получить идентификатор таймера. Не среднее, но чем меньше переменных, тем лучше производительность.

export default {
  data () {
    return {
      timer: null
    }
  },
  mounted () {
    this.timer = setInterval(() => {
      console.log(Date.now())
    }, 1000)
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}

Сделайте его доступным только для хуков жизненного цикла. использовать$onceотказаться от ненужных вещей.

export default {
  mounted () {
    let timer = null
    timer = setInterval(() => {
      console.log(Date.now())
    }, 1000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
    })
  }
}

9. Программно монтировать компоненты

В некоторых случаях программная загрузка компонентов намного элегантнее. Например, через глобальный контекст$popup()или$modal.open()Откройте всплывающее или модальное окно.

import Vue from 'vue'
import Popup from './popup'

const PopupCtor = Vue.extend(Popup)

const PopupIns = new PopupCtr()

PopupIns.$mount()

document.body.append(PopupIns.$el)

Vue.prototype.$popup = Vue.$popup = function () {
  PopupIns.open()
}

Element UIРеализован хорошо структурированный модальный компонент, который позволяет использовать пользовательские API для управления жизненным циклом экземпляров. Теория очень похожа на то, что я продемонстрировал выше.

Вот 9 технологий, связанных с Vue 2.x, надеюсь, в этой статье вы сможете лучше понять, как использовать фреймворк. Если вы считаете, что эта статья отличная, поделитесь ею в других социальных сетях.