vue常用技巧

1.关于数据初始化

1.在created中去获取服务器数据

2.在mounted中操作虚拟dom（ref)，在这里面也常常去获取服务器数据。

两个的使用上：

以下来自：：https://blog.csdn.net/weixin_43925811/article/details/90712413

vue请求数据放在created好还是mounted里好
建议放在created里
created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

但是在获取数据，初始化数据的时候，如果有复杂逻辑会再调用method中的函数。所以常见的是在created中调用method方法去获取和处理数据。

3.获取服务端数据和页面渲染，我们有时候需要先获取数据后再渲染，使用v-if

2.路由生命周期（https://www.cnblogs.com/suni1024/p/12167698.html）

Vue-router 路由生命周期
Vue-router 路由生命周期也叫导航守卫

分3块：全局守卫、路由独立守卫、组件内守卫

1、全局守卫 main.js

router.beforeEach((to, from, next) => {
  // 全局前置守卫
  // if(to.fullPath === '/shoppingCart'){
  //   //如果没有登录?对不起先去登录一下
  //   next('/login')
  // }
  console.log('1 beforeEach', to, from)
  next()
})
// 时间触发比 全局前置守卫慢些
router.beforeResolve((to, from, next) => {
  // 全局解析守卫
  console.log('3 beforeResolve', to, from)
  next()
})

router.afterEach((to, from) => {
  // 全局后置守卫、钩子
  console.log('4 afterEach', to, from)

})

2、路由独立守卫 router.js

  {
    path: '/a',
    name: 'pageA',
    components:{
      default:pageA,
      ppp:Test
    },
    beforeEnter:(to,from,next)=>{
      console.log('2 beforeEnter',to,from)
      next()
    },
  },

3、组件内守卫 xxx.vue

export default {
  beforeRouteEnter(to,from,next){
    //这里 拿不到this
    // 路由跳转，使用此组件时触发
    console.log('beforeRouteEnter',to,from)
    next()
  },
  beforeRouteUpdate(to,from,next){
    //可以获取 this
    // /a/123 /a/456  当 组件被复用时，触发此方法
    console.log('beforeRouteUpdate',to,from)
    next()    
  },
  beforeRouteLeave(to,from,next){
    //可以获取this
    //路由跳转，不适用此组件时触发
    console.log('beforeRouteLeave',to,from)
    next()     
  }
}

3覆盖element的一些样式。

首先我们要了解一下vue scoped是什么，很多人非常喜欢用scoped，其实scoped也没有很神秘的，它就是基于PostCss的，加了一个作用局的概念。

//编译前

.example {
 
	color: red;
 
}
 
//编译后
 
.example[_v-f3f3eg9] {
 
	color: red;
 
}

它和我们传统的命名空间的方法避免css冲突没有什么本质性的区别。

现在我们来说说怎么覆盖element-ui样式。由于element-ui的样式我们是在全局引入的，所以你想在某个view里面覆盖它的样式就不能加scoped，但你又想只覆盖这个页面的element样式，你就可在它的父级加一个class，以用命名空间来解决问题。

.aritle-page{ //你的命名空间
 
	.el-tag { //element-ui 元素
 
	margin-right: 0px;
 
}
 
}

4. vue2.0无限滚动加载数据插件

做vue项目用到下拉滚动加载数据功能，由于选的UI库（element）没有这个组件，就用Vue-infinite-loading 这个插件代替，使用中遇到的一些问题及使用方法，总结作记录！

安装：npm install vue-infinite-loading –save

引入
ES6

import InfiniteLoading from 'vue-infinite-loading';

export default {
  components: {
    InfiniteLoading,
  },
};


CommonJS



const InfiniteLoading = require('vue-infinite-loading');

export default {
  components: {
    InfiniteLoading,
  },
};

1.用法一（基本用法）

Template

<div>
  <p v-for="item in list">
    Line:
    <span v-text="item"></span>
  </p>
  <!--infinite-loading这个组件要放在列表的底部，滚动的盒子里面！-->
  <infinite-loading @infinite="infiniteHandler"></infinite-loading>
</div>

Script

import InfiniteLoading from 'vue-infinite-loading';

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
      setTimeout(() => {
        const temp = [];
        for (let i = this.list.length + 1; i <= this.list.length + 20; i++) {
          temp.push(i);
        }
        this.list = this.list.concat(temp);
        $state.loaded();
      }, 1000);
    },
  },
  components: {
    InfiniteLoading,
  },
};

2.用法二（一般的分页数据）

Template

<div class="hacker-news-list">
  <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
  </ul>
  <infinite-loading @infinite="infiniteHandler">
    <span slot="no-more">
      There is no more Hacker News
    </span>
  </infinite-loading>
</div>

