Vue

Vue hooks初体验

初探Vue Hooks

Posted by wangchong on April 2, 2019

自从React出了hooks之后,Vue也相继除了hooks这个东西。我们都知道Vue是可以使用JSX语法的,使用JSX语法的Vue hooks和React hooks并不相差多少。并且使用React形式的hooks在vue中是可以运行的。

hooks

vue hooks包括以下几种:

import {
    withHooks,  //使用hooks,return出组件
    useData,    //使用数据
    useComputed,    //使用计算属性
    useWatch,       //使用监听
    useMounted,     //mounted钩子函数中
    useUpdated,     //undated钩子函数中
    useDestroyed    //destroyed钩子函数中
} from "vue-hooks"
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++')
  ])
})