Сокровище, которое вы не нашли в документе vue

Vue.js

Первый раз написать статью в Наггетс

  • Отличие от ежедневных записей на csdn для решения задач себе и другим, хочу активно делиться и обсуждать
  • Личные возможности ограничены, решайте небольшие проблемы, добро пожаловать на обсуждение и исправление

Причина, по которой я хотел написать Vue в первой статье, заключалась в том, что я только что купил книгу «Введение в Vue.js», поэтому до того, как книга появится, я планирую перечитать документ Vue (я должен похвалить Vue документ, я перешел с Angular на Vue в прошлом) Когда я смотрю на документ, я чувствую себя комфортно~~)

Основное содержание этой статьи:

  • Из документации Vue
  • вы могли видеть
  • Но вы, возможно, не использовали

ответ данных vue недействителен

Знаете ли вы, при каких обстоятельствах ответ данных vue будет недействительным?Приводится официальный пример:

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

В повседневной бизнес-обработке, особенно при рендеринге массивов в цикле for, после использования v-for динамически указывайте значение массива, работая с индексом, который не отвечает.Давайте возьмем пример, используя реальный бизнес-код:

<template>
  <div>
    <div v-for="(item,key) in list" :key="key">
      {{item}}
    </div>
    <button @click="changeList">失效</button>
    <button @click="respondList">响应</button>
    {{list}}
  </div>
</template>

<script>
export default {
  name: 'ex',
  data () {
    return {
      list: [11, 12, { money: 17 }]
    }
  },
  methods: {
    changeList () {
      // 失效代码
      this.list[0] = 16
      this.list.length = 0
    },
    respondList () {
      // 生效代码
      this.list[2].money = 0
      this.list[0] = 16
    }
  }
}
</script>

Тогда давайте посмотрим, что произойдет:

在这里插入图片描述
Это очень интересно, мы видим, что в этом процессе при выполнении метода changeList() 11 на странице не становится 16 и массив не становится пустым массивом, а при выполнении второго метода this. список был Пустой массив приводит к ошибке. Он также подтверждает, что официальный веб-сайт верен, мы не можем напрямую манипулировать значением элемента массива, и ответ, который вы хотите, не будет получен.

но! Вы можете обнаружить, что подобные операции часто возникают в вашем собственном проекте, но эта проблема не возникает, поэтому давайте посмотрим, что заставило нас игнорировать эту проблему в проекте. Пожалуйста, посмотри:

在这里插入图片描述
Я выполнил функцию responseList() напрямую, но вижу, что ответ на предложение this.list[0] = 16 также выполняется вместе, поэтому эта проблема не возникает в наших повседневных проектах.

Поскольку в повседневных проектах редко используется отдельный метод для изменения list[index], который обычно сопровождается другими операциями над массивом или объектами в массиве, и эти операции вызовут ответ Vue, ответ Vue не является ответом нам. Процесс кода, он отвечает на результат, а наш процесс кода просто означает, следует ли запускать реакцию Vue на результат кода.

  • Проще говоря, когда выполняется первый метод, 2 строки кода внутри изменяют список на пустой массив, но ни одна из этих 2 строк кода не вызывает ответ Vue, и страница остается неизменной.
  • Выполните второй метод, this.list[2].money = 0 не только изменяет money на 0, но также запускает механизм ответа Vue, то есть Vue обновит список после выполнения метода, поэтому вторая строка this.list [0] = 16 После изменения всего списка метод завершается, и Vue обновляет список

Поэтому нам нужно избегать назначения [index] и длины массива непосредственно в Vue, обратите внимание! дав одиночестве.

Ответ данных Vue снова недействителен?

Вы правильно прочитали, ответ данных vue вот-вот снова выйдет из строя.Вы, возможно, много писали об этом сбое в своих обычных проектах, ноВы еще не заметили!Эта точка знаний исходит из небольшого фрагмента кода подсказки в рендеринге списка документа vue:

var vm = new Vue({
  data: {
    a: 1
  }
})
// `vm.a` 现在是响应式的

vm.b = 2
// `vm.b` 不是响应式的

Боюсь, вы никогда не думали, что в вашем проекте сработает obj.a=1.В документе есть два важных предложения:

Тем не менее из-за ограничений JavaScript VueНе удается обнаружить добавление или удаление свойств объекта. Для уже созданных экземпляров Vue не может динамически добавлятькорневой уровеньотзывчивые свойства.

Я считаю, что моя смелость заставила вас осознать проблему.Что касается того, почему вы не чувствуете неудачи в повседневной жизни, это то же самое, что и в предыдущем примере.Конечно, официальный метод работы с атрибутами объекта сам по себе таков:

Vue.set(object, key, value)

Пожалуйста, обратитесь к документации для конкретного использования.

Функции можно использовать не только в {{}}

Я пытаюсь сказать, что вы можете использовать функции не только в двойных скобках, но и в v-for. Конечно, если кто-то не знает, что двойные скобки могут использовать функции, давайте сначала продемонстрируем это:

<template>
  <div>
    <div v-for="(item,key) in list" :key="key">
      {{filterList(item)}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'ex',
  data () {
    return {
      list: [0, 1, 2]
    }
  },
  methods: {
    filterList (item) {
      if (item > 0) {
        return '大于0'
      } else {
        return item
      }
    }
  }
}
</script>

