vue小细节

1. 组件缓存 keep-aive  属性  exclude  

include - 字符串或正则表达式。只有名称匹配的组件会被缓存

exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。

max - 数字。最多可以缓存多少组件实例。

<keep-alive exclude="Detail"> 
      <router-view />
 </keep-alive>

2. es6加载路由组件

const Detail = () => import('../views/detail/Detail.vue');

3.避免路由跳转报错

//replace  避免报错
const VueRouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace(to) {
  return VueRouterReplace.call(this, to).catch(err => err)
}

//push 避免报错
const VueRouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(to) {
  return VueRouterPush.call(this, to).catch(err => err)
}

4.声明组件名 

1. 避免通俗语义化    例如:   <footer> 会被解析为标签    需要写成    <Footer />

 2. 定义一个子组件想引用vue实例中的data 属性，在做属性绑定的时候使用了驼峰，结果拿不到值，我这个使用的是线上的版本利用vue-devtools 发现props中的dataMsg为undefined，这个时候的改为datamsg就正确了

3.组件之间通信 , 传递对象属性的value值 , 需要用wacth来监听 props接收到的值 , 不然为undefined

5.组件点击   @click.native

<back-top @click.native="backClick" v-show="isBackShow"></back-top>

6.this.$refs获取子组件相关 , 改变子组件数据

<tab-control
      :titles="[{ title: '流行' }, { title: '精选' }, { title: '新款' }]"
      @itemClick="tabClick"
      ref="tabControl1"
      v-show="isFixed"
    ></tab-control>  //子组件
this.$refs.tabControl1.courrentIndex = index;  //改变子组件数据
this.$refs.tabControl1.$el.getBoundingClientRect()
        .top //获取子组件距离顶部高度

7.具名插槽 , 类名不要用 中划线  来间隔

 8.Vuex，每次调用mutation之后向localstorage存值，防止刷新丢失

9.vue.config.js  每次更改完之后需要重新启动项目

10.  用样式穿透来解决ui框架后引入导致样式覆盖问题  .home  >>> .children

 11.vue使用this.$refs.xx在mounted中获取DOM元素为undefined 

12.使用 @hook 即可监听组件生命周期，组件内无需做任何改变

<template>
    <List @hook:mounted="listenMounted" />
</template>

13.手动挂载组件

import vue from 'vue'
import Message from './Message.vue'

// 构造子类
let Messageconstructor = vue.extend(Message)
// 实例化组件
let messageInstance = new Messageconstructor()
// $mount可以传入选择器字符串，表示挂载到该选择器
// 如果不传入选择器，将渲染为文档之外的的元素，你可以想象成 document.createElement()在内存中生成dom
messageInstance.$mount()
// messageInstance.$el获取的是dom元素
document.body.appendChild(messageInstance.$el)

14.wacth高阶使用

　　14-1.在组件创建后 watch    属性immediate设置为true  能够立即执行  

export default {
    data() {
        return {
            name: 'Joe'
        }
    },
    watch: {
        name: {
            handler: 'sayName',
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

    14-2.在监听对象时，对象内部的属性被改变时无法触发 watch  , 设置属性deep为true ， 为其设置深度监听

export default {
    data: {
        studen: {
            name: 'Joe',
            skill: {
                run: {
                    speed: 'fast'
                }
            }
        }
    },
    watch: {
        studen: {
            handler: 'sayName',
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

　14-3  触发监听执行多个方法

export default {
    data: {
        name: 'Joe'
    },
    watch: {
        name: [
            'sayName1', //字符串形式
            function(newVal, oldVal) {  //函数形式　　
                this.sayName2()
            },
            {           //对象形式
                handler: 'sayName3',
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log('sayName1==>', this.name)
        },
        sayName2() {
            console.log('sayName2==>', this.name)
        },
        sayName3() {
            console.log('sayName3==>', this.name)
        }
    }
}

　　14-4  wacth监听多个变量

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”

export default {
    data() {
        return {
            msg1: 'apple',
            msg2: 'banana'
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log('msg1 is change')
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log('msg2 is change')
                }
            },
            deep: true
        }
    }
}

    14-4  注销 watch

        1.为什么要注销 ？

因为我们的组件是经常要被销毁的，比如我们跳一个路由，从一个页面跳到另外一个页面，那么原来的页面的 watch 其实就没用了，

这时候我们应该注销掉原来页面的 watch 的，不然的话可能会导致内置溢出。好在我们平时 watch 都是写在组件的选项中的，他会随着组件的销毁而销毁。

        2.什么情况下需要注销？

　　如果我们使用下面这样的方式写 watch，那么就要手动注销了，这种注销其实也很简单

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

        3.如何注销？

const unWatch = app.$watch('text', (newVal, oldVal) => {
  console.log(`${newVal} : ${oldVal}`);
})

unWatch(); // 手动注销watch

  app.$watch调用后会返回一个值，就是unWatch方法，你要注销 watch 只要调用unWatch方法就可以了。

 

15.函数式组件: 

一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。

创建函数式组件也很简单，只需要在模板添加 functional 声明即可

子组件

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

父组件

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from '@/components/List.vue'
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title: 'title',
                content: 'content'
            }],
            currentItem: ''
        }
    }
}

