Каков хороший вариант использования аргумента в директиве vue.js?

avatar
Jim Cooper
8 апреля 2018 в 01:02
75
2
0

Может ли кто-нибудь помочь мне понять хороший пример использования arg и modifiers директивы Vue.js? Поскольку мы уже можем передавать данные как объект в value директивы, мне трудно увидеть значение arg и modifiers.

Например, я мог бы сделать следующее:

<div v-myDirective:foo.a.b="some value"> ...

Но я мог бы так же легко сделать то же самое, например:

<div v-myDirective="{arg: 'foo', a:true, b:true, value: 'some value'}"> ...

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

Есть ли очевидный вариант использования, который я упустил?

Источник

Ответы (2)

avatar
Bhojendra Rauniyar
8 апреля 2018 в 05:50
2

Оба варианта использования одинаковы. Но первый — это просто сокращенный код:

.
<div v-myDirective:foo.a.b="some value">

Но помните, что foo.a.b имеет модификаторы a и b, и директивы возвращают для них true, когда они представлены внутри директивы.

Когда вы просто используете foo.a, модификатор b отсутствует и возвращает false.

if (binding.modifiers.a) {
  // do something a
}
if (binding.modifiers.b) {
  // do something b
}

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

<div v-myDirective="{arg: 'foo', a:'some string', b:100, value: 'some value'}">

Таким образом, вы можете проверить, имеет ли a 'какую-то строку', а b имеет 100 в вашей директивной функции.

if (binding.value.a == 'some string') {
  // do something a
}
if (binding.value.b == 100) {
  // do something b
}

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

avatar
acdcjunior
8 апреля 2018 в 16:06
0

Удобство/удобство программирования, вот и все.

Причина, по которой кто-то предпочитает v-directive:foo="bar" вместо v-directive="{foo: bar}", заключается в том, что люди предпочитают :prop="val" вместо v-bind:prop="val". Удобство.

То же самое с v-on:click и @click.

Использование декларативного способа (вместо "значения") может быть намного более читабельным и иметь больше смысла для конечного пользователя (программиста). Декларативный способ намного лучше разделяет что такое "метаданные" и что такое "полезная нагрузка" для директивы.

Если конечный пользователь является дизайнером (не привыкшим к нотации объектов JavaScript), я бы сказал, что это имеет еще большее значение.

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

v-directive="{a: 1, b: '123', c: message, d: 'false'}"

Неужели люди действительно не забудут правильно поставить '123' в кавычки, чтобы это означало строку? Будут ли они делать это, не цитируя значение a? Будут ли они всегда помнить, что должны цитировать одно, а не другое? Понятно ли пользователю, что message будет значение this.message, а не строка "message"? Если d является логическим свойством, насколько плохо его цитировать (случайно)?


Наконец, еще один важный момент, на который, возможно, повлияли дизайнеры Vue, заключается в том, что они пытаются сделать доступными для пользовательских директив то же самое поведение, доступное для нативных директив. И все эти модификаторы/аргументы существуют в нативных директивах (например, v-bind:address.sync="myAddressProp").