vue的几个提效技巧

1.动态组件 <component :is='组件名'></component>

结合v-for循环使用

• 使用环境

  如图，这是一个v-for渲染的列表(只是目前这个版块才刚开始做，目前只有一个)，圆圈内的就是一个组件，也就是要v-for动态组件 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CgstVJ6d-1665390342414)(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/018edf494b164a3b806e550acf4879d8~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image)]

• 实际使用

一开始就是基本的组件引入了

import ColorIn from '@/components/Magic/ColorIn.vue'
import LineIn from "@/components/Magic/LineIn.vue";
import LineIn from "@/components/Magic/Header.vue";
import LineIn from "@/components/Magic/Footer.vue";

export default{
   
      components:{
   
        ColorIn,
        LineIn,
        Header,
        Footer
    }
}

接下来就是动态v-for动态组件的使用，componentList:['ColorIn','LineIn','Header','Footer']使用下面的代码即可将代码依次循环

<component v-for="(item,index) in componentList" :key="index" :is="item"></component>

编译以后的效果就是

<ColorIn></ColorIn>
<LineIn></LineIn>
<Header></Header>
<Footer></Footer>

2.watch进阶使用

立即执行

• 使用环境

例如场景为页面一进来就调用拉取列表数据getList()，然后监听路由的$route.query.id然后触发列表数据的更新

• 实际使用

为了让它一开始就执行，我们需要在created()生命周期中执行一次拉取数据的方法

watch:{
   
    '$route.query.id':{
   
        handle(){
   
            this.getList();
        },
    }
},
created(){
   
    this.getList();
},

但是使用immediate即可立即执行,改写以后的代码如下

watch:{
   
    '$route.query.id':{
   
        handle(){
   
          this.getList();
        },
        immediate:true
    }
},

深度监听

• 使用环境

在监听对象的时候，对象的内部属性发生变化watch无法监听到，这种时候就需要使用深度监听

• 实际使用

只需要设置deep:true即可开启深度监听

data(){