16.路由参数解耦

将路由的 props 属性设置为 true 后，组件内可通过 props 接收到 params 参数

const router = new vueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: true
    }]
})

另外还可以通过函数模式来返回 props

const router = new vueRouter({
    routes: [{
        path: '/user/:id',
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

 

可通过 props 接收参数

export default {
    props: ['id'],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

 

16.params传参问题　　　

params传参时，如果没有在路由中定义参数，也是可以传过去的，同时也能接收到，但是一旦刷新页面，这个参数就不存在了。

这对于需要依赖参数进行某些操作的行为是行不通的.

// 定义的路由中，只定义一个id参数
{
    path: 'detail/:id',
    name: 'Detail',
    components: Detail
}

// template中的路由传参，
// 传了一个id参数和一个token参数
// id是在路由中已经定义的参数，而token没有定义
<router-link :to="{name: 'Detail', params: { id: 1, token: '123456' }}">前往Detail页面</router-link>

// 在详情页接收
created () {
    // 以下都可以正常获取到
    // 但是页面刷新后，id依然可以获取，而token此时就不存在了
    const id = this.$route.params.id;
    const token = this.$route.params.token;
}

 

17.定时器问题

通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器

const timer = setInterval(() =>{
    // 某些定时器操作
}, 500);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})

 

 18.props验证

props: {
  status: {
    type: String, //数据类型
    required: true, //是否验证
    validator: function (value) { //验证函数
      return [   //验证结果
        'success',
        'error',
      ].indexOf(value) !== -1
    }
  }
}

 

 19.路由组件复用

在开发当中，有时候我们不同的路由复用同一个组件，默认情况下，我们切换组件，Vue出于性能考虑可能不会重复渲染。

但是我们可以通过给router-view绑定一个key属性来进行切换的时候路由重复渲染。

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

20批量属性继承

使用$props将父组件的所有的props传递到子组件

场景 :    从父组件接收传递下来的数据使用props接收，再将这些props数据传递到子组件

<template>
    <!-- 将从父组件接收到的props数据传递到子组件
        使用v-bind="$props" 批量传递
    -->
    <childComponent
        v-bind="$props"
    />
</template>
<script>
export default {
    // 从父组件接收到的props数据
    props: ['value1','value2','value3','value4','value5'],
    data() {
        return {....}
    .....
    }
}

// childComponent.vue
<script>
export default {
    props: ['value1','value2','value3','value4','value5'],
    data() {
        return {....}
    .....
    },
    mounted() {
        // 子组件可以接收到数据
        console.log(this.value1)
        console.log(this.value2)
        console.log(this.value3)
        console.log(this.value4)
        console.log(this.value5)
    }
}
</scrript>

属性继承在开发表单组件时，使用$props就可以很好的解决批量属性传递问题。

 

21.组件懒加载(异步加载组件)

1.为什么要用

  所有的组件代码都会在首次渲染是下载 , 体验不佳

2.什么场景用

比如后台管理页面，在多个tab之间切换的时候，其余tab里面的组件就可以在需要的时候再异步加载~

有多个子路由的页面必用

3.如何用?

components: { test: () => import("./Test.vue") },

给加载js命名

 components: {
    test: () => import(/* webpackChunkName:'test' */ "./Test.vue"),  //给加载js命名
  },

处理加载状态的写法  

异步组件工程函数
const AsyncTest = () => ({
  component: import(/* webpackChunkName:'test' */ "./Test.vue"),
  loading: LoadingComponent, //加载时显示的组件
  error: ErrorComponent, //超时或错误时显示的组件
  delay: 200, //延迟
  timeout: 3000, //超时
});

 

22.解决async/await异步问题

 使用  await 1; 解决异步

例子: 

async created(){
                try {  //捕获await错误信息 
                   this.couponArr = await this.getData({form_id:11,pageSize:9}).then(res=>{
                    if(res.length>8){
                        res.pop();
                        this.couponBtn=true;
                        return res;
                    }
                    return res;
                    });
                    this.storeArr1[this.currentIndex]= await this.getData({form_id:8,position_ename:'nav1-1',pageSize:4});
                    this.currentArr =  this.storeArr1[this.currentIndex];
                    this.storeArr2 = await this.getData({form_id:18,pageSize:5}).then(res=>{
                        if(res.length>4){
                            res.pop();
                            this.bandanBtn=true;
                            return res;
                        }
                        return res;
                    });
                    this.storeArr3 = await this.getData({form_id:8,position_ename:'nav3'});
                } catch (e) {
                    console.log(e)
                }
                
                await 1; //解决异步
                this.gundong()
                this.navFixed({
                    navParent: '.nav_box',
                    nav: '.nav',
                    navItem: '.nav li',
                    itemParent: '.tit',
                    active: 'active',
                    fixedTop: '0',
                    deviation: parseFloat($('.nav').height()),
                    animateTime: 500,
                    flag: 0
                })
                this.tab()
                this.xuanran();
                this.videoHandle();
                this.gtOrltVisible()
                this.swiperHandle()
                this.staticImg()
            },

23.滚动节流

 passive: 是告诉浏览器，监听器不会调用e.preventDefault()函数，不用来检查，可以提前生成手势，从而提高流畅性，通常用在move事件中

例子: 

<template>
  <div class="scroll">
    <div class="containers" @scroll.passive="scrollHandle">
      <div class="content">
        <ul>
          <li v-for="item in 100">{{ item }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Scroll",
  components: {},
  data() {
    return {
      scrollHandle: () => {},
    };
  },
  created() {
    this.scrollHandle = this.throttle(this.scrollHandle2, 200);
  },
  methods: {
    scrollHandle2(e) {
      console.log(456);
    },
    throttle(func, delay = 800) {
      let lock = false;
      return (...args) => {
        if (lock) {
          return;
        }
        func(...args);
        lock = true;
        setTimeout(() => {
          lock = false;
        }, delay);
      };
    },
  },
};
</script>

<style scoped >
.containers {
  height: 500px;
  border: 1px solid #000;
  overflow: scroll;
}
</style>

 24.$destroy()方法问题

某种业务场景下，我们期望缓存的页面可以被销毁，就会调用$destroy方法，这回导致被销毁的页面，虽然会触发activated钩子函数，但是页面实际上没有被缓存，重新进入是初始dom结构的状态。

 24.数据更新，update()/beforeUpdate()未触发问题

页面使用到的数据改变时才会更新 updated 和 beforedate钩子函数

 24.vue-router中params传值问题

1.path定义了动态传值 ， 则params为必传项 ， 否则router-view不显示

router/index.js
  {
      path: '/park1/:id',   
      name: 'park1',
      component: () => import( /* webpackChunkName: "about" */ '../views/park1.vue')
    }


.vue文件

<router-link 

     :to="{ path: '/park1', params: { id: 1 } }"

>park1</router-link>

或者  路径拼接  :to="'/park1/'+1"

1.如果是用name来匹配路由

相当于post请求，参数不会再地址栏中显示。

存在页面刷新， params返回参数会丢失 ， query并不会出现这种情况

拓展：解决用name来匹配路由页面，刷新params丢失问题

1.使用query传递数据

2.将数据在前一页存到 localstoratgel里

存数据

router.beforeEach((to, from, next) => {
  //通过该方式可以保存 VueRouter 的数据不被刷新
  localStorage.setItem('routerParams', JSON.stringify(to.params));
  next()
})

取数据

created() {  //如果是被keep-alive 标签包裹 ， 可以在activated 钩子函数中获取参数

this.params = JSON.parse(localStorage.getItem("routerParams"));
 },

25.props规范

数组形式来接收数据 ,开发时的工作量会小一些 , 但不推荐 , 不利于后续维护项目

props:['name','type','list']

建议使用对象形式 , 

props:{
　　name: String, //字符串类型
　　type: {
    　　validator: function(value) {//这个值必须匹配下列字符串中的一个
    　　　　return ["success","warning","danger"].includes(value);

　　　　}

　　},

　　list: {
　　　　type: Array,
　　　　//对象或数出默认值必须从一个工厂函数获取
　　　　default: O)→>[]
　　},

}

26. v-for循环时 , 可以直接通过传入对象直接更改 , 不用传下标然后找到数组中对应对象 , 再进行修改

例子:

<template>
  <div>
    <ul>
      <li v-for="item in data" :key="item.id">
        <button @click="add(1, item)">+</button>
        <span>{{ item.num }}</span>
        <button @click="add(-1, item)" v-if="item.num > 0">-</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      data: [
        {
          num: 0,
          id: 0,
        },
        {
          num: 100,
          id: 2,
        },
        {
          num: 99,
          id: 3,
        },
      ],
    };
  },
  components: { list },
  created() {},
  mounted() {},
  methods: {
    add(num, v) {  //直接对传入的数组对象进行修改 , data数组中的对象的value值也会修改 
      v.num += num;
    },
  },
  watch: {},
  computed: {},
};
</script>

