20 советов по Vue, которые должен освоить каждый квалифицированный фронтенд-инженер среднего уровня

первоначальное намерение

Я написал статью раньше, оVueПрозрачная передача атрибутов. В статье я перечислил множество способов достижения прозрачной передачи атрибутов. который включает в себя прямые настройкиprops,v-bind="$attrs",render functionи так далее. интересно, см. подробности[Vue Advanced] — Как добиться прозрачной передачи атрибутов компонентов?

Но потом землекоп оставил мне сообщение, на самом делеv-bind="obj"Вы можете напрямую пройти все свойства расширенного объекта, попробуйте, это возможно

Это заставило меня понять, что яVueНедостаточное владение навыками, все с этой статьи.В этой статье я резюмирую многие вещи, которые могут помочь нам повысить эффективность разработки.Vueметоды, а также указать сценарии использования и меры предосторожности для этих методов, я твердо уверен, чтоVueУ разработчиков есть помощь

1. Прозрачная передача атрибутов через v-bind="$props" и v-bind="$attrs"

Много раз мы будем писать некоторые вложенные компоненты, например, подкомпонентом A является B, а подкомпонентом B является C. В это время, если А проходитpropsк B, и B должен пройтиpropsв C, мы часто пишем это, когда B передается в C

<template>
  <child-component :someprop1="someprop1"
                   :someprop2="someprop2"
                   :someprop3="someprop3"
                   :someprop4="someprop4"
                   ...
  />
</template>

Это очень неэлегантно, на самом деле вы можете напрямую использоватьv-bind: $props

<template>
  <child-component v-bind="$props"/>
</template>

Здесь мы используемv-bindВесь объект может быть передан вproperty,аналогичныйv-bind="Obj". Например, для данного поста объекта

post: {
  id: 1,
  title: 'My Journey with Vue'
}

Шаблон ниже:

<blog-post v-bind="post"></blog-post>

Эквивалентно:

<blog-post
  v-bind:id="post.id"
  v-bind:title="post.title"
></blog-post>

это подходитv-bind="$attrs"Это очень полезно при инкапсуляции некоторых компонентов, таких как реализация прозрачной передачи свойств.

vm.$attrsсодержит бездействие в родительской областиpropпризнанный (и приобретенный)attributeПривязки (кроме класса и стиля). Когда компонент не объявляет никаких реквизитов, сюда включаются все привязки родительской области (кроме класса и стиля), и к ним можно получить доступ черезv-bind="$attrs"Передача внутренних компонентов — полезно при создании высокоуровневых компонентов.

Например, пройдя в приведенном вышеpropsвсе связаны сel-input, мы можем написать это в дочернем компоненте:

<template>
  <div>
    <el-input v-bind="$attrs" ></el-input>
  </div>
</template>

Подробности можно увидеть[Vue Advanced] — Как добиться прозрачной передачи атрибутов компонентов?

Некоторые студенты могли подуматьprovideа такжеinject, действительно можно передатьprops, но не может сделать атрибут прозрачной передачи, иprovideа такжеinjectПривязки не реактивны, что требует дополнительного внимания. Это сделано намеренно. Однако, если вы передаете прослушиваемый объект, свойства объекта по-прежнему реагируют.

2. Оба компонента принимают одни и те же реквизиты

В приведенном выше примере компоненты B и C должны принимать одинаковыеprops, где компонент B записывается следующим образом (компонент C аналогичен):

<template>
  <child-component v-bind="$props"/>
</template>

<script>
  import ChildComponent from '@/components/ChildComponent'
  
  export default {
    props:{
      someProp1: String,
      someProp2: String,
      someProp3: String,
      // and so on
    }
  }
</script>

Но с этим есть проблема, то есть модифицируется компонент Cprops, тогда компонент B должен быть изменен вместе, недостатком этого может быть упущение. Кроме того, код избыточен и не кажется оптимизированным. На самом деле, мы можем записать это в компоненте B

<template>
  <child-component v-bind="$props"/>
</template>

<script>
  import ChildComponent from '@/components/ChildComponent'
  
  export default {
    props:{
      ...ChildComponent.options.props
    }
  }
</script>

3. Проверка реквизита

из-заJavascriptслабо типизированный язык, написаниеpropsкогда лучше всегоpropsиспользоватьtypeУкажите тип и установите значение по умолчанию следующим образом:

