精华内容
下载资源
问答
  • 关于Vue暴露的全局nextTick继续来看下面的这段代码:{{test}}tetvar vm = new Vue({el: '#example',data: { test: 'begin',},methods: { handleClick() {this.test = 'end';console.log('1') setTimeout(() => { ...

    关于Vue暴露的全局nextTick

    继续来看下面的这段代码:

    {{test}}

    tet

    var vm = new Vue({

    el: '#example',

    data: { test: 'begin',

    },

    methods: { handleClick() {

    this.test = 'end';

    console.log('1') setTimeout(() => { // macroTask

    console.log('3')

    }, 0);

    Promise.resolve().then(function() { //microTask

    console.log('promise!')

    })

    this.$nextTick(function () {

    console.log('2')

    })

    }

    }

    })

    在Chrome下,这段代码执行的顺序的1、2、promise、3。

    可能有同学会以为这是1、promise、2、3,其实是忽略了一个标志位pending。

    我们回到nextTick函数return的queueNextTick可以发现:

    return function queueNextTick (cb?: Function, ctx?: Object) { let _resolve

    /*cb存到callbacks中*/

    callbacks.push(() => { if (cb) {

    try {

    cb.call(ctx)

    } catch (e) {

    handleError(e, ctx, 'nextTick')

    }

    } else if (_resolve) {

    _resolve(ctx)

    }

    }) if (!pending) {

    pending = true timerFunc()

    } if (!cb && typeof Promise !== 'undefined') { return new Promise((resolve, reject) => {

    _resolve = resolve

    })

    }

    }

    这里面通过对pending的判断来检测是否已经有timerFunc这个函数在事件循环的任务队列等待被执行。如果存在的话,那么是不会再重复执行的。

    最后异步执行nextTickHandler时又会把pending置为false。

    function nextTickHandler () {

    pending = false /*执行所有callback*/

    const copies = callbacks.slice(0)

    callbacks.length = 0 for (let i = 0; i < copies.length; i++) {

    copies[i]()

    }

    }

    所以回到我们的例子:

    handleClick() {

    this.test = 'end';

    console.log('1') setTimeout(() => { // macroTask

    console.log('3')

    }, 0);

    Promise.resolve().then(function() { //microTask

    console.log('promise!')

    });

    this.$nextTick(function () {

    console.log('2')

    });

    }

    代码中,this.test = 'end'必然会触发watcher进行视图的重新渲染,而我们在文章的Watcher一节中就已经有提到会调用nextTick函数,一开始pending变量肯定就是false,因此它会被修改为true并且执行timerFunc。之后执行this.

    nextTick(fn)只是把传入的fn置入callbacks之中。此时的callbacks有两个function成员,一个是flushSchedulerQueue,另外一个就是this.$nextTick()的回调。

    因此,上面这段代码中,在Chrome下,有一个macroTask和两个microTask。一个macroTask就是setTimeout,两个microTask:分别是Vue的timerFunc(其中先后执行flushSchedulerQueue和function() {console.log('2')})、代码中的Promise.resolve().then()。

    展开全文
  • 实现方式两种:官网实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。先说野路子,因为其实野路子就是最根本实现方式,官方use实现也是一样,只是use很好封装了。/**main.js中实例Vue时...

    内心背景:今天偶然上到论坛,看到关于Vue的两篇阅读量破千,我TM膨胀了啊。赶快再写一篇我开始用Vue时遇到的问题。

    现实背景:很多时候我们会在全局调用一些方法。

    实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。

    先说野路子,因为其实野路子就是最根本的实现方式,官方的use实现也是一样的,只是use很好的封装了。

    /*

    *main.js中实例Vue时添加方法

    */

    import Vue from 'vue';

    //这样以后你就可以在该项目下的其他组件中使用hello了,直接调用 this.hello('正字表达狮')。

    Vue.prototype.hello = function(name){

    console.log(`hello ${name}`)

    }

    new Vue({

    el: '#app',

    router,

    store,

    render: h => h(App)

    })

    原理很简单,因为Vue实质上就是一个对象。大多数对象都会存在原型对象,在Vue原型上添加了方法之后,new Vue()实例化时vm就继承了该方法。因为其他组件也会继承vm所以所有的组件都可以调用该方法。接下来看看Vue.use()。

    首先我新建一个deta.js。里面封装一个对象。

    const date = {

    tickToLong(tick) {

    let seconds = tick / 1000;

    let h = Math.floor(seconds / 60 / 60);

    let m = Math.floor((seconds - 60 * 60 * h) / 60);

    let s = Math.floor(seconds - 60 * 60 * h - 60 * m);

    return h + ':' + m + ':' + s

    },

    tickToTime(tick){

    let date = new Date(tick);

    let h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();

    let i = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();

    let s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();

    return h+':'+i+':'+s

    }

    }

    const install = function(vm, options) {//插件必须有这样一个install方法。

    vm.prototype._date = date;

    }

    export default { install }

    可以看到里面有一个install方法,然后将该方法暴露出来。install方法是必须的,可看官网use相关部分。我们发现install里面其实就是我们野蛮的第一中种方式。install当中的vm实际上就是Vue这个对象。所以本质上两种方式都是在vue原型上面添加了方法。当然建议大家在工作中不要使用第一种方法。因为别人会觉得你很low啊,而且你的main文件会莫名其妙多很多代码,自己看着也很难受啊。

    这些也只是工作时看到的问题如果有什么不对的,也欢迎讨论

    展开全文
  • 实现方式两种:官网实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。先说野路子,因为其实野路子就是最根本实现方式,官方use实现也是一样,只是use很好封装了。/**main.js中实例Vue时...

    现实背景:很多时候我们会在全局调用一些方法。

    实现方式两种:官网的实现use方法,然后你也可以用野路子直接在Vue.prototype上面定义。

    先说野路子,因为其实野路子就是最根本的实现方式,官方的use实现也是一样的,只是use很好的封装了。

    /*

    *main.js中实例Vue时添加方法

    */

    import Vue from 'vue';

    //这样以后你就可以在该项目下的其他组件中使用hello了,直接调用 this.hello('正字表达狮')。

    Vue.prototype.hello = function(name){

    console.log(`hello ${name}`)

    }

    new Vue({

    el: '#app',

    router,

    store,

    render: h => h(App)

    })

    原理很简单,因为Vue实质上就是一个对象。大多数对象都会存在原型对象,在Vue原型上添加了方法之后,new Vue()实例化时vm就继承了该方法。因为其他组件也会继承vm所以所有的组件都可以调用该方法。接下来看看Vue.use()。

    首先我新建一个deta.js。里面封装一个对象。

    const date = {

    tickToLong(tick) {

    let seconds = tick / 1000;

    let h = Math.floor(seconds / 60 / 60);

    let m = Math.floor((seconds - 60 * 60 * h) / 60);

    let s = Math.floor(seconds - 60 * 60 * h - 60 * m);

    return h + ':' + m + ':' + s

    },

    tickToTime(tick){

    let date = new Date(tick);

    let h = date.getHours() > 9 ? date.getHours() : '0' + date.getHours();

    let i = date.getMinutes() > 9 ? date.getMinutes() : '0' + date.getMinutes();

    let s = date.getSeconds() > 9 ? date.getSeconds() : '0' + date.getSeconds();

    return h+':'+i+':'+s

    }

    }

    const install = function(vm, options) {//插件必须有这样一个install方法。

    vm.prototype._date = date;

    }

    export default { install }

    可以看到里面有一个install方法,然后将该方法暴露出来。install方法是必须的,可看官网use相关部分。我们发现install里面其实就是我们野蛮的第一中种方式。install当中的vm实际上就是Vue这个对象。所以本质上两种方式都是在vue原型上面添加了方法。当然建议大家在工作中不要使用第一种方法。因为别人会觉得你很low啊,而且你的main文件会莫名其妙多很多代码,自己看着也很难受啊。

    但是由于模块比较多,我对于每个模块分配了不同的组件,发现一个项目中有许多相同的方法,

    在每个组件中我都需要进行重复的编写。

    所以,我希望能够将这些公共的方法,抽离出来放到同一个 js 中,这里就取名 util.js

    3、实现方法

    1、方法一

    暴露接口的方式,直接在组件中进行引用

    首先在 util.js 单独文件中写两个方法:

    在组件中引用,测试了无法在 main.js 中全局引用(有方法请告诉我):

    import {a,b} from '../static/js/util.js'

    调用:

    test: function() {

    a();

    b();

    }

    2、方法二:

    将公共方法集成到 Vue 原型上,Vue.prototype.name

    首先在 util.js 中写方法:

    在 main.js 中进行全局引用:

    调用:

    this.adminApi.a();

    this.adminApi.b();

    展开全文
  • 如何在vue中建立全局引用或者...如果是基于vue.js编写插件我们可以用 vue.use(...)main.js2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?第一步:最好建立一个全局的命令文件例如:direc...

    如何在vue中建立全局引用或者全局命令,具体内容如下

    1 一般在vue中,有很多vue组件,这些组件每个都是一个文件。都可能需要引用到相同模块(或者插件)。我们不想每个文件都import 一次模块。

    如果是基于vue.js编写的插件我们可以用 vue.use(...)

    main.js

    2 但是如果想添加一个全局命令,同时又让每个vue的文件都能用到怎么办?

    第一步:最好建立一个全局的命令文件例如:directive/directive.js

    第二步:利用vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦

    directive.js

    第三部步:在main.js(入口js文件)中将它引入,可以省略文件后缀

    main.js

    这样任何一个vue文件只要这样v-focus(命令名),就可以很方便的用到了

    3 vue.directive() 的命令一般都是自动运行的或者说初始化等等触发的,并不能用于异步事件,怎么办?

    于是我们可以用到'mixins'混合命令,你最好建立一个专门的文件夹用于存放混合命令,例如:

    mixins.js

    比如savescrollposition (不是vue中的savescrollposition)可以每次在路由跳转之间保存住浏览位置信息

    注意:vue2.0 中 路由跳转之间会自动保存位置信息 但是有bug(位置信息之间会相互干扰)。

    所以我们从新写一个savescrollposition暴露出去后,在你需要的页面中混入

    这样就会很方便。

    4 如果你需要应用一个插件,同时他并不是基于vue.js的插件命令编写的,那你可以将它赋予vue的原型上

    例如:我想全局引用axios,我们可以这样

    main.js

    然后this.$http.get(url) 等等

    xxx.vue

    5 将需要的变量挂在到window对象上

    例如:第三方库lodash.js,moment.js等等

    main.js

    xxx.vue

    注意:这种方式不适合服务端渲染,服务端并没有window对象

    强调一点:以上所有的引入都必须通过入口js文件去引入,这样才能适用于全局

    以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持萬仟网。

    如您对本文有疑问或者有任何想说的,请点击进行留言回复,万千网友为您解惑!

    展开全文
  • 一、全局引入文件1、先定义共用组件 common.vue// 定义一些公共属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {...
  • 全局方法写到一个文件里面,然后for循环挂载到Vue的prototype上,缺点是调用这个方法时候没有提示Object.keys(tools).forEach(key => {Vue.prototype[key] = tools[key]})第二种:利用全局混入mixin,因为...
  • Vue 2.0 版本中取消了 v1 中的 $broadcast 方法,因此要使用全局事件时,不可避免地会使用到 event-bus 之类的方法,本文旨在提出一种不需要用到 event-bus 的全局事件使用方法。主要思路是将事件全部绑定在 $root ...
  • 经过自己平时学习,也因为自己现在也是从事的Vue的开发,所以平时对Vue相对来说还是较为熟悉,但是平时自己一直有一个很大痛点,那就是对Vue的底层实现原理等等这些不够了解,所以很多时候定位错误都可能需要...
  • 如何在Vue中建立全局引用或者全局命令,具体内容如下 1 一般在vue中,有很多vue组件,...第二步:利用Vue.directive()建立一个全局命令,并将它暴露出来,例如一个focus 让表单自动聚焦 directive.js 第三部步:在ma
  • 一、全局引入文件 1、先定义共用组件 common.vue ... // 暴露出这些属性和方法 export default { httpUrl, commonFun } [removed] 2、在需要使用地方导入 [removed] // 导入共用组件 import glo
  • 一、全局引入文件1、先定义共用组件 common.vue属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {httpUrl,commonFun}...
  • 一、全局引入文件1、先定义共用组件 common.vue// 定义一些公共属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {...
  • 一、全局作一新求抖直微圈引入文件1圈调直年情,量单框来离理这接法清都为、先定义共用组件 commo需朋朋支带不新器功几事上为做和时意后n.vue// 定义一些公共属性和方法const ...{console.log("公共方法")}//...
  • 一、全局引入文件1、先定义共用组件 common.vue// 定义一些公共属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {...
  • 3 定义全局方法  建一个文件注册全局方法    使用 exports 可能会报错,应该将 .babelrc 文件中 “modules”: false 去掉 modules组止了文件转换 在 main.js 中引入 页面中直接调用 ...
  • 一、全局引入文件1、先定义共用组件 ...// 定义一些公共属性和方法const httpUrl = 'http://39.105.17.99:8080/'function commonFun() {console.log("公共方法")}// 暴露出这些属性和方法export default {httpUr...
  • 第一种方法全局引入文件 先定义共用组件 common.vue // 定义一些公共属性和方法 const httpUrl = 'http://39.105.17.99:8080/' function commonFun() { console.log("公共方法") } // 暴露出这些属性和...
  • 搜索头部有两个下拉选择框,选择框里面数据一般是常量,所以可以定义为全局常量方便管理: 第一步:定义常量(分模块进行管理)统一暴露出去 //角色状态 status.js export const ROLE_STATUS = { STATUS_0: { ...
  • 使用vue开发项目,有些UIvue使用install定义安装全局组件需要install和use这两个api来配合才能完成,组件通过export暴露出install方法 。但如果直接将指定组件赋值到vue的prototype上,组件不需要vue.use安装直接就...
  • 前言在项目中,经常会复用一些变量和函数,比如...定义全局变量原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出格式为对象,方便在其他地方调用),当其它地方需要使用时,用im...
  • vue3 给全局(每个实例) 添加公共方法

    千次阅读 2020-10-22 15:44:18
    众所周知,vue3,现在不会暴露 Vue 对象给你用了! 那么该如何给 它每个子组件实例添加公共的方法呢? vue2 添加的方法很简单 import Vue from 'vue' Vue.prototype.funcName= function() { ... } vue3 ...
  • Vue的全局组件

    2019-05-18 11:03:00
    通过import引入组件都是局部组件 通过Use使用都是全局组件 ...暴露出install方法,install(Vue){ Vue.component('ComponentName',Component)} import Test from '../test/Test.vue' ex...
  • 设置一个专用的的全局变量模块文件,模块里面定义一些变量初始状态,用export default 暴露出去,在main.js里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时,引入该模块便可。 全局变量模块文件:...
  • 原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出格式为对象,方便在其他地方调用),当其它地方需要使用时,用import导入该模块 1、使用全局变量专用模块,挂载到main.js文件...
  • 前言在项目中,经常会复用一些变量和函数,比如...定义全局变量原理:使用模块(.js或.vue文件)来管理全局变量,最后使用export暴露出去 (最好导出格式为对象,方便在其他地方调用),当其它地方需要使用时,用im...
  • vue中设置全局变量

    千次阅读 2019-05-08 18:17:18
    在main.js或者是全局的js文件同级目录下新建一个global.js,声明http并赋值,然后给他暴露出来,代码如下: import Vue from 'vue' var http='http://www.baidu.com'; export default{ http...

空空如也

空空如也

1 2 3 4 5
收藏数 85
精华内容 34
关键字:

vue暴露的全局方法

vue 订阅