<style scoped lang="less">
</style>

27. computed中不要使用箭头函数

 

28. 更新组件

更新组件上传入的key即可，用 new Date().getTime()

 <a-popover  placement="bottomRight"  :key='showPopoverKey'>
 data() {
    return {
       showPopoverKey:new Date().getTime(),
    }
  },
 methods: { 
    clickUpdate(){ //点击更新组件
        this.showPopoverKey:new Date().getTime()
    }
 }

29. data赋值

已antd vue为例：

this.form.validateFields((errroe, values) => {
        if (!errroe) {
          Object.assign(this, values);
        }
      });

30. 重置路由

解决vue-router中的缓存问题

// 替换现有router的routes
router.matcher = new VueRouter({
  routes: newRoutes
}).matcher

31. 根组件绑定bus

//根组件绑定

new Vue({
  render: h => h(App),
  data() {
    return {
      bus: new Vue()
    }
  },
  router,
  store
}).$mount('#app')

//使用
//A组件订阅
this.$root.bus.$on('fromUpdate', () => {
      this.getTableList()
    })
//B组件发布
this.$root.bus.$emit('fromUpdate')

32. filters中获取this

<template>
  <div>{{a|sum(that)}}</div>
</template>
 
<script>
  export default {
    name: "test",
    data() {
      return {
        that: this,
        a: 1,
        b: 2
      }
    },
    filters: {
      sum(a, that) {
        console.log(that);
        return a + that.b;
      }
    },
  }

