Давно не писал статьи.Последний раз писал наверное несколько лет назад.Может обленился. В последнее время смотрю ямы и ищу ямы.Мне немного скучно, когда я без дела, поэтому я просто хочу прочитать статью и скоротать время...
Ленивая загрузка маршрутов, которая может заставить вас загружаться быстрее в первый раз, как вы можете забыть?
Отложенная загрузка маршрутизации позволяет нашему пакету загружать только компоненты маршрутизации текущей страницы, не загружая все страницы одновременно.
Например 🌰, если так прописано, то при загрузке все будет.
const router = new VueRouter({
routes:[
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
})
Поэтому следует избегать описанного выше метода записи и максимально использовать ленивую загрузку.
Метод записи с ленивой загрузкой в сочетании с импортом веб-пакета
const router = new VueRouter({
routes:[
{
path: '/',
name: 'Home',
component: () => import(/* webpackChunkName: "home" */ '../views/Home.vue')
},
{
path: '/about',
name: 'About',
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
}
]
})
Вы помните, что был метод под названием Object.freeze?
Все учащиеся должны знать, что при инициализации Vue данные в данных будут преобразованы в адаптивные данные. Однако, когда мы пишем бизнес-логику, некоторые данные никогда не изменятся после их инициализации, их вообще не нужно делать отзывчивыми данными с помощью vue, поэтому мы должны заморозить данные, которые не нужно изменять, через Object.freeze Избегайте выполнения некоторых бесполезных операций при инициализации Vue.
🌰
export default {
data:()=>({
list:Object.freeze([{title:'我永远不需要改变，我不需要响应式'}])
})
}
Асинхронные компоненты настолько сильны, вы никогда не использовали их?
Асинхронные компоненты позволяют нам загружать некоторые компоненты, когда они нам нужны, вместо того, чтобы загружать их сразу после их инициализации, что является концепцией ленивой загрузки маршрутов.
🌰
export default {
components:{
AsyncComponent:()=>import(/* webpackChunkName: "AsyncComponent" */ './Async')
}
}
Загружаемый в первый раз пакет не содержит модифицированного кода компонента
Когда щелчок вызывает определенное поведение, представленный пакет выглядит следующим образом.
Существует также более полный способ написания асинхронных компонентов.
🌰
export default {
components:{
AsyncComponent:()=>({
component:import(/* webpackChunkName: "AsyncComponent" */ './Async'),
delay:200, // 延迟几毫秒，默认200
timeout:3000, // 加载几毫米之后就超时，触发error组件
loading:LoadingComponent, // 组件未加载回来前显示
error:ErrorComponent // 组件超时时显示
})
}
}
Вы все еще используете это в вычислении?
Я предполагаю, что есть много студентов, которые используют this.xxx в вычисляемом свойстве, чтобы получить данные в данных и методы в методах, и, возможно, получить состояние vuex, и зафиксировать, и т. д. через this.$store, и даже, все равно Данные в маршруте будут получены через this.$route. На самом деле, мы можем избежать этого уродливого this, и это может даже привести к невидимым проблемам с производительностью. С точки зрения реализации, данные, к которым мы можем получить доступ через это, могут быть структурированы по первому параметру вычисляемого.
🌰
export default {
haha({$attrs,$route,$store,$listeners,$ref}){
// 还能结构很多属性，可自行打印康康
return
}
}
Как избежать совместного использования v-if и v-for?
Почему бы не использовать и v-if, и v-for для одного и того же элемента? Поскольку в исходном коде Vue есть фрагмент кода для управления приоритетом инструкций, этот код сначала обрабатывает v-for, а затем v-if. Поэтому, если мы используем две инструкции вместе в одном слое, возникнут некоторые ненужные проблемы с производительностью. Например, в этом списке сотня данных, и в некоторых случаях их не нужно отображать. это 100 Данные показывают, а потом судить v-если, следовательно, мы должны избегать этой ситуации.
плохо 🌰
<h3 v-if="status" v-for="item in 100" :key="item">{{item}}</h3>
хорошо 🌰
<template v-if="status" >
<h3 v-for="item in 100" :key="item">{{item}}</h3>
</template>
Так почему бы вам не использовать сильный модификатор .sync?
Если вы хотите контролировать отображение и скрытие дочернего компонента в родительском компоненте, вы все еще передаете свойство и пользовательский метод, что будет очень проблематично, поэтому попробуйте модификатор синхронизации.
🌰
// 父组件
template>
<div>
<Toggle :show.sync = 'show'></Toggle>
</div>
</template>
//Toggle 组件
<template>
<div>
<div v-if="show">
展示和隐藏组件
</div>
<button @click="test">隐藏组件</button>
</div>
</template>
<script>
export default {
props:['show'],
methods: {
test(){
this.$emit('update:show',false)
}
}
}
</script>
$attr и $listeners позволяют инкапсулировать компоненты, как утка!
Возможно, многие студенты не используют $attr и $listeners, поскольку они позволяют повторно инкапсулировать компоненты некоторых библиотек компонентов, которые очень просты в использовании.
Кратко опишите два из них:
$attr: если компонент передает не только свойства, требуемые prop, но и другие свойства, отличные от prop, то эти свойства будут собраны в $attr.
$listeners: если компонент передает пользовательское событие, но дочерний компонент не срабатывает через emit, то эти пользовательские методы будут собраны в $listeners.
Вот простая вторичная инкапсуляция компонента Table в ElementUI 🌰
<el-table
v-bind="$attrs"
v-on="$listeners">
<template v-for="item in column">
<el-table-column v-bind="item" />
</template>
</el-table>
<script>
export default {
props:{
column:{
type:Array,
required:true
}
}
}
<script>
v-model тоже имеет такой приятный модификатор!
В v-model есть 3 простых в использовании модификатора, я не знаю, использовали ли вы их, один ленивый, один числовой и один отделочный.
ленивый: может превращать события @input в события @blur
номер: можно вводить только числовые значения
отделка: очистить пространство с обеих сторон
🌰
//lazy
<input v-model.lazy="msg" />
//number
<input v-model.number="msg" />
//trim
<input v-model.trim="msg" />
Знаете ли вы, что v-model также может настраивать свойства?
Если вы хотите использовать v-модель в пользовательском компоненте ввода, вам необходимо ввести значение в подкомпонент и вызвать событие ввода.Синтаксический сахар по умолчанию для v-модели представляет собой комбинацию этих двух вещей.
🌰
// 父组件
<template>
<div>
<CustomInput v-model='msg' />
</div>
</template>
//CustomInput
<template>
<div>
<input type="text" :value="value" @input="test">
</div>
</template>
<script>
export default {
props:['value'],
methods: {
test(e){
this.$emit('input',e.target.value)
}
},
}
</script>
Однако, что если компонент не вход, а чекбокс или радио, я не хочу получать значение и событие ввода, я хочу получить более семантическое событие проверки и изменения, что мне делать?
🌰
// 父组件不需改变
...
//CustomInput
<template>
<div>
<input type="checkbox" :checked="checked" @change="test">
</div>
</template>
<script>
props:['checked'],
model:{
props:'checked',
event:'change'
},
methods: {
test(e){
this.$emit('change',e.target.checked)
}
}
}
</script>
Вы все еще прокручиваете свою страницу с помощью scrollTop вашего браузера?
Иногда мы управляем поведением прокрутки страницы, тогда мы впервые подумаем о scrollTop. На самом деле у нас есть второй вариант — хук scrollBehavior, предоставляемый VueRouter.
🌰
const router = new VueRouter({
routes:[...] ,
scrollBehavior(to,from,position){
// position参数可自行打印康康，点击浏览器左右箭头会触发
return{
// 这里可以返回很多参数，下面简单列就几个，详情自己康康官网
x:100,
y:100,
selector:#app,
offset:200,
//等等
}
}
})
Собственное событие, которое вы определяете для дочернего компонента, не вступает в силу?
Иногда мы хотим прослушать какие-то события в дочернем компоненте, например щелчок, но что бы вы ни щелкнули, он не отвечает, почему?
🌰
<template>
<div>
<Child @click="test"></Child>
</div>
</template>
<script>
methods:{
test(){}
}
</script>
Потому что при таком написании vue будет думать, что вы настроили событие щелчка, которое должно быть вызвано $emit('click') в дочернем компоненте. Что, если я просто хочу запустить его в родительском компоненте? Затем используйте собственный модификатор.
🌰
<template>
<div>
<Child @click.native="test"></Child>
</div>
</template>
<script>
methods:{
test(){}
}
</script>
Используйте keep-alive для кэширования статуса вашей страницы!
Keep-alive может помочь нам предотвратить уничтожение предыдущего компонента при переключении компонентов.Он чаще используется в фоновой системе управления.
🌰
<keep-alive>
<router-view></router-view>
</keep-alive>