Vue-hooks 简单使用

Vue风格的使用方法

数据类：

useData useComputed useWatch

生命周期类：

useUpdated useMounted useDestroyed

使用前提：

1. 获取实例

2. 挂载hooks

3. 使用hooks函数

4. 返回页面数据对象

只可在顶级代码块中调用 Hooks，而不能在循环、条件或嵌套函数中使用

useData(初始化数据)

useComputed(函数)

useWatch(观测数据函数,操作数据函数)

生命周期类：

useUpdated(函数)

useMounted(函数)

useDestroyed(函数)

示例：

<template>
    <div @click="data.count++">
      {{ data.count }} {{ double }}
    </div>
</template>

import { hooks } from "vue-hooks";
import Vue from "vue";

Vue.use(hooks);

export default {

  hooks() {
    const data = useData({
      count: 0
    })

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

    return {
      data,
      double
    }
  }

}

改变数据即可触发逻辑

<template>
    <div @click="changdata">
      {{ data.count }} {{ double }}
    </div>
</template>

import { hooks } from "vue-hooks";
import Vue from "vue";
imoprt { myhooks } from "../myhooks";

Vue.use(hooks);

export default {

  hooks() {
    const data = useData({
      count: 0
    })

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

    return {
      data,
      double
    }
  },
  methods:{
      changdata(){

          this.data.count++
      }
  }

}

``` 
抽取自定义hooks函数，实现逻辑复用，其中`myhooks`导出了自定义的数据逻辑，在组件中可以使用

相关Hooks 在组件中多次使用相同的Hooks逻辑，其中的数据是相互隔离的。

自定义Hooks示例：

import {
useComputed,
useData,
useUpdated
} from “vue-hooks”

export default function () {

const data = useData({
    money: 223
})

const result = useComputed(() => {

    return data.money * 2
})

useUpdated(() => {
    console.log('updated!')

})

return {
    data,
    result,
}

}