如何设置Vue全局公共方法
作者:杰~JIE
前言
在开发中,为了提高重用性,简洁代码,往往需要把代码的公共部分提取出来,形成一个可复用的模块。
当代码提取出来形成模块后,要实现所有地方都可以引用,就需要把这些模块设置成全局属性。
所以,要实现全局公共方法
我们需要知道以下几个知识点:
- 怎么设置全局属性;
- 怎么引用全局属性;
一、设置全局属性
全局属性可以分为:全局变量和全局方法。
实现全局变量,常用的手段就是使用vuex (关于vuex 的使用方法这里不详细说明了),还有一种方法就是借助原型属性来实现。
下面,我将重点讲一下原型。
二、引用全局属性
在使用Vue时,我们都要写这么一串代码:
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
上面代码是借助Vue构造函数创建一个Vue对象。
从这可以看出,Vue其实是一个对象。那么我们就可以借助Vue的原型实现对全局属性的引用。
首先,我们需要了解以下知识点:
什么是原型?
在js 代码中,我们经常会看到一个属性prototype 。他是构造函数(就是用来构造对象的函数)的属性,用于指向原型对象。
那什么是原型对象呢?
了解“原型对象”,我们需要把“原型”和“对象”拆开来说明。
先说对象,js 的内建对象有很多,例如:String 、Math 、Object 、Array 等等。
// 声明一个数组对象 const arr = Array();
以上是使用内建对象——数组的构造函数,创建一个数组。
当然,我们也可以设置自定义对象,也就是自己设置一个新的对象。
const obj = {};
以上代码就是设置了一个空对象。
那内建对象和自定义对象有什么区别呢?
内建对象和自定义对象的区别,就是内建对象自带了一些属性和方法。就如上面声明的数组对象。我们可以通过arr.length
属性来获数组的长度,或者可以通过arr.push()
方法来向数组新增一个元素。而自定义对象就没有这些属性和方法。这时,我们就会很疑惑,为什么同样是对象,两者的区别就这么大的区别呢?难到是上帝不公,创造的时候给了不同的待遇?
嘿!还别说,就是上帝(js源码)创造的时候设定的,但是他并不是不公,而是为了分工合作。但是,上帝还是为了广大民众着想留了后门——把他创造的工具留了下来。
那就是原型的访问工具 prototype
和 __proto__
。
其实,内建元素跟自定义元素的区别就是在于原型的不同(没错,自定义元素也是有原型的,只是这个原型是Object 内建对象的原型)。
直观的说,原型是预先设定好的对象(可以说是我们创建的对象的祖先啦!),里面预设了各种各样的方法。
下面我们来看看arr 和 obj 的原型
上图的__proto__
对象就是原型对象了。__proto__
属性是一个指针(地址),指向了原型。原型原型,原本的形状。原型是一类对象的初始。所以不同的类型对象有着不同的原型。
__proto__与prototype的区别
到这里,可能大家就有点懵了。怎么又出现了prototype
?不是__proto__
吗?别急,现在就捋捋两者的关系。
首先,__proto__
是对象的属性,指向对象的构造函数的原型。而prototype
是函数的属性,指向它的原型。
其次,对象都是由函数(也就是构造函数)生成的。(这一点非常重要。要理解原型就要理解这句话,如果不理解就把它当做定理。)
基于以上两点可得出下图:
以上就是prototype
和 __proto__
的关系了。
三、全局共用方法添加与引用
借助原型实现全局共用方法的添加
至此,我们具备一下几点:
有访问的工具–prototype
和 __proto__
;原型是个对象,意味着我们可以对原型进行属性的增删改查;基于同一原型生成的对象,所有的对象的原型都是同一个。
那么,只要修改原型,所有基于同一原型生成的对象的原型都同步改变;
基于以上三点,只要我们在Vue实例化前借助prototype
把全局公共方法挂载到原型上,就能让公共方法实现全局访问。
在main.js
中注册全局共用方法:
Vue.prototype.fn = function(){ console.log("全局公共方法") }; var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } })
引用全局共用方法
全局共用方法可以通过两种手段来使用:
- vue实例化对象的作用域——
this
- main.js 注册全局共用方法后的
Vue.prototype
在组件中或者生命周期中直接通过this.fn()
调用即可。
如果是通过Vue.prototype.fn()
来调用,必须保证调用处的代码在全局公共方法注册代码后面执行。
四、全局公共方法优化
虽然我们已经知道将方法挂载在Vue.prototype
就可以实现全局公共方法。
但是呢!当全局公共方法有很多时,我们就得需要写很多个Vue.prototype
。
这显然是不符合代码美观的。Vue.prototype
挂一个方法也是挂,挂一个对象也是挂。
那为什么我们不把所有的全局方法写在同一个js 文件中呢?
创建commonApi.js
function fn1(){ console.log("全局方法一") } function fn2(){ console.log("全局方法二") } function fn3(){ console.log("全局方法三") } function fn4(){ console.log("全局方法四") } // 将四个全局公共方法,组合成一个对象,并暴露出去 export default { fn1, fn2, fn3, fn4, }
在main.js 进行配置:
import commonApi from './store/commonApi' Vue.prototype.commonApi = commonApi;
组件内通过this
引用:
text(){ this.commonApi.fn1(); }
总结
以上就是新建全局公用的方法了。
这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。