vue 提效的一些技巧

1.动态组件

---

结合v-for循环使用

<template>
 <div>
 	<component v-for="(item,index) in componentList" :key="index" :is="item"></component>
    // 编译以后的效果就是
    // 
	// 
	// 

	// 
 </div>
</template>

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
   },
   data () {
    return {
      componentList:['ColorIn','LineIn','Header','Footer']
    }
  },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

2.watch进阶使用

---

立即执行 ⇒ immediate

• 使用环境

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

• 实际使用

  为了进入界面就执行，需要在 created() 生命周期中，执行一次拉取数据的方法

watch:{
    '$route.query.id':{
        handler(){
            this.getList();
        },
    }
},
created(){
    this.getList();
}
1
2
3
4
5
6
7
8
9
10

使用 immediate 立即执行，可简化代码：

watch:{
    '$route.query.id':{
        handler(){
          this.getList();
        },
        immediate:true
    }
}
1
2
3
4
5
6
7
8

深度监听

• 使用环境

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

• 实际使用

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

data(){
    return{
        queryList:{
            count:0,
            name:''
        }
    }
},
watch:{
    queryList:{ 
        handler(newValue,oldValue){ 
        //do something 
        }, 
        deep:true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

3.mixins混入的使用

• 使用环境

  一般获取验证码，收藏，点赞等公用且逻辑一样(有些逻辑是根据页面的不同而不同的，不建议使用混入)等场景都可以使用混入

• 实际使用

  封装一个 vue 混入方法，引入后，混入中的所有 data, methods，以及生命周期都会共享，可以直接使用

//openWindow.js
export default {
  methods:{
    prompt(url){
      console.log('我是 mixins !')
    },
  }
}

// 其他页面引用
import promptMsg from "../../mixins/openWindow";

export default{
	// 使用 mixins
    mixins:[promptMsg ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

注意点(使用的页面统称为组件)

① 混入比组件优先执行

② 当混入与组件中的，属性或者方法名称相同时，以组件中的值为准(结合上一条规则，因为混入先执行，所以组件会将混入覆盖)

③ 比方说A页面和B页面都使用了同一个混入，A页面与B页面的状态同样是独立的

这里有一个注意点（使用 vuex 数据也是共享的，但是 vuex 数据会相互影响；mixins 数据不会相互影响 ）