Что же такого есть в Vue, что позволяет разработчикам использовать свойство class для элементов DOM?


Что же такого есть в Vue, что позволяет разработчикам использовать свойство class для элементов DOM?

11.03.2020 04:19:43 Просмотров 68 Источник

JavaScript-фреймворки, такие как React и Svelte, не позволяют разработчикам использовать свойство class для элемента DOM, поскольку ключевое слово class зарезервировано в JavaScript. Между тем, другие фреймворки, такие как Vue, каким-то образом обходят это.

Что же такого в том, как реализован Vue, что позволяет разработчикам Vue использовать ключевое слово class для элементов? Я бы предположил, что это что-то с тем, как Vue преобразует файлы .vue в HTML, CSS и JavaScript, но мне любопытно узнать подробности.

Edit: Svelte не использует виртуальный DOM, и вы можете использовать класс prop с Svelte.

У вопроса есть решение - Посмотреть?

Ответы - Что же такого есть в Vue, что позволяет разработчикам использовать свойство class для элементов DOM? / What is it about Vue that enables developers to use the class property on DOM elements?

Zooly

11.03.2020 04:28:33

Вы не можете использовать class с React, потому что React использует React DOM, который использует имена свойств camelCase, а не классические атрибуты HTML. Вот почему в JSX (React render language) вы должны использовать className, а не class.

Vue использует классический HTML-шаблон, поэтому допускается class.

С помощью Svelte вы сможете использовать ключевое слово class в своем шаблоне.

user2063635

11.03.2020 04:31:36

Библиотека React использует JSX для визуализации любых элементов DOM. JSX-это своего рода расширение для JS для рендеринга HTML из javascript. JSX транспилируется перед рендерингом в браузере. Следовательно, имя класса должно использоваться вместо класса. Но есть несколько достижений, переходящих от одной версии reactjs к другой.

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

Aymeric Figer

11.03.2020 06:45:24

Согласно моим исследованиям ответы: благодаря своей встроенной функции.

Я нашел его на стороне вю.Яш https://github.com/vuejs/vue/blob/dev/dist/vue.js что вю-это привязка класса из объекта JavaScript в узел. Элемент узла (vue)используется в JavaScript для назначения DOM elm всех классов.

Код JavaScript el.setAttribute('class', cls) подтверждает это.

  function transformNode (el, options)

и из этого вы найдете функцию в строке 5503:

  function genClassForVnode (vnode)

которые используют

  function renderClass (staticClass, dynamicClass)

Эта функция затем используется

function updateClass (oldVnode, vnode) {
    var el = vnode.elm;
    var data = vnode.data;
    var oldData = oldVnode.data;
  [...]  
    var cls = genClassForVnode(vnode);

    // handle transition classes
    var transitionClass = el._transitionClasses;
    if (isDef(transitionClass)) {
      cls = concat(cls, stringifyClass(transitionClass));
    }

    // set the class
    if (cls !== el._prevClass) {
      el.setAttribute('class', cls);
      el._prevClass = cls;
    }
  }

Примечание: интересны следующие функции: Линия function addClass(el, cls) линии 7873 function bindObjectListeners(data, value) 2866

Разве это помогает ?

Является ответом!
rixo

11.03.2020 08:44:02

Кстати, о стройной фигуре.

Во-первых, давайте исправим ложную посылку:

JavaScript-фреймворки, такие как React и Svelte, не позволяют разработчикам использовать свойство class для виртуального элемента DOM, поскольку ключевое слово class зарезервировано в JavaScript.

Svelte действительно допускает ключевое слово class, как для элементов, так и для компонентов. Вы просто должны работать в рамках применимых ограничений. Мы еще вернемся к этому вопросу.

Давайте начнем с реагировать. Ну, вообще-то, JSX. JSX-это строгий суперсет JS. Давайте обратимся к этому хорошему объяснению . JSX это надмножество JS и как синтаксически (либо JS программа действует JSX) и семантически (либо JS программа ведет себя так же, когда интерпретируется как JSX).

Чтобы быть таким, JSX должен уважать все ограничения JS, из которых "class-зарезервированное ключевое слово". Вот почему React не допускает ключевое слово class.

Обратите внимание, что это не является техническим ограничением. React может переинтерпретировать ключевое слово class и заставить его работать в JSX. Но это сделало бы JSX не совсем суперпозицией JS. Почему? Потому что тогда, в некоторых случаях, один и тот же код JS не будет вести себя одинаково при интерпретации как чистый JS или как JSX (а именно, имея переменную с именем class должен произойти сбой, чтобы быть JS).