Vue.component('my-component', {
    // 带有默认值的对象
    propA: {
      type: Object,
      // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    }
})

Но чего мы можем не знать, так это того, чтоpropsНастраиваемые функции проверки

Vue.component('my-component', {
    // 自定义验证函数
    propF: {
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['success', 'warning', 'danger'].indexOf(value) !== -1
      }
    }
})

даже вышеtypeкроме того, что вы можете установитьString Number Boolean Array Object Date Function SymbolКроме того, вы также можете настроить конструктор, и его основной принцип реализации заключается вinstanceofсудить

function Person (firstName, lastName) {
  this.firstName = firstName
  this.lastName = lastName
}

Vue.component('blog-post', {
  props: {
    author: Person
  }
})

Это для проверкиauthor propПередается ли значениеnew Personсозданный

4. Прозрачная передача всех прослушивателей событий

Иногда нам нужны компоненты формы для некоторых библиотек с открытым исходным кодом, таких какelementUIизformПровести слой упаковки, чтобы он лучше обслуживал наш бизнес, но раз он так упакован, возникает проблема, как контролировать внутреннее при звонке.formКак насчет всех событий, предоставляемых компонентом? Нельзя привязывать по одному.

В это время внутреннийformНастройки компонентаv-on="$listeners"

$listenersВходит в родительскую область (исключая.nativeмодификатор)v-onпрослушиватель событий. это может пройтиv-on="$listeners"Передача внутренних компонентов — очень полезно при создании компонентов более высокого уровня, приведенный выше пример можно красиво решить следующим образом:

<template>
  <div>
    ...
    <el-form v-on="$listeners"/>
    ...
  </div>
</template>

Конечно, если дочерний компонент является корневым элементом родительского компонента, вам не нужно писать это,VueЭтот слой был сделан по умолчанию

5. Слоты области видимости разделяют пользовательский интерфейс и бизнес-логику

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

Общая идея слота с прицелом состоит в том, чтобыDOMСтруктура остается на усмотрение вызывающей стороны. Компонент обращает внимание только на бизнес-логику и, наконец, передает данные и события через:item ="item"Метод передается родительскому компоненту для обработки и вызова, реализуя разделение пользовательского интерфейса и бизнес-логики. В сочетании с функцией рендеринга можно добиться эффекта отсутствия компонентов рендеринга.

Подробности смотрите в другой моей статье[Vue Advanced] От слота до компонента без рендеринга

Когда вызывается родительский компонент, это может быть похоже на это, где#rowдаv-slot:rowаббревиатура

<!-- 父组件 -->
<template>
  ...
  <my-table>
    <template #row="{ item }">
      /* some content here. You can freely use 'item' here */
    </template>
  </my-table>
  ...
</template>

<!-- 子组件 -->
<span>
  <!-- 使用类似 v-bind:item="item"，将子组件中的事件或者data传递给父组件-->
  <slot v-bind:item="item">
    {{ item.lastName }}
  </slot>
</span>

Следует отметить, что до Vue 2.6slotа такжеslot-scope, за которым следуетv-slot

6. Параметры динамической команды

существуетVue 2.6Предоставляет такую ​​возможность: вы можете динамически передавать директивные параметры компонентам. Предположим, у вас есть компонент <my-button>, иногда вам нужно привязать событие кликаclick, иногда нужно привязать событие двойного кликаdblclick, на этот раз вы можете написать

<template>
  ...
  <my-button @[someEvent]="handleSomeEvent()"/>
  ...
</template>

<script>
  ...
  data(){
    return{
      ...
      someEvent: someCondition ? "click" : "dblclick"
    }
  },
  
  methods:{
    handleSomeEvent(){
      // do something
    }
  }
  ...
</script>

7. Использование hookEvent

существуетVue 2.Xсреди,hooksможно использовать какEvent,существуетVueв исходном коде называетсяhookEvent. Используя его, мы можем декларативно отслеживать хуки жизненного цикла подкомпонентов в шаблоне, чтобы мы могли добавлять обработчики жизненного цикла к сторонним компонентам.

Например, мы называем ресурсоемкий сторонний компонентList, рендеринг этого компонента может занять много времени, для лучшего взаимодействия с пользователем мы хотимList Когда компонент обновится, добавьтеloadingэффект анимации

