vue-ready's Introduction

vue-ready

给Vue增加一个ready钩子函数

vue自带这么多钩子函数，为啥还要个ready？

vue钩子函数很多，不过这些钩子函数都是在vue本身的生命周期有关，却没有一个走的是项目过程。vue-ready就是为了让项目过程更简单。

能做什么？

vue-rady 给vue中，增加了一个ready的钩子函数。执行顺序默认是在 mounted 之后。
当首次初始化的时候，会调用init初始化函数，当init初始化标识为已经完成后，vue钩子函数 mounted 出发之后才会出发 ready 函数。

示例

// 初始化 钩子函数 ready
import VueReady from "vue-ready"
Vue.use(VueReady, function(end) {
    // 获取用户身份
    ajax.getUserInfo("...", function() {
        // 已经获取到用户身份
        end({userId: '10001'});
    })
})

// vue中，实际触发
{
    mounted () {
        console.log('先触发')
    },
    ready (data) {
        console.log('ready', '后触发', data.userId)
    }
}

获取安装

npm install vue-ready

API

// 引入vue
import VueReady from "vue-ready"
// 初始化（方式一） 函数为初始化的函数
Vue.use(VueReady, function(end) {
    // 获取用户身份
    // end函数，执行表示我已经初始化完毕了
    // end函数回调时，可以把数据作为第一个参数，之后将作为ready钩子函数的参数
})

// 初始化（方式二） 
Vue.use(VueReady, {
    init (end) {
        // 通上面的 初始化函数
    },
    // 和vue哪个钩子函数关联
    hook: 'mounted',
    // 是否 hook 对应的钩子函数中执行，默认为否，在之后执行
    isIn: false,
    // 钩子函数 ready的名称，可以自定义ready的名称
    readyName : 'ready'
})

// 钩子函数
{
    // vue中的钩子函数
    [readyName] (data) {
        // 能执行到这里，说明已经初始化
        // data的值，就是end函数执行时，传入的第一个参数
    }
}

Recommend Projects