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函数执行时,传入的第一个参数
}
}