Vue.js - это простой в использовании фреймворк для веб-приложений, который мы можем использовать для разработки интерактивных интерфейсных приложений.
В этой статье мы рассмотрим некоторые распространенные ошибки при разработке приложений Vue.
Реактивность
Система реактивности Vue может улавливать множество видов обновлений данных и соответственно обновлять наши вычисленные свойства, наблюдатели и шаблоны. Однако есть некоторые вещи, которые Vue будет упускать. Именно здесь наш код должен помочь Vue правильно обновлять элементы.
Один случай, когда он не обновит что-либо, - это когда элементы добавляются или удаляются из объекта.
Мы можем убедиться, что он обновляется, написав:
<template> <div id="app"> <p v-for="(v, k) in ages"> {{k}} - {{v}} <button @click="remove(k)">Remove</button> </p> </div> </template> <script> export default { name: "App", data() { return { ages: { Jane: 20, Alex: 21, Mary: 19 } }; }, methods: { remove(key) { this.$delete(this.ages, key); } } }; </script>
В приведенном выше коде мы должны вызвать $this.delete
со свойством компонента, из которого мы хотим удалить записи, и ключом записи, из которой нужно удалить запись.
Точно так же он не может определить, обновляются ли значения. Мы можем использовать метод this.$set
для обновления значений. Например, мы можем написать:
<template> <div id="app"> <button @click="random">Random Age</button> <p v-for="(v, k) in ages">{{k}} - {{v}}</p> </div> </template> <script> export default { name: "App", data() { return { ages: { Jane: 20, Alex: 21, Mary: 19 } }; }, methods: { random() { for (const k of Object.keys(this.ages)) { this.$set(this.ages, k, (Math.random() * 20).toFixed(0)); } } } }; </script>
В методе random
у нас есть цикл for...of
, который вызывает this.$set
со свойством для обновления в качестве первого аргумента, ключ записи для обновления в качестве второго аргумента и значение, которое мы хотим обновить в качестве третьего аргумента.
Кроме того, мы должны использовать $this.set
для обновления значения массива новым значением. Например, мы можем сделать это следующим образом:
<template> <div id="app"> <button @click="random">Random Age</button> <p v-for="a in ages">{{a.name}} - {{a.age}}</p> </div> </template> <script> export default { name: "App", data() { return { ages: [ { name: "Jane", age: 20 }, { name: "Alex", age: 21 }, { name: "Mary", age: 19 } ] }; }, methods: { random() { for (let i = 0; i < this.ages.length; i++) { const newVal = {...this.ages[i], age: (Math.random() * 20).toFixed(0)} this.$set(this.ages, i, newVal); } } } }; </script>
В приведенном выше коде мы вызываем this.$set
, чтобы установить значение каждой записи, передавая массив, который мы хотим изменить, в качестве первого аргумента. Индекс записи, которую мы хотим изменить в качестве второго аргумента, и значение, которое мы хотим установить в качестве третьего аргумента.
Vue также не может определить, когда изменяется длина массива. Чтобы обрезать массив, мы должны использовать slice
.
Например, если у нас есть компонент, в котором мы хотим усечь массив со 100 записей до 5 одним нажатием кнопки, мы можем написать:
<template> <div id="app"> <button @click="truncate">Truncate</button> <p v-for="n in nums">{{n}}</p> </div> </template> <script> export default { name: "App", data() { return { nums: new Array(100).fill(Math.random()) }; }, methods: { truncate() { this.nums = this.nums.slice(0, 5); } } }; </script>
Мы назначаем новый массив, возвращенный из slice
, в this.nums
в методе truncate
, чтобы выполнить усечение.
Плагины
Если нам нужно добавить плагины, мы должны вызвать Vue.use
, прежде чем пытаться их использовать. В противном случае мы получим ошибки, когда попытаемся их использовать.
Разделители
Пользовательские разделители для интерполяции выражений в шаблоне доступны только в автономной сборке, которую мы можем включить с помощью тега script
. В версиях NPM этого нет.
HTML-интерполяция
Мы можем использовать директиву v-html
для отображения обработанного необработанного HTML-кода. Мы не можем использовать привязки, реквизиты и директивы в необработанных строках HTML, которые мы используем с v-html
. Чтобы использовать их, мы должны вместо этого определить компоненты.
Например, мы можем написать:
<template> <div id="app"> <div v-html="msg"></div> </div> </template> <script> export default { name: "App", data() { return { msg: "<h1>Hello world</h1>" }; } }; </script>
В приведенном выше коде у нас есть поле msg
с тегом h1. Мы можем установить его как значение для v-html
и сохранить форматирование h1.
Заключение
Система реактивности Vue несовершенна. Для обновления данных потребуется помощь в случае изменений в массиве или объекте. Кроме того, мы должны позвонить Vue.use
, чтобы зарегистрировать плагины, прежде чем мы сможем их использовать.
Пользовательские разделители доступны только в автономной сборке Vue, которую мы включаем в тег скрипта. Интерполяцию HTML можно выполнить с помощью директивы v-html
.