Это философское ограничение. В какой-то момент разработчики JSX, должно быть, взвесили неудобство того, что они не могут использовать ключевое слово class, против того, чтобы внезапно перестать быть строгим суперпозицией JS. С одной стороны, вы получаете одну маленькую тонкость, с другой-Вы резко опускаетесь от математически чистого суперсета до просто "еще одного случайного шаблонного языка".

Легко почувствовать сильный математический уклон, который исходит от React, с его акцентом на чистые функции, "взгляд как функция состояния", однонаправленные потоки данных и т. д. Это на самом деле очень важно сразу реагировать. Они импортировали много преимуществ от математики в повседневную разработку приложений. И поэтому, вполне понятно (для меня), эта группа разработчиков отдавала предпочтение чистоте перед второстепенными удобствами.

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

А теперь перейдем к более стройным деталям... Svelte не использует JSX (и ни Vue в большинстве случаев, насколько мне известно). Они используют свой собственный язык шаблонов. Не уверен, что для Vue, но для Svelte это суперсет, не JS, а HTML. Рич Харрис, создатель Svelte, однажды назвал это HTMLX в разговоре (не уверен, насколько официальна эта терминология в настоящее время). Лично я считаю, что это одна из главных причин, почему мне так комфортно со стройной фигурой. Я нахожу это громоздким, чтобы написать HTML is JS, в то время как написание естественного вида HTML(X), чтобы, в конце концов, произвести HTML чувствует себя просто... Естественно! Но я отвлекся...

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

Но во-первых, чтобы устранить любое заблуждение, Svelte позволяет использовать ключевое слово class для собственных элементов (в отличие от компонентов Svelte):

<div class="whatever">No problem with that</div>

Это не был бы правильный суперсет HTML, если бы он этого не делал.

В этом контексте class фактически является "директивой", что означает, что он имеет дополнительную мощность по сравнению с чистым классом HTML. Например:

<script>
  let blue = true
</script>

<!-- will render as: <div class="blue"></div> -->
<div class:blue />

<!-- will render as: <div class="red"></div> -->
<div class:red={blue} />

<!-- you can have several of them too... -->
<div class="foo" class:red class:blue />

Таким образом, Svelte позволяет использовать ключевое слово class, в этом нет никаких сомнений. То есть для нативных элементов.

Теперь, для компонентов, история немного отличается. Вот вам и 2 Закона, о которых я упоминал ранее.

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

class0
class1

Следствием этого является то, что Svelte не может точно знать, к какому элементу(элементам) он должен автоматически применить набор class на охватывающем компоненте. И поэтому в этой ситуации он ничего не делает. Он передает управление обратно вам.

Это не значит, что вы не можете реализовать его, если захотите. Вы просто должны соблюдать наш второй закон: код внутри тега class3 стройного компонента должен быть действительным JS . Здесь опять-таки речь идет не о техническом ограничении, а о философском. Это было повторено снова и снова создателем Svelte и основными разработчиками во многих случаях. На синтаксическом уровне мы уже говорим даже не о суперпозиции, а о равенстве. Любой стройный JS является допустимым JS (обратите внимание, что члены отношения были заменены, по сравнению с "любой JS является допустимым JSX").

С другой стороны, стройный JS также не является семантическим суперпозицией JS. Некоторые программы JS не будут вести себя так же при интерпретации как чистый JS, как при интерпретации с Svelte, потому что Svelte перегружает некоторые конструкции (например, class4 или class5) с другим значением.

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

class7

Затем этот компонент будет использоваться следующим образом ( живой пример):

class8

Таким образом, вы также можете использовать ключевое слово class для компонентов в Svelte.

Фу. Надеюсь, вам понравится развернутый ответ!

Подводя итог, если некоторые из основных фреймворков позволяют использовать ключевое слово class, а некоторые-нет, то это делается по философским соображениям. Это имеет полный смысл для JSX, как суперсета JS, уважать это ограничение. Для HTMLX Svelte не было бы никакого смысла реализовывать это ограничение без каких-либо причин (и перестать быть надстройкой HTML в процессе). Кроме того, React больше фокусируется на чистоте математики, а Svelte-на выразительности и удобстве кода. Как всегда с хорошим программным обеспечением, это все в компромиссе!

Помочь в развитии проекта:
Закрыть X