vue小金库

vue图片懒加载

npm install vue-lazyload --save-dev

vue路由权限

参考链接

动态加载菜单和路由addRoute

用router.addRoute来动态添加路由、子路由
原现有路由

const routes = [
    {
        path: '/',
        name: 'Login',
        component: () => import(/* webpackChunkName: "about" */ '@/views/Login.vue')
    },
    {
        path: '/index',
        name: 'index',
        meta: { title: '首页', noCache: true },
        component: () => import(/* webpackChunkName: "about" */ '@/views/index.vue'),
        children:[]
        // children: [{
        //     path: '/test',
        //     name: 'test',
        //     component: () => import('../views/test.vue')
        // }
                // ]
    }
]

想要在index下动态添加子路由test，特别要注意添加的子路由的path一定要把父路由的路径也带上

const routeObj = {
    path: 'index/test', // 这里要把父路由的路径也带上
    name: 'test',
    meta: { title: '测试路由test', noCache: true },
    component: () =>
        import('../test/test.vue'),
}
this.$router.addRoute('index', routeObj)

为什么vue中data是一个函数

当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。你现在知道为什么vue组件的data必须是函数了吧。这都是因为js本身的特性带来的，跟vue本身设计无关

Vue中v-if和v-for的一起使用时的几种处理方式

在处于同一节点的时候，v-for 优先级比 v-if 高。这意味着 v-if 将分别重复运行于每个 v-for 循环中。即——先运行v-for 的循环，然后在每一个v-for 的循环中，再进行 v-if 的条件对比。所以，不推荐v-if和v-for同时使用。

一 嵌套式

<template v-for="(item, index) in list" :key="index">    
   <div v-if="item.isShow">{{item.title}}</div>
</template>

计算属性(推荐使用)

<template>
 <div>
    <div v-for="(user,index) in activeUsers" :key="user.name" >
        {{ user.name }} 
    </div>
</div>
</template>
<script>
export default {
  data () {
    return {
      users: [{name: 'aaa',isShow: true}, 
              {name: 'bbb',isShow: false}]
    };
  },
  computed: {//通过计算属性过滤掉列表中不需要显示的项目
    activeUsers: function () {
      return this.users.filter(function (user) {
        return user.isShow;//返回isShow=true的项，添加到activeUsers数组
      })
    }
  }
};
</script>

深入了解nextTick

使用场景
在进行获取数据后，需要对新视图进行下一步操作或者其他操作时，发现获取不到 DOM。
原理
1.异步说明

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

2.事件循环说明

简单来说，Vue在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

<template>
  <div>
    <h1 ref="nexttick">{{ msg }}</h1>
    <h1 @click="nexttick">点击事件</h1>
  </div>
</template>

<script>
import bus from "../utils/eventBus";
export default {
  data() {
    return {
      msg: "假的nexttick",
    };
  },
  methods: {
    nexttick: function () {
      this.msg = "真的nextTick";
      想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
      console.log(this.$refs.nexttick.textContent); 并不会得到'真的nextTick'
      解决方法:使用nextTick;如下:
      this.$nextTick(() => {
      这样可以，nextTick里面的代码会在DOM更新后执行
        console.log(this.$refs.nexttick.textContent);可以得到'真的nextTick'
      });
    },
  }
};
</script>