day195-Vue-style Hooks

要点

在vue3中,将更多的采用hook。个人觉得,如果能保留之前的东西再加上hook,将会更加的灵活。

  1. API that maps Vue’s existing API.
  2. Usage in Normal Vue Components

    API that maps Vue’s existing API.

    import {
    withHooks,
    useData,
    useComputed,
    useWatch,
    useMounted,
    useUpdated,
    useDestroyed
    } from "vue-hooks"

    const Foo = withHooks(h => {
    const data = useData({
    count: 0
    })

    const double = useComputed(() => data.count * 2)

    useWatch(() => data.count, (val, prevVal) => {
    console.log(`count is: ${val}`)
    })

    useMounted(() => {
    console.log('mounted!')
    })
    useUpdated(() => {
    console.log('updated!')
    })
    useDestroyed(() => {
    console.log('destroyed!')
    })

    return h('div', [
    h('div', `count is ${data.count}`),
    h('div', `double count is ${double}`),
    h('button', { on: { click: () => {
    // still got that direct mutation!
    data.count++
    }}}, 'count++')
    ])
    })

Usage in Normal Vue Components

import { hooks, useData, useComputed } from 'vue-hooks'

Vue.use(hooks)

new Vue({
template: `
<div @click="data.count++">
{{ data.count }} {{ double }}
</div>
`,
hooks() {
const data = useData({
count: 0
})

const double = useComputed(() => data.count * 2)

return {
data,
double
}
}
})
文章作者: lmislm
文章链接: http://lmislm.com/2019/07/27/2019-07-27/
版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 LMISLMのBlog