В настоящее время мы можем подумать о непосредственном изменении исходного кода этого компонента, используяbeforeUpdateа такжеupdatedпоказыватьloading, но этот подход очень плох. Стоимость первой модификации относительно высока, а вторая не может пользоваться обновлением и обслуживанием этого компонента сообществом с открытым исходным кодом, вам нужно вручную поддерживать его самостоятельно.

В это время можно пройтиhookEventХук-функция цикла декларативного объявления внедрения шаблона похожа на следующую:

<List @hook:updated="handleTableUpdated"></List >

Кроме того, мы также можем датьVueКомпонент добавляет обработчики жизненного цикла

vm.$on('hooks:created', cb)
vm.$once('hooks:created', cb)

Например, мы хотим уничтожить компонент, вызванный ранее, когда компонент будет уничтожен.В общем случае мы сделаем это:

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

8. Использование ключевых значений

существуетVueв использованииv-for, официальная рекомендация принестиkeyзначение, потому что, если не используетсяkey,VueПо умолчанию для обновлений используется стратегия «повторного использования на месте». В некоторых случаях это может привести к неправильному рендерингу, о чем было сказано ранее.Опыт использования ключа для неправильного наступания на яму, вы можете увидеть, если вы заинтересованы

Кромеv-for, В использованииVue-routerРаботая над проектом, вы столкнетесь/path/:idЭто только меняетidНет сцены, но визуализировать разные компоненты. из-заrouter-viewмногоразового использования, чистое изменениеidномер не обновляетсяrouter-view, это не то, что мы ожидали

В это время мы можем дать каждомуrouter-viewдобавить другойkeyзначение, пустьVueКаждый раз, когда параметры маршрутизации переключаются, он считается другим компонентом и обновляется.

<router-view :key="key"></router-view>

На самом деле для всехDOM,VueМожно принять стратегию повторного использования на месте, поэтому, если вы столкнулись с проблемой неправильного порядка рендеринга, вы можете перейти кkeyСоображения о направлении для установки стоимости

9. Пользовательские компоненты используют v-модель

мы знаем,v-modelдаv-bindтак же какv-onС синтаксическим сахаром, используемым в сочетании, следующие две реализации согласуются:

<input v-model="value" />
<input v-bind:value="value" v-on:input="value= $event.target.value" />

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

вv-modelВнутренне используйте разные для разных элементов вводаpropertyи бросать разные события:

• элементы text и textarea используют свойство value и событие ввода
• флажок и радио используют проверенное свойство и событие изменения
• поле выбора имеет значение как опору и изменение как событие

В приведенной выше ситуации, когда мы используем его в пользовательском компоненте, нам нужно использоватьmodelВариант, согласно официальному примеру, написалdemo

здесьlovingVueЗначение будет передано в этот именованныйcheckedизprop. в то же время, когда<base-checkbox>вызвать одинchangeсобытие с новым значением, этоlovingVueизpropertyбудет обновлено.

10. CSS-селекторы со шкалой и глубиной действия

существуетVue-loaderв, когда<style>Этикетка имеетscopedимущество, егоCSSРаботает только с элементом в текущем компоненте, это делается с помощьюPostCSSдля достижения следующего преобразования можно отметить, что.exampleза которым следует [data-v-f3f3eg9], относящийся к элементу

<style scoped>
.example {
  color: red;
}
</style>

<template>
  <div class="example">hi</div>
</template>

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>

<template>
  <!-- 留意data-v-f3f3eg9 -->
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

Но иногда мы хотим смешивать локальные и глобальные стили, вы можете использовать как стили с областью, так и стили без области в одном компоненте.

<style>
/* 全局样式 */
</style>

<style scoped>
/* 本地样式 */
</style>

Но такой глобальный стиль может иметь некоторые побочные эффекты.Мы часто устанавливаем его так, но мы просто хотим установить стиль дочернего компонента в родительском компоненте. Поскольку родительский компонент устанавливаетscoped После этого стили родительского компонента не будут проникать в дочерние компоненты

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

<style scoped>
.a >>> .b { /* ... */ }
</style>

будет компилироваться следующим образом:

.a[data-v-f3f3eg9] .b { /* ... */ }

