предисловие
Разработать веб-страницу с Vue несложно, но часто возникают некоторые проблемы.На самом деле, большинство проблем упоминается в документе.В остальном мы можем успешно искать ответ на проблему через Google.Чтобы помогите нашим друзьям Они ступают в яму раньше времени, и когда они сталкиваются с проблемами, у них, вероятно, есть спектр в их сердцах, чтобы знать, как решить проблему. Эта статья представляет собой статью, которая сочетает в себе некоторые из советов, которые я знаю, со справочными материалами. Если вам это нравится, вы можете поставить лайк / подписаться и поддержать его. Я надеюсь, что вы сможете что-то получить после прочтения этой статьи.
Краткое содержание статьи:
- Область действия стиля компонента
- Представление обновления массива/объекта Vue не обновляется
- Использование фильтров vue
- Список связанных с рендерингом
- Отслеживание глубины и отслеживание немедленного запуска обратного вызова
- Не используйте функции стрелок в этих случаях
- Маршрутизация ленивой загрузки записи
- Маршрутизированная страница запуска проекта и страница 404
- Артефакт отладки Vue: vue-devtools
Область действия стиля компонента:
Проблема: в DOM динамически создается с JS в компоненте, добавление стилей не вступает в силу.
Сцены:
<template>
<div class="test"></div>
</template>
<script>
let a=document.querySelector('.test');
let newDom=document.createElement("div"); // 创建dom
newDom.setAttribute("class","testAdd" ); // 添加样式
a.appendChild(newDom); // 插入dom
</script>
<style scoped>
.test{
background:blue;
height:100px;
width:100px;
}
.testAdd{
background:red;
height:100px;
width:100px;
}
</style>
результат:
// test生效 testAdd 不生效
<div data-v-1b971ada class="test"><div class="testAdd"></div></div>
.test[data-v-1b971ada]{ // 注意data-v-1b971ada
background:blue;
height:100px;
width:100px;
}
причина:
когда<style>Этикетка имеетscopedсвойство, его CSS действует только на элемент в текущем компоненте.
Так и будетДобавьте один ко всем стилям меток и классов в компоненте.scopedлоготип, как в результате вышеdata-v-1b971ada.
Итак, причина очень ясна: потому что динамически добавляемый дом неscopedдобавлен логотип,не следилtestAddсоответствовать стилю, что приводит к сбою стиля.
Решение
- Рекомендация: удалить область действия этого компонента
Для каждого компонента не так много CSS, когда дизайн должен динамически добавлять DOM и добавлять стили в DOM, scoped можно убрать, что гораздо удобнее, чем следующий метод.
-
Вы можете добавлять стили динамически
// 上面的栗子可以这样添加样式 newDom.style.height='100px'; newDom.style.width='100px'; newDom.style.background='red';
Представление обновления массива/объекта Vue не обновляется
Много раз мы привыкли манипулировать массивами и объектами следующим образом:
data() { // data数据
return {
arr: [1,2,3],
obj:{
a: 1,
b: 2
}
};
},
// 数据更新 数组视图不更新
this.arr[0] = 'OBKoro1';
this.arr.length = 1;
console.log(arr);// ['OBKoro1'];
// 数据更新 对象视图不更新
this.obj.c = 'OBKoro1';
delete this.obj.a;
console.log(obj); // {b:2,c:'OBKoro1'}
Из-за ограничения js Vue не может обнаружить изменения вышеуказанных массивов и добавление/удаление объектов, у многих людей будет проблема, что представление не обновляется из-за вышеуказанных операций.
Решение:
-
this.$set (массив/объект, который вы хотите изменить, позицию/ключ, который вы хотите изменить, какое значение вы хотите изменить)
this.$set(this.arr, 0, "OBKoro1"); // 改变数组 this.$set(this.obj, "c", "OBKoro1"); // 改变对象
Если вы все еще не понимаете, вы можете взглянуть на этот codependemo.
- Собственный метод массива запускает обновление представления:
Vue может отслеживать изменения массива,Нативные методы массива:
splice()、 push()、pop()、shift()、unshift()、sort()、reverse()
смыслИспользование этих методов не требует от нас выполнения дополнительных операций, представление обновляется автоматически.
Рекомендуемое использованиеspliceМетод будет более настраиваемым, т.к. слайсы можно удалять/добавлять в любом месте массива, эту часть можно увидеть в статье, которую я написал несколько дней назад:[Галантерейные товары] js подробный метод работы массива и сбор анализа
- заменить массив/объект
Скажем: вы хотите выполнить итерацию по этому массиву/объекту, сделать что-то с каждым элементом и вызвать обновление представления.
// 文档中的栗子: filter遍历数组，返回一个新数组，用新数组替换旧数组
example1.items = example1.items.filter(function (item) {
return item.message.match(/Foo/)
})
учиться по аналогии: вы можете сначала сохранить массив/объект в переменной, затем пройти по переменной и использовать ее после завершения обхода.объект/массив подстановки переменных.
не перерисовывает весь список:
Vue реализует некоторые интеллектуальные эвристики для максимального повторного использования элементов DOM, поэтому замена массива массивом идентичных элементов является очень эффективной операцией.
Если вы все еще в замешательстве, взглянитеVue-документациядля объяснения этой части.
Использование фильтров Vue Filters:
Фильтры, обычно используемые в фоновых системах управления, или некоторый тип условной фильтрации. Использование фильтра Vue очень простое, но многие друзья могут его не использовать, вот небольшое пояснение.
Два варианта использования в HTML-шаблонах:
<!-- 在双花括号中 -->
{{ message | filterTest }}
<!-- 在 `v-bind` 中 -->
<div :id="message | filterTest"></div>
в компонентеscriptиспользование в:
export default {
data() {
return {
message:1
}
},
filters: {
filterTest(value) {
// value在这里是message的值
if(value===1){
return '最后输出这个值';
}
}
}
}
Использование как указано выше.Вы можете попробовать его в компоненте, и вы это узнаете.Он очень прост и удобен в использовании.
Если вы не хотите пробовать это сами, вы можете нажать на этоdemoВы можете изменить код внутри, демо включает в себяСерия фильтра,параметр фильтра.
Рекомендую посмотреть Vueфильтрдокументации, вы узнаете об этом больше.
Список связанных с рендерингом
Модель привязки цикла v-for:
Ввод может быть связан вот так в v-for, держу пари, что многие люди не знают.
// 数据
data() {
return{
obj: {
ob: "OB",
koro1: "Koro1"
},
model: {
ob: "默认ob",
koro1: "默认koro1"
}
}
},
// html模板
<div v-for="(value,key) in obj">
<input type="text" v-model="model[key]">
</div>
// input就跟数据绑定在一起了，那两个默认数据也会在input中显示
Для этого я сделалdemo, вы можете нажать, чтобы попробовать.
v-for со значением
Если у нас есть повторяющийся HTML-шаблон для рендеринга и нет ассоциации данных, мы можем:
<div v-for="n in 5">
<span>这里会被渲染5次，渲染模板{{n}}</span>
</div>
Старайтесь не использовать v-if на том же узле, что и v-for:
v-for имеет более высокий приоритет, чем v-if, если они находятся на одном узле, то каждый цикл будет выполняться v-if один раз.
Если вы хотите, чтобы цикл основывался наПо данным каждого элемента судить стоит ли рендерить, значит вы все делаете правильно:
<li v-for="todo in todos" v-if="todo.type===1">
{{ todo }}
</li>
если вы хотитеДля определенных условий, чтобы пропустить цикл, но не связанных с каждым элементом данных для рендеринга, вы можете поместить v-if в родительский узел v-for:
// 根据elseData是否为true 来判断是否渲染，跟每个元素没有关系
<ul v-if="elseData">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
// 数组是否有数据 跟每个元素没有关系
<ul v-if="todos.length">
<li v-for="todo in todos">
{{ todo }}
</li>
</ul>
<p v-else>No todos left!</p>
Как и выше, правильное использование приоритетов v-for и v-if может существенно снизить производительность.
Отслеживание глубины и отслеживание немедленного запуска обратного вызова
Часы используют многие люди, но эти две опции в этих часахdeep,immediate, наверное, мало кто об этом знает.
Варианты: глубокий
указывается в параметре optionsdeep: true, вы можете прослушивать изменения свойств объекта.
Варианты: немедленно
Если указать в параметре options немедленно: true, обратный вызов будет запущен немедленно с текущим значением выражения, т. е. немедленно один раз.
watch: {
obj: {
handler(val, oldVal) {
console.log('属性发生变化触发这个回调',val, oldVal);
},
deep: true // 监听这个对象中的每一个属性变化
},
step: { // 属性
//watch
handler(val, oldVal) {
console.log("默认立即触发一次", val, oldVal);
},
immediate: true // 默认立即触发一次
},
},
Оба варианта можно использовать одновременно, плюс: да, есть еще одинdemo.
Также следует отметить следующий момент.
Не используйте функции стрелок в следующих случаях:
- Стрелочные функции не следует использовать для определения метода жизненного цикла.
- Вы не должны использовать функции стрелки для определения метода функций
- Вы не должны использовать функцию стрелки для определения функции атрибута вычисления.
- Стрелочные функции не следует использовать для свойств данных.
- Вы не должны использовать стрелочные функции для определения функций-наблюдателей.
Пример:
// 上面watch的栗子：
handler:(val, oldVal)=> { // 可以执行
console.log("默认触发一次", val, oldVal);
},
// method：
methods: {
plus: () => { // 可以执行
// do something
}
}
// 生命周期:
created:()=>{ // 可以执行
console.log('lala',this.obj)
},
Да, верно, все работает.
but:
Стрелочные функции привязаны к контексту родительской области,Это не будет указывать на экземпляр VUE, как и ожидалось.
Это тыВы не можете использовать это для доступа к методам данных и методов в вашем компоненте..
это будет указывать на undefined.
Маршрут ленивой загрузки пишет:
// 我所采用的方法，个人感觉比较简洁一些，少了一步引入赋值。
const router = new VueRouter({
routes: [
path: '/app',
component: () => import('./app'), // 引入组件
]
})
// Vue路由文档的写法:
const app = () => import('./app.vue') // 引入组件
const router = new VueRouter({
routes: [
{ path: '/app', component: app }
]
})
То, как написан документ, заключается в том, что проблема заключается в следующем: если у нас много маршрутов, должны ли мы вводить более десяти строк компонентов над маршрутом?
По сравнению со вторым методом, первый метод заключается в том, чтобы написать шаг введения присваивания непосредственно вcomponentВыше по сути то же самое. Любой путь возможен, вы вольны выбирать.
Маршрутизированная страница запуска проекта и страница 404
На самом деле это просто настройка:
export default new Router({
routes: [
{
path: '/', // 项目启动页
redirect:'/login' // 重定向到下方声明的路由
},
{
path: '*', // 404 页面
component: () => import('./notFind') // 或者使用component也可以的
},
]
})
Например, ваше доменное имя:www.baidu.com
Страница запуска проекта относится к: когда вы входитеwww.baidu.com, он автоматически перейдет на страницу входа в систему.
Страница 404 относится к следующему: когда вы входите на страницу маршрута без декларации/без соответствия, она переходит на страницу 404.
например, входwww.baidu.com/testRouter, он автоматически перейдет кnotFindстраница.
Если вы не объявляете страницу 404, введитеwww.baidu.com/testRouter, отображаемая страница пуста.
Артефакт отладки Vue: vue-devtools
Каждый раз, когда вы отлаживаете, пишите кучуconsoleЭто раздражает? хочуУзнавайте об изменениях данных в компонентах/Vuex быстрее?
Тогда этоособенно большое развитиеАртефакт отладки: vue-devtools, вам действительно нужно об этом знать.
Эта волна стабильной прибыли действительно может повысить эффективность разработки.
способ установки:
- Google store + научный Интернет, поиск vue-devtools для установки.
- Не научный онлайн?Ручная установка
после установки:
В инструментах разработчиков Chrome будет видеть столбец Vue, следующая информация в наших изменениях данных веб-приложения, а другие компоненты иерархии могут быстро иметь более точное понимание.
Несколько месяцев назад я написал аналогичный пост:
Несколько проблем в процессе практики Vue
Эпилог
Большая часть содержания этой статьи была объяснена в документации Vue.Рекомендуется прочитать больше о документации Vue, а не только учебники, но и API документации. Тогда есть два или три пункта, которые я хочу написать, потому что ожидается, что длина статьи будет больше, поэтому я планирую сохранить ее для будущих статей~
Если в статье есть какие-то неправильные места, прошу поощрить всех проходящих мимо! Я надеюсь, что вы сможете получить что-то после прочтения. Если вам это нравится, поторопитесь и нажмитеподпискаПодпишитесь/Нравится.
Друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.
Передовое расширенное накопление,Нет публики,GitHub, wx:OBkoro1, Электронная почта: obkoro1@foxmail.com
Выше 2018.6.3