在这里插入图片描述
Хорошо, дальше документация подсказывает нам хитрость, просто посмотрите пример с официального сайта:

<li v-for="n in evenNumbers">{{ n }}</li>

data: {
  numbers: [ 1, 2, 3, 4, 5 ]
},
computed: {
  evenNumbers: function () {
    return this.numbers.filter(function (number) {
      return number % 2 === 0
    })
  }
}

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

Функция напрямую вызывает собственные события текущего элемента.

Во-первых, этот навык подходит для:

  1. Вы хотите привязать событие к элементу
  2. Хотя вам может потребоваться управление бизнесом на вашем мероприятии, управляйте собственным событием браузера в соответствии с бизнесом.

При привязке события вы можете передать его методу с помощью специальной переменной $event:

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

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

Знаете ли вы, что у Vue много модификаторов?

Есть v-once и .once

Всем известно, что vue рекомендует использовать v-once для недорогого рендеринга статического контента, но если вы внимательно прочитаете документацию, то должны знать v-once. cache v-once component , но я надеюсь, что вы еще раз прочтете официальную подсказку:

Опять же, постарайтесь не злоупотреблять этим режимом. когда нужно сделать рендерингМного статического контента, вам будет удобно в редких случаях, если только вы не оченьОстерегайтесь медленного рендеринга, в противном случае это совершенно не нужно - плюс это вызовет много путаницы позже. Например, представьте, что другой разработчик не знаком с v-once или отсутствует в шаблоне.Они могут часами пытаться понять, почему шаблон не обновляется должным образом..

Да, если ваши накладные расходы на рендеринг компонента не настолько серьезны, что вы думаете, что это заметно медленно, не используйте его.

Тогда мы говорим.один раз события

<!-- 点击事件只会执行一次 -->
<form @click.once="submit"></form>

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

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

вы думаете тип = "число"

Когда вы используете числовой ввод в форме, мы обычно используем type=number, но, возможно, никто не замечает, что на самом деле возвращает ввод, например:

<template>
  <div>
    {{age}}
    <input v-model.number="age" type="number" @change="lookAge">
    {{year}}
    <input v-model="year" type="number" @change="lookYear">
  </div>
</template>

<script>
export default {
  data () {
    return {
      age: null,
      year: null
    }
  },
  methods: {
    lookAge () {
      console.log(this.age)
    },
    lookYear () {
      console.log(this.year)
    }
  }
}
</script>

В чем разница между этим небольшим фрагментом кода?

在这里插入图片描述
Во-первых, в плане рендеринга, по крайней мере, результаты правильные, и результаты консоли тоже в порядке, но при отладке консоли, чем отличаются синие цифры от белых, может у многих не было заметил эту проблему, оглянуться назад Документация позволит вам понять вопрос, который я только что поднял.Исходный документ:

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

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

Это часто полезно, потому что значение элемента ввода HTML всегда будет возвращать строку, даже если type="number" . Если значение не может быть проанализировано функцией parseFloat(), будет возвращено исходное значение. Да, я думаю, что это чрезвычайно гармонично для людей, которые используют ts.

Если вы видите модификатор .number выше, вы должны увидеть модификатор .trim далее в документации:

Если вы хотите автоматически отфильтровать ведущие и конечные пробельные символы, введенные пользователем, вы можете добавить модификатор отделки в V-образную модель:

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

Я действительно сталкивался с этой проблемой раньше, но, к сожалению, метод, который я использовал, заключался в том, чтобы использовать обрезку js, чтобы справиться с ней отдельно.Однако документ настолько прост, что я плохо его читал!

Последний совет

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

props: {
  title,
  author
}

Позже я написал это:

props: {
  title: String,
  author: Object
}

Тогда я написал это:

props: {
  title:{
      type: String,
      required: true
    },
  author:{
      type: Object,
      required: true
    }
}

Затем я прочитал документацию и обнаружил, что также можно написать:

props: {
  // 带有默认值的对象
  title:{
      type: String,
       // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { message: 'hello' }
      }
    },
  // 自定义验证函数
  author:{
      validator: function (value) {
        // 这个值必须匹配下列字符串中的一个
        return ['au', 'th', 'or'].indexOf(value) !== -1
      }
    }
}

Да, но также с поддержкой аутентификации, и вы можете использовать пользовательскую функцию проверки! Я нашел, что это совет, но самое важное далее в этом документе:

Vue (в сборках для разработки) будет генерировать консольное предупреждение, когда проверка свойства не пройдена.

Обратите внимание, что эти реквизиты проверяются перед созданием экземпляра компонента, поэтому свойства экземпляра, такие какданные, вычисленныеи т. д.) по умолчанию или функция валидаторанедоступениз.

Самое критичное предложение в функции проверки: переменные и методы в данных и вычисляемых свойствах недоступны.

На этом все закончилось. Это мой документ vue во время моих поездок на работу. Я готов взять на себя инициативу поделиться некоторыми упущениями в нем или небольшим контентом, который редко используется в обычных проектах, и я делился им. с тобой.

Если будет полезно, оставьте комментарий, если бесполезно, не жалуйтесь на меня, пожалуйста, ха-ха.

Делюсь впервые, раскладка общая, надеюсь на отзывы, если будут, поделюсь статьей в следующий раз.Практический анализ кода Vuex на основе исходного кода фреймворка с открытым исходным кодом

Категории