Интервьюер: Вы действительно понимаете v-модель? (Вью2)

внешний интерфейс Vue.js
Интервьюер: Вы действительно понимаете v-модель? (Вью2)

Прочтите эту статью 📖

Ты будешь:

  • Разберись:v-modelДля чего нужен синтаксический сахар?vue2Какая специальная обработка проводится для родных компонентов?
  • Разберись:v-modelв конце концовОднонаправленный поток данныхещедвусторонняя привязка данных?
  • Разберись:v-model«Побочные эффекты» помимо синтаксического сахара?
  • Узнайте, как сделать так, чтобы ваши компоненты также поддерживалиv-modelграмматика.

один,v-modelпо сути является синтаксическим сахаром.

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

Что такое синтаксический сахар?

Синтаксический сахар — это просто «удобное написание».

В большинстве случаев,v-model="foo"Эквивалентно:value="foo" плюс @input="foo = $event";

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

да, вВ большинстве случаевв этом случае.
Но есть исключения:

  1. vue2предоставляется компонентуmodelсвойства, которые могут быть настроены пользователемимя свойства передается по значениюа такжеИмя события обновленного значения. Я пока пропущу это и подробно обсужу в разделе 4.

  2. для родногоhtmlродные элементы,vueДелать много «грязной работы», чтобы заставить нас игнорироватьhtmlРазличия в API. Левая и правая версии следующих элементов эквивалентны:

  • textareaэлемент:

textarea

  • selectвыпадающий список:

  • input type='radio'Одиночная коробка:

radio

  • input type='checkbox'Флажок:

checkbox

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

2. Является ли v-model просто синтаксическим сахаром? (Викторина)

v-modelНе только синтаксический сахар, но и побочные эффекты.

Побочные эффекты следующие:еслиv-modelПривязка является несуществующим свойством отзывчивого объекта, тогдаvueАвтоматически добавит это свойство и сделает его отзывчивым.

Например, посмотрите на следующий код:

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: '公众号: 前端要摸鱼',
      }
    }
  }
}

Не определено в реактивных данныхuser.telсвойства, ноtemplateиспользоватьv-modelграницаuser.tel, угадайте, что происходит, когда вы печатаете?

Смотрите эффект:
副作用

Откроем ответ:userбудет добавленоtelсвойства иtelЭто свойство до сих порОтзывчивыйиз.

Это эффект "побочных эффектов", вы узнали?

три,v-modelДвусторонняя привязка или односторонний поток данных?

2.1 v-modelЭто двухсторонняя привязка?

Да, это официально.

"Вы можете использовать директиву v-model в форме<input>,<textarea>а также<select>Создайте двустороннюю привязку данных к элементу. 』—официальная документация vue2

2.2 Этоv-modelЭто односторонний поток данных?

Да, это даже типичная парадигма однонаправленного потока данных.

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

  • Что такое единый поток данных?

Дочерний компонент не может изменить то, что ему передает родительский компонент.propProperties, рекомендуемая практика заключается в том, что он генерирует события, чтобы уведомить родительский компонент об изменении связанного значения самостоятельно.

  • v-modelКаков подход?

v-modelПрактика полностью соответствует одноэлементному потоку данных. Скорее, он дает соглашение об именах и определениях событий.

хорошо известный.syncМодификаторы — еще одна типичная парадигма однонаправленного потока данных.单向数据流8字真诀

«Односторонний поток данных» можно описать восемью словами: «Данные вниз, события вверх».

В-четвертых, как сделать так, чтобы разрабатываемые вами компоненты поддерживалиv-model

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

по определениюvueкомпонент, вы можете предоставитьmodelАтрибуты, которые определяют, как этот компонент поддерживаетv-model.

modelСами свойства имеют значения по умолчанию, а именно:

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

То есть, если вы не определяетеmodelсвойства, или вы определяете свойства лицом к лицу, когда другие используют ваш пользовательский компонент,v-model="foo"полностью эквивалентен:value="foo"плюс@input="foo = $event".

если поставитьmodelНекоторые изменения внесены в свойства, а именно:

// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}

Так,v-model="foo"эквивалентно:ame="foo"плюс@zard="foo = $event".

Да, это так просто, давайте рассмотрим пример.

Сначала определите пользовательский компонент:

<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  model: { // 自定义v-model的格式
    prop: 'ame', // 代表 v-model 绑定的prop名
    event: 'zard' // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit('zard', newYear)
    }
  }
}
</script>

Затем мы используем компонент в родительском компоненте:

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

Взгляните на эффект:我们是TI冠军

Сделайте так, чтобы ваши компоненты поддерживалиv-modelЭто так просто.

Пять, демо и исходный код

Чтобы получить исходный код, пожалуйста, посетите githubгитхаб чжаншичуня

6. Конец

я春哥.
Я люблюvue.js , ElementUI , Element PlusЧто касается стека родственных технологий, то моя цель — поделиться с вами самыми практичными и полезными моментами знаний, надеюсь, каждый сможет пораньше уйти с работы, быстро закончить работу и успокоиться.

ты сможешьНаггетсСледуй за мной или вНет публикинайди меня в:前端要摸鱼.
Надеюсь, вам всем весело.

Категории