Раньше я сделал ряд статей на библиотеке компонентов Heyui, некоторые люди посоветовали мне поделиться с проблемами, встречающимися в разработке, это можно считать попыткой, чтобы увидеть вас отзывы, будет больше знаний о разработке знаний.
Прежде всего, эта статья о «vue-разработке».глубокая яма", а не некоторые основные ошибки, такие как "сбой установки vue, модуль не найден или как определяется vue-router", написанные в некоторых статьях.
Затем эта статья требует, чтобы читатель имел базовое представление о vue и использовал его.Если вы не понимаете vue, рекомендуется сначала собрать его, а прочитать позже.
HeyUI
Если вы не знакомы с нашей библиотекой компонентов, вы можете обратиться к нашему официальному сайту:
heyui.top
Или посмотрите наш гитхаб:
github.com/heyui/heyui
В этой статье в основном рассказывается о распространенных и труднорешаемых ошибках, возникающих при использовании vue.Возможно, что система не сообщает об ошибках, но мы просто не можем найти причину.
Вопрос 1. Данные были изменены, но интерфейс до сих пор не обновлен
<template>
<div id="app">
<p>a:{{value.a}}</p>
<p><button @click="changeValueA">change a value</button></p>
<p><button @click="changeValueToughA">change a value use $set</button></p>
<p>b:{{value.b}}</p>
<p><button @click="changeValueB">change b value</button></p>
<p><button @click="changeValue">change value</button></p>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
value: {
b: 1
}
},
methods: {
changeValueA() {
this.value.a = new Date().getTime();
},
changeValueToughA() {
this.$set(this.value, "a", new Date().getTime())
},
changeValueB() {
this.value.b = new Date().getTime();
},
changeValue() {
this.value = {
a: 1,
b: 2
};
}
}
})
</script>
Как показано на рисунке выше, результат выполнения:
- Просто нажмите
change a valueэто недействительно. - нажмите сначала
change a valueПосле недействительного нажмите еще разchange a value use $setтакже будет недействительным. - нажмите
change a value use $setдействителен, и после щелчка нажмитеchange a valueэто снова работает - нажмите
change value, нажмитеchange a valueэто снова работает - нажмите
change b valueвсегда действительный
Вам следует обратить внимание на следующее
-
из-за
dataПод определением прямого цели добавьте атрибут не прослушивание, например,value.aНа самом деле, он не определен в данных, вы только через$setVue способ сообщить о назначении свойств для завершения и обновления представления. -
$set -
Если свойства самого объекта, были определены следующие данные для изменений свойства объекта, которые можно контролировать, например,
value.b, вы можете обновить представление напрямую, изменив значение b. -
последний
changeValueМетод заключается в изменении прямых атрибутов в данных vue, его можно отслеживать в целом, а обновление принадлежитvalueПредставление всех подресурсов ниже.
Онлайн-демонстрация:код спрей.IO/VV PV VP/spray/…
Основная проблема заключается в том, что мы редко используем $set в нашей разработке, поэтому редко сталкиваемся с проблемами, но новички часто делают подобные вещи, и они все еще в замешательстве.Есть ли проблема с Vue?
Продолжайте, о том, как оптимизировать код, чтобы предотвратить такого рода проблемы, смотрите внизЗаметки о разработке👇👇👇
Примечания разработчиков:
1. При определении данных обязательно укажите все соответствующие данные. Поскольку данные представляют собой логику обработки всего модуля, если вы используете $set ниже, читаемость кода очень плохая, не говоря уже о том, что есть много необъяснимых ошибок.
2. Бизнес-объекты определяются с использованием модели данных
new Vue({
el: '#app',
data: {
page: {
page: 1,
size: 10
},
loading: false,
person: {}
},
})
Как показано на рисунке выше, мы можем определить некоторые общие свойства, но аналогичноperson
метод: Мыjs-modelPerson.parse({})
Вы можете прочитать эту статью, которую я написал:Создайте интерфейсную модель данных, необходимую для разработки Vue.
Basic.js
import Model from "js-model";
let Person = new Model({
"id": 0,
"description": "",
"tags": [ 0 ],
"companyId": "",
"rate": {
type: Number,
default: 0.8
},
"salary": Number
});
export default Basic;
import Basic from './Person.js'
let basic = Person.parse({});
basic:
{
"id": null,
"source": null,
"description": null,
"tags": [],
"companyId": null,
"rate": 0.8, // use default value
"salary": null
}
Практическое применение:
new Vue({
el: '#app',
data: {
page: {
page: 1,
size: 10
},
loading: false,
person: Person.parse({})
},
})
👍
Эта проблема раньше, мы будем продолжать видеть ее.
Вопрос 2, цикл v-for должен добавить ключ
Меня эта проблема давно мучает, так как очень не хочется добавлять ключи.
Но в разработке системы если не добавишь ключ то умрешь, а умирать некрасиво.Все равно в коде нашей компании еще много обработок без ключа.На самом деле большого нет проблема с чистым отображением, сразу куча предупреждений Очень расстроило.
Я упомянул некоторые баги, которые кажутся необоснованными, но автор опроверг это, не добавив ключ, поэтому я могу только послушно добавить ключ.
Некоторые выдержки из ответа автора мне:
The last
<test-b>belongs to the same parent with the v-for list, but is un-keyed - this makes the list "partially-keyed" and can lead to unexpected behavior.
You are using the index as the key... which is the same as no key at all. You should give each of your data objects a unique id so that they can be keyed properly.
Подытожим ответ Ю.:
1, еслиbelongs to the same parentОдин и тот же компонент принадлежит одному и тому же родителю, если ключ не добавлен,lead to unexpected behaviorприведет к непредсказуемому поведению
<template>
<div>
<ComA></ComA>
<ComA></ComA>
</div>
</template>
Уведомление:Поэтому вышеописанная ситуация тоже относится к разряду которых нужно добавить ключ, не то что v-for, но в целом проблем не будет.Если возникнут какие-то неизвестные ошибки отображения, то вообще можно добавить ключ.Решение (Мы сталкивались с этим и раньше, при рендеринге особо сложных данных просто не отображалось, из-за сложной структуры, я думал проблема с кодом, корректировал целый день, позже обнаружил, что код нет проблем, добавьте ключ для решения).
2,You are using the index as the key... which is the same as no key at all
Вы используете индекс в качестве ключа, что на самом деле то же самое, что и не использовать ключ
<template>
<div>
<ComA v-for="(item, index) of list" :key="index"></ComA>
</div>
</template>
Уведомление
Онлайн-демонстрация:код спрей.IO/VV PV VP/spray/…
Шаги:
- Нажмите, чтобы добавить*3
- Нажмите на первую строку нажмите Me!
- Нажмите на вторую строку, нажмите Me!, чтобы ее щелкнули
- Нажмите, чтобы удалить первую строку
Discover Clicked зарезервирован, последняя строка Click ME! удалена
Если вы добавите ключ к отметке времени v-for, проблема будет решена.
Вопрос 3. В цикле v-for, если есть редактирование данных, обязательно использовать массив объектов
По сути, этот вопрос является производным от предыдущего.
До того, как у нас появился список данных, которые нужно было отредактировать, мы определили его в начале[String], но для v-for нужен ключ, в качестве ключа можно использовать только строковые данные.
<template>
<div id="app">
<div v-for="(item,index) of list" :key="item">
<p>{{item}}</p>
<input type="text" v-model="item">
<button @click="remove(index)">delete</button>
</div>
<button @click="add()">add</button>
</div>
</template>
<script>
new Vue({
el: '#app',
data: {
list: []
},
methods: {
add: function() {
this.list.push("string");
},
remove: function(index) {
this.list.splice(index, 1);
}
}
})
</script>
Коллега спросил меня, почему ввод размыты, как только я его редактирую, хехехе ...
Можешь представить?你改动了一个值，然后你自己被重新渲染了。
постскриптум
Краткое изложение этого выпуска находится здесь, и за ним последуют другие резюме.
- Как использовать директиву vue2.0
- Механизм реализации Vue V-модель
наконец
Надеюсь, вы все поддержите нашу библиотеку компонентов.
HeyUI, 🎉UI Toolkit для Интернета, Vue2.0