Script

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
    };
  },
  methods: {
    infiniteHandler($state) {
     const api="http://xxxx.com/xxx"
      axios.get(api, {   //api为你请求数据地址
        params: {
          page: this.list.length / 10 + 1,   //页码参数（10条每页）
        },
      }).then((response) => {
        if (response.data.length) {
          this.list = this.list.concat(response.data);  //response.data为你请求接口返回的数组列表
          $state.loaded();
          if (this.list.length / 10 === 10) {
            $state.complete(); //这里是加载了10页数据，设置不在加载
          }
        } else {
          $state.complete();
        }
      });
    },
  },
  components: {
    InfiniteLoading,
  },
};

$state:该组件会传递一个特殊的事件参数$state给事件处理器来改变加载状态，
$state参数包括三个方法，它们是loaded方法，complete方法和reset方法。

loaded方法用于在每次加载数据后停止播放动画，然后该组件将准备好进行下一次触发。
complete方法用于完成完整的无限加载，则该组件将不再处理任何滚动操作。如果在loaded调用complete方法时永远不会调用该方法，则此组件将显示用户的否结果消息，如果不是，则将显示不再有用户消息，并且可以按slot设其它内容
reset方法是将组件返回到原来的状态

3.用法三

一般的无限滚动下拉加载数据会带有筛选条件。比如根据不同条件选择出来的列表，或者改变某个状态重新渲染列表就要用这个用法了

Template

<div class="hacker-news-list">
  <div class="hacker-news-header">
     <!--下拉改变-->
    <select v-model="tag" @change="changeFilter()">
      <option value="story">Story</option>
    </select>
      <!--或者点击改变-->
    <button @click="changeFilter()">搜索</button>
  </div>

  <ul>
      <li class="hacker-news-item" v-for="(item, key) in list"></li>
   </ul>
  <infinite-loading @infinite="infiniteHandler" ref="infiniteLoading">  <!--不要忘记设置这个 ref="infiniteLoading"-->
    <span slot="no-more">
      There is no more Hacker News
    </span>
  </infinite-loading>
</div>

Script

import InfiniteLoading from 'vue-infinite-loading';
import axios from 'axios';

export default {
  data() {
    return {
      list: [],
      tag: 'story',
    };
  },
  methods: {
    infiniteHandler($state) {
      const api="http://xxxx.com/xxx"
      axios.get(api, {   //api为你请求数据地址
        params: {
          tags: this.tag,  //改变的条件参数
          page: this.list.length / 10 + 1,
        },
      }).then(({ data }) => {
        if (data.hits.length) {
          this.list = this.list.concat(data.hits);
          $state.loaded();
          if (this.list.length / 20 === 10) {
            $state.complete();
          }
        } else {
          $state.complete();
        }
      });
    },

    //改变条件条用此方法
    changeFilter() {
      this.list = [];
      this.$nextTick(() => {
        this.$refs.infiniteLoading.$emit('$InfiniteLoading:reset');
      });
    },
  },
  components: {
    InfiniteLoading,
  },
};

4.其他用法（特殊条件手动触发）

在大多数情况下，我们希望立即为空列表加载数据，这也是该组件的默认行为。如果你只想控制第一次加载，你可以简单地使用v-if和v-else指令来实现它,但是如果，在一些复杂的情况下，我们需要手动每三页加载一次数据，我们可以使用该方法，

这里我不做详细介绍。有这个需求的可以去看看官方文档：vue-infinite-loading

5.关于为什么不能直接调用mutation方法，而是必须得通过commit来提交mutation呢？很简单。官方文档说明的很好了：

1.再次强调，我们通过提交 mutation 的方式，而非直接改变 store.state.count，是因为我们想要更明确地追踪到状态的变化。这个简单的约定能够让你的意图更加明显，这样你在阅读代码的时候能更容易地解读应用内部的状态改变。此外，这样也让我们有机会去实现一些能记录每次状态改变，保存状态快照的调试工具。有了它，我们甚至可以实现如时间穿梭般的调试体验。2.直接修改state在严格模式下会报错

6.v-if指令和v-show指令的区别，display：none和visibility：hidden的区别

相同点：都可以控制标签的显隐。
不同点：
一、实现本质方法区别

v-if是动态的向DOM树内添加或者删除DOM元素
v-show本质是利用标签的display属性，通过visibility和none控制显隐
v-if="false"在DOM不能获取到该标签
v-show=false在DOM中仍能获取到该标签
二、编译的区别

v-show其实是在控制css
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁的重建内部的事件监听和子组件
三、编译的条件

v-show都会编译，初始值为false,只是将display设为none,但它也编译了
v-if初始值为false，就不会编译了
四、性能

v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点
display：none和visibility：hidden的区别
相同点：都是隐藏标签，对应的标签仍存在DOM结构中
不同点：
标签设置display: none后，不会占据该标签原来所在的位置，会触发重流。
标签设置visibility: hidden后，仍占据原来的位置，会触发重绘。
————————————————
版权声明：本文为CSDN博主「laumlin」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_39147099/article/details/85051540