33.解决$on多次被调用

this.$baseEventBus.$off('setColor')
this.$baseEventBus.$on('setColor', colorObj => { 
    console.log(colorObj )
})

 

34.解决重置data 

直接赋值：   this.$data = this.$options.data()  

报错：Avoid replacing instance root $data. Use nested data properties instead

原因：如果你的vue实例的data方法里通过this引用了其他vue实例上的方法/属性等，需要改成下面这样，修复this指向问题导致的报错。

 解决方案

Object.assign(this.$data, this.$options.data.call(this));

35.点击按钮选择文件

             <input
                type="file"
                ref="inputFile"
                accept=".xls,.xlsx,.txt"
                @change="readFile($event)"
                style="display: none"
              />

               <a-button type="primary" @click="clickInput"> 导入字段描述 </a-button>

 

 methods: {

    clickInput() {

      this.$refs.inputFile.dispatchEvent(new MouseEvent('click'))

    },

  }

36.jsx绑定点击事件并传参

jsx写法示例

 <span class="yuan" onClick={() => this.connectRight(row)}></span>

37.watch 只监听一次

 mounted() {
    const unwatch = this.$watch("needWatch", function (val) {
      // 处理业务逻辑
      // 之后调用unwatch, 取消监听
      unwatch();
    });
  },

38.route参数更新

直接修改 $route.query.id = 111, 页面 url 未更新，

 

 

 

 

 

 

...