некоторым нравитсяSassпрепроцессоры, например, не могут правильно разобрать>>>. В этом случае вы можете использовать/deep/ или ::v-deepоператор вместо этого - оба>>>Псевдоним для , который также отлично работает

11.watch immediate

Иногда мы хотим иметь в компонентеwatchЗначение, которое выполняет некоторые операции по инициализации и обновлению страницы, напримерthis.getDetails()

Аналогично следующему:

watch: {
  id: {
    handler(newValue) {
      this.getDetails(newValue);
    }
  }
}

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

хочу быть вwatchобъявлено вidвыполнить сразу послеhandlerметод, вы можете добавитьimmediate: true

watch: {
  id: {
    handler(newValue) {
      this.getDetails(newValue);
    },
    // 代表在wacth里声明了id后这个方法之后立即先去执行handler方法
    immediate: true
  }
}

12. Использование JSX с Vue

JSXэтоJavascriptРасширение синтаксиса, JSX = Javascript + XML, т.е. вJavascriptнаписать внутриXML,потому чтоJSXЭто свойство , поэтому он имеетJavascriptгибкость и одновременноhtmlСемантический и интуитивно понятный

Иногда мы используем функцию рендеринга (render function) для абстрагирования компонента, а функцию рендеринга иногда очень больно писать.На данный момент мы можем использовать его в функции рендерингаJSXУпростите наш код. Чтобы использовать JSX во Vue, вам нужно использовать плагин Babel, который позволяет нам вернуться к синтаксису, более близкому к шаблонам.Подробности см. в статье, которую я резюмировал ранее.[Advanced Vue] Научит вас использовать JSX в Vue

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

render() {
  {/* 指令 */}
  {/* v-model */}
  <div><input vModel={this.newTodoText} /></div>
  {/* v-model 以及修饰符 */}
  <div><input vModel_trim={this.tirmData} /></div>
  {/* v-on 监听事件 */}
  <div><input vOn:input={this.inputText} /></div>
  {/* v-on 监听事件以及修饰符 */}
  <div><input vOn:click_stop_prevent={this.inputText} /></div>
  {/* v-html */}
  <p domPropsInnerHTML={html} />
}

13.v-cloak решает проблему мерцания страницы

Во многих случаях данные в нашем шаблоне страницы получаются асинхронно.В случае плохой сети при отображении страницы появляется эффект мерцания страницы, что влияет на взаимодействие с пользователем.v-cloakДиректива остается в элементе до тех пор, пока связанный экземпляр не завершит компиляцию, используя его свойства в сочетании сCSSправило[v-cloak] { display: none }Используется вместе, чтобы скрыть нескомпилированныеMustacheмаркировать, пока экземпляр не будет готов

// template 中
<div class="#app" v-cloak>
    <p>{{value.name}}</p>
</div>

// css 中
[v-cloak] {
    display: none;
}

Следует отметить, что хотя проблема с мерцанием решена, но если в этот период ничего не обрабатывать, экран будет гаснуть. Это не тот эффект, которого мы хотим.loadingИли эффект каркасного экрана для улучшения взаимодействия с пользователем.

14. v-once и v-pre повышают производительность

мы знаемVueБольшая часть оптимизации производительности заключается в компиляции этого блока,VueВ исходном коде есть операции, аналогичные маркировке статических узлов дляpatchПроцесс пропуска компиляции, что повышает производительность. Кроме того,Vueпри условииv-preНам решать, пропускать ли процесс компиляции для этого элемента и его дочерних элементов. можно использовать для отображения оригиналаMustacheЭтикетка. Пропуск большого количества узлов без инструкций ускоряет компиляцию.

<span v-pre>{{ this will not be compiled }}</span>   显示的是{{ this will not be compiled }}
<span v-pre>{{msg}}</span>     即使data里面定义了msg这里仍然是显示的{{msg}}

Также, если элементы и компоненты визуализируются только один раз. При последующем повторном рендеринге элемент/компонент и все его дочерние элементы будут рассматриваться как статическое содержимое и будут пропущены. можно использоватьv-once

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 有子元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<my-component v-once :comment="msg"></my-component>
<!-- `v-for` 指令-->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

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

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

Они очень полезны при использовании в качестве компонентов-оболочек.

