首先我们会想着在mounted或者created里面加入想要执行的方法，但是有的时候会遇到在你执行这个方法的时候，页面还并没有被渲染完成，所以就会出现这个方法在匹配页面标签报错的情况。
 
解决思路：
 
1.通过子页面调用父页面的方法，因为在子页面开始渲染的时候，你的父页面肯定是已经渲染好了的，前提这里的方法中是去找寻父页面的标签。
 
2.直接在本页面监视一个参数，发现参数被初始化了，说明页面也已经加载完成，因为你的页面用到了这个参数。
 
 
 
方法1案例：tab页里的子页面如果没有内容就隐藏
 
父页面代码
 
<el-tabs v-model="initTab" type="card">
  <el-tab-pane label="1信息" name="tab1">
    1
  </el-tab-pane>
  <el-tab-pane label="2报告" name="tab2">
    2
  </el-tab-pane>
  <el-tab-pane label="3信息" name="tab3">
    3
  </el-tab-pane>
  <el-tab-pane label="4信息" name="tab4">
    <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
    </ziyemian-group>

  </el-tab-pane>
  <el-tab-pane label="5信息" name="tab5">
    5
  </el-tab-pane>
  <el-tab-pane label="其它信息" name="tab6">
    6
  </el-tab-pane>
</el-tabs>

import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
  ZiyemianGroup
},
data () {
    return {
        detailInfo: {}，
        initTab：‘tab1’
    }
}
methods: {
  tabShow: (data) => {
    document.getElementsByClassName('el-tabs__item').item(4).style.display = data
  },
}
 
然后是ZiyemianGroup.vue的代码，这里主要就是方法调用，页面自己搞定
 
data () {
  return {
    list: []
  }
},
mounted () {
  this.init()
},
methods: {
  init() {
    if (list.length > 0) {
        this.$emit('tabShow', 'inline')
    } else {
        this.$emit('tabShow', 'none')
    }
  )
}
 
list是子页面的内容，这样如果子页面没有内容就可以隐藏掉了
 
 
 
方法2案例：我这边需要tab页隐藏
 
<el-tabs v-model="initTab" type="card">
  <el-tab-pane label="1信息" name="tab1">
    1
  </el-tab-pane>
  <el-tab-pane label="2报告" name="tab2">
    2
  </el-tab-pane>
  <el-tab-pane label="3信息" name="tab3">
    3
  </el-tab-pane>
  <el-tab-pane label="4信息" name="tab4">
    <ziyemian-group title="4信息" v-if="detailInfo">
    </ziyemian-group>

  </el-tab-pane>
  <el-tab-pane label="5信息" name="tab5">
    5
  </el-tab-pane>
  <el-tab-pane label="其它信息" name="tab6">
    6
  </el-tab-pane>
</el-tabs>

import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
  ZiyemianGroup
},
data () {
    return {
        detailInfo: {}，
        initTab：‘tab1’
    }
}
watch: {
  detailInfo: function () {
    this.$nextTick(function () {
      this.tabShow()
    })
  }
},
methods: {
    tabShow () {
        document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隐藏tab6
    }
}
 
nextTick方法，意思是在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。
 
隐藏tab的方法我用了原生js，因为vue生成后的页面和写的vue页面有所差别，所以我直接用了最笨的方法进行匹配。

 
在Vue脚手架项目中，所有以import方式导入的组件的html+css+js等都会编译到app.js文件中----所以这个文件会很大，但是这个文件必然在首屏加载的时候下载。 这就导致了首屏加载慢!
 
解决的方法：1.异步延迟加载 
 
先看非异步延迟加载，index.js文件中
 

  
import  About from '../components/About.vue';
//一旦这样写，后续项目打包结束将会直接打包到app.js文件中

const routes = [
   {
     path: '/about',
     component: About      //引入组件     
   }
]
 
 
正确的懒加载方法
 

  
//第一步注释import导入的文件
//import  About from '../components/About.vue';


//第二步将引入组件的方式以箭头函数的方式异步引入
const routes = [
   {
     path: '/about'，
     component: () => import( /* webpackChunkName: 'about' */ '../components/About.vue' )
   }
]

注意：import中  /* webpackChunkName: 'about' */ 这个注释必须有，这个为将来打包命名


结果：最后打包工具打包不会将 About.vue组件中的内容打包进app.js中，
      它会单独打包成一个新的about.js文件，并在页面加载完成后异步加载，从而达到懒加载效果
 
 
缺点就是，如果客户不想看About页面，但是还是会下载数据，导致----偷跑流量
 
解决的方法：2.彻底懒加载，这个方法只有当客户访问About页面时，才开始下载数据
 
彻底懒加载：需要自己在vue脚手架项目根目录下配置文件
 

  
 第一步： 这种方式基于异步延迟加载方式上，也就是先实现异步延迟加载后

 第二步： 跟目录创建文件： vue.config.js    
  
 第三步： 文件添加以下代码：
 
             module.exports={
  			chainWebpack:config=>{
    				config.plugins.delete("prefetch") //取消预加载
  			}
		}
 
 
 
总结： 异步延迟加载，容易偷跑流量，对于PC端来说影响不大，适用于PC端
 
 彻底懒加载，基于异步延迟加载，多了一步配置文件，不会偷包流量，适用于移动端

created：
 
 
 
在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
 
 
methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        created(){
            //自动加载indexs方法
            this.indexs();
        }
 
mounted：
 
 
 
在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。
 
 
methods: {
            indexs:function(){
                this.$http.post('{:url("Index/fun")}')
                    .then(function(res){
                        this.items=res.data;
                        console.log(res.data);
                    })
                    .catch(function(error){
                        console.log(error);
                    });
            }
        },
        mounted(){
            //自动加载indexs方法
            this.indexs();
        }

jQuery中可以这样写




vue中，如果要达到相同效果，可以使用vue的生命周期函数，如create或者mounted




附上vue.js的生命周期函数执行流程