Vue页面加载完毕后，如何自动执行自定义函数？

本文共计632个文字，预计阅读时间需要3分钟。

目录 + 页面加载完成后自动加载自定义函数 + created + mounted Vue 生命周期函数 + 页面加载完成后自动加载自定义函数 + created + 在模板渲染成 前调用，即常用于初始化某些属性值，然后重新渲染视图

目录

• 页面加载完成后自动加载自定义函数
• created
• mounted
• vue之自执行函数

页面加载完成后自动加载自定义函数

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();         }

vue之自执行函数

总是纠结在写不写随笔之间，自我感觉很菜，但是对源码爱得深沉，就写给自己看吧。

我在网上看了很多人写的源码，按照依赖的方式一个一个找包，再找函数，我觉得太麻烦，复杂。所以直接看vue.js。

打开vue.js，是个自执行函数，也就是IIFE。

(function(global,factory){     typeof exports === 'object' && typeof module !== 'undefined'          ? module.exports = factory         : typeof define === 'function' && define.amd              ? define(factory)             : (global.Vue = factory()) })(this,function(){     'use strict' })

自执行函数想必不用我多说了，让我们来分析下这种插件与框架的写法。

它的参数为global和factory，在js环境下也就是window和Vue的构造函数。

this在这里值window，如果经常看源码，就会发现很多插件会判断下

typeof window !== undefined ? window : this;

这种写法更偏向于在js的window全局环境中使用。

接着看对外输出factory，首先判断 module和exports存在的情况

typeof exports === 'object' && typeof module !== 'undefined'

也就是优先使用AMD(module.exports = factory)，接着判断CMD是否存在

typeof define === 'function' && define.amd 

若AMD不存在而CMD存在，则使用CMD(define(factory)),若AMD，CMD都不存在，就把Vue的构造函数挂载再全局对象上(global.Vue = factory());

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。