一,$nextTick
◆Vue 是异步渲染(原理部分会详细讲解)
◆data改变之后, DOM不会立刻渲染
◆$nextTick 会在DOM渲染之后被触发,以获取最新DOM节点.
二,slot插槽
子组件
< template >
<div Class=" container">
<slot :slotData="msg" >
{{ msg}}
</ slot>
</div>
</ template>
<script>
export default{
data() {
return {
msg:"啦啦啦啦啦啦啦啦啦" ,
};
父组件
<ScopedSlot>
<template V-slot-"g"> <hr>{{slotata}}</h1> </template>
</ScopedS1ot>
三,动态组件
<div v-for="(val,key) in newsData" :key="key>
<component :is="val.type"/>
</div> newsData: {
1: {type:'text},
2: {type:' text '},
3: {type :image '
}
}
四,异步组件,异步路由
export default {
components: {
FormDemo: ()| => import('. ./BaseUse/FormDemo' )
},
data() {}
}五,keep-alive
◆缓存组件
◆频繁切换,不需要重复渲染
◆Vue 常见性能优化
六,mixin
◆多个组件有相同的逻辑,抽离出来 LDFDDD:
◆mixin 并不是完美的解决方案,会有一-些问题
◆Vue 3提出的Composition API旨在解决这些问题
import myMixin from ' . /mixin'
export default {
mixins: [myMixin],
} //可以添加多个,会自动合并起来
七,Vue-router路由配置懒加载
export default{
new VueRouter({
LDFDDD168
routes:[
{
path: '/',
component: () => import(
/* webpac kChunkName: "navigator" */
'./ . ./ components/Navigator'
)
},