Функция рендеринга в Vue немного интересна.

JavaScript Vue.js

Автор: Джошуа Бемендерфе.

Переводчик: Front-end Xiaozhi

Источник: vuejsbook.com

Ставьте лайк и смотрите снова, формируйте привычку

эта статьяGitHub GitHub.com/QQ449245884…Он был включен в вышеизложенное, и более ранние статьи с высокими похвалами были классифицированы, а также было систематизировано множество моих документов и учебных материалов. Добро пожаловать в Star and Perfect. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Надеюсь, у нас что-то получится вместе.

Мы знаем, что шаблоны Vue очень мощные и могут в основном выполнять все наши повседневные задачи разработки. Тем не менее, есть некоторые варианты использования, такие как создание динамического компонента на основе ввода или значения слота,renderФункции можно делать лучше и лучше, чем шаблоны.

Люди, которые использовали React для разработкиrenderФункции должны быть вам хорошо знакомы, так как компоненты React созданы с помощью JSX и функции рендеринга. Хотя ВьюrenderФункцию JSX также можно использовать для записи, но здесь мы используем нативный способ JS, из-за этого нам легче понять некоторые основные компоненты системы Vue.

Стоит отметить, что Vue шаблон на самом деле составлен первым разрешениемrenderПредставление функций. Шаблон простоrender函数之上提供了一个方便且熟悉的语法糖。 несмотря на то чтоrenderфункция мощнее, ноrenderФункции плохо читаемы и относительно редко используются.

Создание компонентов

с участиемrenderКомпонент функции не имеетtemplateтег или атрибут. Вместо этого компонент определяетrenderфункция, которая получаетreateElement(renderElement: String | Component, definition: Object, children: String | Array)параметры (по какой-то причине, обычно называемые псевдонимамиh, обвиняемый в JSX) и возвращает элемент, созданный с помощью этой функции, все остальное остается прежним, вот пример:

export default {
  data() {
    return {
      isRed: true
    }
  },

  /*
   * <template>
   *   <div :class="{'is-red': isRed}">
   *     <p>这是一个 render 事例</p>
   *   </div>
   * </template>
   */
  // render 中的渲染结果与上面等价
  render(h) {
    return h('div', {
      'class': {
        'is-red': this.isRed
      }
    }, [
      h('p', '这是一个 render 事例')
    ])
  }
}

Как представлять директивы в функциях рендеринга

Шаблоны Vue имеют различные удобные функции для добавления базовой логики и функций привязки к шаблонам, напримерv-if,v-for,v-moelинструкции и т.д. существуетrenderЭти инструкции нельзя использовать в функциях. Вместо этого он реализован на чистом JS, который также относительно прост для большинства директив.

v-if

v-ifЭто легко реализовать на чистом JS, просто обернитеcreateElementпозвонить с помощьюif(expr)утверждение.

v-for

v-forможно использоватьfor-of,Array.map,Array.filterи т. д. для реализации любого из методов JS. Мы можем комбинировать их очень интересными способами, чтобы получить фильтрацию или срез состояния без вычисляемых свойств.

Например, есть следующий код шаблона для Vue

<template>
  <ul>
    <li v-for="pea of pod">
      
    </li>
  </ul>
</template>

Вы можете использовать следующиеrenderфункция для достижения вышеуказанного эффекта:

render(h) {
  return h('ul', this.pod.map(pea => h('li', pea.name)));
}

v-model

мы знаем,v-modelТолькоbindатрибут сvalueсинтаксический сахар и запускinputУстановите свойство данных для события. Но когдаrenderДля функций такого сокращения нет, нам нужно реализовать его самим.

Предположим, в Vue у нас есть следующая структура:

<template>
  <input v-model='myBoundProperty'/>
</template>

Приведенный выше код эквивалентен:

<template>
  <input :value="myBoundProperty" @input="myBoundProperty = $event.target.value"/>
</template>

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

render(h) {
  return h('input', {
    domProps: {
      value: this.myBoundProperty
    },
    on: {
      input: e => {
        this.myBoundProperty = e.target.value
      }
    }
  })
}

v-bind

attributeа такжеpropertyОба типа привязок помещаются в определение элемента, напримерarttrs,propsа такжеdomProps( valueа такжеinnerHTMLтак далее.).

render(h) {
  return h('div', {
    attrs: {
      // <div :id="myCustomId">
      id: this.myCustomId
    },

    props: {
      // <div :someProp="someonePutSomethingHere">
      someProp: this.someonePutSomethingHere
    },

    domProps: {
       // <div :value="somethingElse">
      value: this.somethingElse
    }
  });
}

Следует отметить, что дляclassа такжеstyleПривязки обрабатываются непосредственно в корне определения, а не какattrs,propsилиdomPropsиметь дело с.

render(h) {
  return h('div', {
    // “类”是JS中的保留关键字，因此必须引用它。
    'class': {
      myClass: true,
      theirClass: false
    },

    style: {
      backgroundColor: 'green'
    }
  });
}

v-on

Обработчик событий также добавляется непосредственно в определение элемента.onопределение

render(h) {
  return h('div', {
    on: {
      click(e) {
        console.log('I got clickeded!')
      }
    }
  });
}

Модификаторы для событий могут быть реализованы внутри обработчиков:

  • .stop -> e.stopPropagation()
  • .prevent -> e.preventDefault()
  • .self -> if (e.target !== e.currentTarget) return

модификаторы клавиатуры

  • .[TARGET_KEY_CODE] -> if (event.keyCode !== TARGET_KEY_CODE) return
  • .[MODIFIER] -> if (!event.MODIFIERKey) return

специальные свойства

Slotsв состоянии пройтиthis.$slotsтак какcreateElement（）Массив узлов для доступа к слоту.

Ограниченные слоты хранятся вthis.$scopedSlots[scope](props：object), как возвращениеcreateElement()Функция для массива узлов.

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

оригинал:v UE JS book.com/intro duct IO…

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете.

Категории