vue项目技术小记

最近做的项目快要结尾了，本项目用前后端分离的，然后前端是用vue开发的，为什么选vue呢？一来公司要求效率要高些的，那就应该用到三大流行的框架之一，然后项目的内容不太复杂的，觉得用vue更合适的。二来正好应该要“炒熟”vue了哈。其中陷入了不少坑，一个一个爬过来的，总结下入坑的原因，另外会给出官方文档的对应内容，以便加深理解的。如有不足之处，请提出来哈～

• 异步加载组件

  • 我们都知道vue一般都是单页面的，也就意味着一开始就要加载全部的组件，这太不友好的，加载时间会慢些。这时候我们就用到异步组件～

  const Index=()=>import('@/page/Index');
  const Home=()=>import('@/page/Home');
  const router=new Router({
      routes:[
      {
          path:'/index',
          component:Index
      },
      {
          path:'/home',
          component:Home
      }
      ]
  })
  

  然后你会发现js被分开的，这就是所谓的异步加载～

  • 参考官方文档
    https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6

• 页面后退时，保持之前的状态，不刷新

  • 在app.vue文件中

  <keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
  

  • 在router.js中

  const router = new Router({
    routes: [
      {
        path: '/index',
        components:Index,
        meta:{
          keepAlive:false
        }
      },
      {
          path:'/goods',
          component:Goods,
          meta:{
            keepAlive:true
          }
      },
  }
  

  用meta中的keepAlive来判断需不需要缓存,keep-alive就是保存缓存的组件。

  • 参考官方文档
    https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%9C%A8%E5%8A%A8%E6%80%81%E7%BB%84%E4%BB%B6%E4%B8%8A%E4%BD%BF%E7%94%A8-keep-alive

• 在相同路由的情况下，再次点击导航栏上的本路由，再次刷新

  在vue中，路由地址相同的情况下，是不会再次刷新的，即使点击本路由的导航文字上。一开始我没想到解决的方案，后来寻求大佬商量，大佬说可以用事件传递的。然后他告诉我一句话的，

  vue.js一定不会阻碍传统方法实现的。

  这话说得我惭愧，我意识到我太依赖vue.js的框架，没拓展思维的。再次感谢大佬的点拔～

  • 对，是可以用事件传递来实现的。在主路由上绑定isFresh，判断需不需要刷新子路由，然后在子路由上绑定事件，传递到主路由的事件。主路由监听到事件的，就把isFresh变为false，以防下面还会需要到。不设置为false,下面的就不会刷新。看代码如下：
  • App.vue

  <router-view :isFresh="isFresh" @tempBtn="tempBtn"/>
  //data
  data(){
      return {
          isFresh:false,
      }
  }
  //事件函数
  tempbtn(){
      this.isFresh=false;
  }
  

  • Index.vue

  watch:{
      isFresh(){
          //console.log('ShopisFresh:'+this.isFresh);
          if(this.isFresh){
              Object.assign(this.$data,this.$options.data());
              this.fetchData();
          }
      }
  },
  //然后加载完后，还要绑定事件，传递到主路由的tempbtn事件
  this.$emit('tempbtn');
  

  嗯，在子路由上监听到isFresh为true，表示要刷新的，Object.assign是利用data的初始化数据覆盖，然后重新加载数据。

• checkbox整体点击

  UI设计师要求能点击checkbox的整体，包括checkbox后面的文字，不是只能点击checkbox的框，这可把我为难了，然后艰难的爬出坑了。

  <div class="group_item" @click="selfChecked = !selfChecked">
      <input type="checkbox" v-bind:checked="selfChecked">
      <label>点我呀</label>
      data(){
          return {
              tempChecked:null
          }
      },
      props:['checked'],
      watch:{
          checked(){
              this.tmpChecked=this.checked
          }
      },
      computed: {
          selfChecked: {
              get: function(val){
                  return this.tmpChecked;
              },
              set: function(newVal){
                  this.tmpChecked = newVal
                  this.$emit('input', newVal)
              }
          }
      },
  </div>
  

  然后在父组件上用v-model即可。用selfChecked来判断是不是要点击，至于为什么要watch，是判断checked为真还是假，比如说在父组件上，提交后，表单要清空的，这时候要监听到checked为假的，然后传递到selfChecked的值。这样就能清空checkbox。

  • 参考思路
    https://stackoverflow.com/questions/49646481/vuejs-trigger-checkbox-by-clicking-table-row

• setInterval的问题

  用了setInterval之后，切换路由的时候发现还在计时，不得了，真的会影响性能唉，就吓的赶紧啃官方文档，找到了～

  beforeDestroy(){
      clearInterval(this.interId);
  }
  

  beforeDestroy是毁路由之前的函数，就是说毁路由之前就清除setInterval

  • 参考vue的生命周期

• 在v-for循环中进行v-model数据绑定

  <div v-for="(item,index) in list">
      <textarea type="text" v-model="list[index]['content']"></textarea>
  </div>
  

下面说说和vue没关系的问题

• 上线时去掉console

  我们一般都会用console来打印，以便检查的，万一console写多了，上线时总不能打印出console吧，要注释掉，但太费时间吧，这时候webpack神器上场（本人用webpack3）

  • 在webpack.prod.config.js中

  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false,
        drop_debugger: true,
        drop_console: true
      }
    },
    sourceMap: config.build.productionSourceMap,
    parallel: true
  }),
  

  这prod是生产环境的，然后drop_console为true，是去掉console

• 兼容ie的问题

  部署到生产环境后，测试ie11时发现空白屏的，我慌了，不是说可以兼容到ie9吗？还是说没配置好的，然后google查，ie还没支持js新的api，比如promise，所以需要babel-polyfill来转换的。真是蛋疼的ie，还能怎么办呢？当然是加babel-polyfill插件的。

  npm install babel-polyfill --save
  //然后在webpack.base.config.js中引用这插件
  module.exports=require('babel-polyfill');
  module.export={
      ...
      entry:{
          app:['babel-polyfill','./src/main.js']
      }
  }
  

正在更新中...