• Вместо этого программно выберите один из нескольких компонентов для рендеринга.
• в волеchildren,props,dataМанипулируйте дочерними компонентами, прежде чем передавать их в

Смотрите официальную демку, обратите внимание на комментарии

// 根据不同的情况渲染不同的组件
var EmptyList = { /* ... */ }
var TableList = { /* ... */ }
var OrderedList = { /* ... */ }
var UnorderedList = { /* ... */ }

Vue.component('smart-list', {
  functional: true, // 声明 functional: true，表明它是一个函数式组件
  props: {
    items: {
      type: Array,
      required: true
    },
    isOrdered: Boolean
  },
  // 为了弥补缺少的实例
  // 提供第二个参数作为上下文
  render: function (createElement, context) { // 组件中所有的一切都是通过 context 传递的
  	// 根据不同的情况渲染不同的组件
    function appropriateListComponent () {
      var items = context.props.items

      if (items.length === 0)           return EmptyList
      if (typeof items[0] === 'object') return TableList
      if (context.props.isOrdered)      return OrderedList

      return UnorderedList
    }

    return createElement(
      appropriateListComponent(),
      context.data,	// 传递给组件的整个数据对象
      context.children // `VNode` 子节点的数组
    )
  }
})

Обратите внимание, что все в компоненте пропускается черезcontextпрошедший (renderвторой параметр функции), такой как выше черезcontext.data context.childrenсоответственно представляют весь объект данных, переданный компоненту, какcreateElementВторой параметр входящего компонента иVNodeмассив дочерних узлов, подробныйcontextСодержание которого содержатся вОфициальный сайт

16. Используйте Vue.observable для обмена состоянием

Как всем известно,VuexОн специально используется для решения ситуации многокомпонентного разделения состояния, но, как иVuexСогласно официальной документации, если приложение недостаточно большое, лучше его не использовать во избежание громоздкого и избыточного кода.

Vue.observable( object )Сделайте объект отзывчивым.VueВнутреннее использование для обработкиdataОбъект, возвращаемый функцией. Возвращенный объект можно использовать непосредственно в функциях рендеринга и вычисляемых свойствах, и он будет запускать соответствующие обновления при возникновении изменений. Его также можно использовать как минимальное межкомпонентное хранилище состояний для простых сценариев, что-то вроде небольшогоVuex

Мы создаем новый файлstore.js

import Vue from "vue";

// 创建一个小型的 store，里面的数据可以实现多组件共享
export const store = Vue.observable({ count: 0 });

// 模糊VueX 的 mutation
export const mutations = {
  setCount(count) {
    store.count = count;
  }
};

использовать в компонентеstoreзначение и обновлениеstoreЗначение в , вы можете увидеть конкретныеdemo

<template>
  <div id="app">
    <p>count:{{count}}</p>
    <button @click="setCount(count+1)">+1</button>
    <button @click="setCount(count-1)">-1</button>
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld";
import { store, mutations } from "./store";

export default {
  name: "App",
  components: {
    HelloWorld
  },
  // 获取 store 中的数据
  computed: {
    count() {
      return store.count;
    }
  },
  // 更改 store 中的数据
  methods: {
    setCount: mutations.setCount
  }
};
</script>

17. Форма ввода управления - модификатор формы / изменения события / фильтра / инструкция

Мы часто сталкиваемся с содержанием формы ввода контроля спроса, например, поле ввода должно быть цифрами, специальными символами и так не может быть. Здесь я предлагаю некоторые из моих собственных идей на ваш выбор.

модификатор формы

Если это простой управляющий ввод, он должен быть числом или удалить конечный пробел, введенный пользователем, вы можете использовать его напрямуюVueПредоставленные модификаторы формы.numberа также.trim

Если вы хотите автоматически преобразовывать введенное пользователем значение в числовой тип, вы можете датьv-modelДобавить кnumberМодификатор:

<input v-model.number="age" type="number">

Если вы хотите автоматически фильтровать начальные и конечные пробельные символы, введенные пользователем, вы можете указатьv-modelДобавить кtrimМодификатор:

<input v-model.trim="msg">

изменить событие

Привязывайте события к форме и выполняйте управление вводом формы при обработке событий.

<input v-model="value2" type="text" @change="inputChange(value2)" />

