vue高级API用法

636 阅读1分钟

一,$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' ) },