vue 的几个提效技巧

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    }}

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

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

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

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

data(){    return{        queryList:{            count:0,            name:'',        }    }},watch:{    queryList:{         handle(newValue,oldValue){         //do something         },         deep:true    }},

data(){    return{        firstName:'',        lastName:'',    }},computed:{    fullName:{        get(){            return `${this.firstName} ${this.lastName}`;        },        set(newValue){            let names=newValue.split(' ');            this.firstName=names[0];            this.lastName=names[1];        }    }},

mounted () {    window.addEventListener('resize', this.resizeHandler);},beforeDestroy () {    window.removeEventListener('resize', this.resizeHandler);}

mounted () {  window.addEventListener('resize', this.resizeHandler);  this.$on("hook:beforeDestroy", () => {    window.removeEventListener('resize', this.resizeHandler);  })}

<child @hook:mounted="listenChildMounted" />

<span v-pre>{{message}}</span>    //就算data里面定义了message，渲染完也是{{message}}

<span v-once>{{message}}</span>    //message的值会编译后渲染，但是编译以后再次修改message的值不会触发更新

this.$set(arr,index,item);

this.$forceUpdate();

export const router = new Router({  base:'/baidu/',}

module.exports = {    build:{        assetsPublicPath: '/baidu/',    }}

router.beforeEach((to, from, next) => {  //一定要调用next()才能到下一个页面  if (path === '/login') {    next()  }else{    if(token){      next();    }else{      next('/login');    }    }})

beforeRouteUpdate(to, from, next) {    // 在当前路由改变，但是该组件被复用时调用    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。    // 可以访问组件实例 `this`  },

<router-view :key="$route.fullpath"></router-view>

watch:{   '$route':{       hander(){           // do something...       },       immediate:true   //如果要首次加载就触发   }}

this.$emit('uploadSuccess',res);

<Up @uploadSuccess="uploadLogoImage(index,arguments)"  />

uploadLogoImage(){        console.log(arguments[0]);          //index        console.log(arguments[1][0]);      //res},

>>>.el-dialog .el-dialog__body{  padding 0  text-align center  border-radius 0 0 4px 4px}/deep/.el-dialog .el-dialog__body{  padding 0  text-align center  border-radius 0 0 4px 4px}

getList().then(res=>{    this.list=Object.freeze(res.data.result);})

this.$emit('uploadSuccess',res);

<Up @uploadSuccess="uploadLogoImage(index,arguments)"  />

uploadLogoImage(){   console.log(arguments[0]);          //index   console.log(arguments[1][0]);      //res},

//openWindow.jsexport default {  methods:{    openUrl(url){      const link= this.$router.resolve({path: url});      window.open(link.href,'_blank');    },  }}
//其他页面使用import openWindow from "../../mixins/openWindow";
export default{    mixins:[openWindow],}

//安装依赖npm install qs --save
//页面中或者直接api.js中直接序列化使用import qs from 'qs'qs.stringify(params)
//axios拦截器中直接使用import qs from 'qs'axios.interceptors.request.use(  config => {    if (config.method === 'get') {      config.data = qs.stringify(config.data)    })