methods: {
  inputChange: function(val) {
    if (!val) return ''
    val = val.toString()
    this.value2 = val.charAt(0).toUpperCase() + val.slice(1)
  }
}

filter

тоже через фильтрfilterпровести

<input v-model="value1"  type="text" />

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

watch: {
  value1(val) {
     this.value1 = this.$options.filters.capitalize(val);
  }
}

Смотрите это для деталейdemo

инструкция

объявить глобальную директиву

// 只能输入正整数,0-9的数字
Vue.directive('enterIntNumber', {
  inserted: function (el) {
    let trigger = (el, type) => {
      const e = document.createEvent('HTMLEvents')
      e.initEvent(type, true, true)
      el.dispatchEvent(e)
    }
    el.addEventListener("keyup", function (e) {
      let input = e.target;
      let reg = new RegExp('^\\d{1}\\d*$');  //正则验证是否是数字
      let correctReg = new RegExp('\\d{1}\\d*');  //正则获取是数字的部分
      let matchRes = input.value.match(reg);
      if (matchRes === null) {
        // 若不是纯数字 把纯数字部分用正则获取出来替换掉
        let correctMatchRes = input.value.match(correctReg);
        if (correctMatchRes) {
          input.value = correctMatchRes[0];
        } else {
          input.value = "";
        }
      }
      trigger(input, 'input')
    });
  }
});

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

<!--限制输入正整数-->
<input v-enterIntNumber placeholder="0" type="number">

18. Событие: специальная переменная $event

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

Решите сцену: иногда, после того, как мы привязываем событие, мы хотим передать другие параметры, кроме собственного объекта события.

Прослушивание натуральногоDOMКогда происходит событие, метод принимает собственный объект события в качестве единственного параметра (значение по умолчанию). Много раз мы хотим получить доступ к оригиналу во встроенном процессоре.DOMСобытия (и хотите передать другие параметры одновременно), вы можете использовать$eventпередать его.

<!-- 注意这里调用的方法有两个参数 -->
<input v-model="value1" @change="inputChange('hello', $event)">

methods: {
  inputChange(msg, e) {
    console.log(msg, e);
  }
}

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

В пользовательском событии$eventэто значение, полученное из его дочерних компонентов

Сценарий: вы хотите отслеживатьel-inputПри передаче переданного значения передайте другие параметры.

<el-input
      v-model="value2"
      @change="change($event, 'hello')"
      placeholder="Input something here"
    />

methods: {
  change(e, val) {
    console.log("event is " + e); // el-input 输入的值
    console.log(val); // hello
  }
}

Смотрите это для деталейdemo

19. Шаблон отладки

Часто мы будем сталкиватьсяtemplateПроблема переменных отчетов об ошибках в шаблоне, на данный момент мы хотели бы пройтиconsole.logнапечатайте в консоль, чтобы увидеть, каково его значение

// 这里最好是判断一下，只有在测试环境中才使用
// main.js
Vue.prototype.$log = window.console.log;

// 组件内部
<div>{{$log(info)}}</div>

видимыйdemo

20. Необходимый инструмент для разработки и отладки Vue — vue-devtools

vue-dev-toolдаVueОфициальный артефакт отладки с открытым исходным кодом, вы можете использовать его для четкого просмотра уровня компонента, изменений данных компонента,Vuexданные и события и т. д. Специально для некоторых сложных приложений это решение может повысить эффективность вашей работы.

До встречи в Интернетеадрес 1

не вижуАдрес 2Есть ручная инструкция по установке

Кроме того,vscodeплагинVeturТакже рекомендую его вместе, поддержку подсветки синтаксиса, блоков кода и других функций, я лично считаю, что использованиеvscodeизVueОбязательно для разработчиков

Суммировать

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

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

Рекомендуемые отличные статьи в прошлом

• [Vue Advanced] — Как добиться прозрачной передачи атрибутов компонентов?
• Знание HTTP, которое должен знать внешний интерфейс
• Самый мощный макет CSS — макет сетки
• Как написать полное приложение Vue с помощью Typescript
• Инструмент веб-отладки, который должен знать внешний интерфейс — свисток

Ссылаться на

• hookEvent of Vue

• 10 Tips and Tricks to Make You a Better Vue.js Developer

• 7 полезных советов по разработке Vue