# vue hook 使って vuejs コンポーネントライフサイクル監視

<template>
  <div id="app">
    Hi fly! Check out the console and the code around!
    <Child @hook:mounted="childMounted"/>
  </div>
</template>

<script>
import Child from "./Child";

export default {
  name: "app",
  components: { Child },
  methods: {
    childMounted() {
      console.log("Child was mounted");
    }
  }
};
</script>

<template>
  <h3></h3>
</template>

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
    };
  }
});

import Vue from "vue";
import { withHooks, useState, useEffect } from "vue-hooks";

// a custom hook...
function useWindowWidth() {
  const [width, setWidth] = useState(window.innerWidth);
  const handleResize = () => {
    setWidth(window.innerWidth);
  };
  useEffect(() => {
    window.addEventListener("resize", handleResize);
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, []);
  return width;
}

const Foo = withHooks(h => {
  // state
  const [count, setCount] = useState(0);

  // effect
  useEffect(() => {
    document.title = "count is " + count;
  });

  // custom hook
  const width = useWindowWidth();

  return h("div", [
    h("span", `count is: ${count}`),
    h(
      "button",
      {
        on: {
          click: () => setCount(count + 1)
        }
      },
      "+"
    ),
    h("div", `window width is: ${width}`)
  ]);
});

// just so you know this is Vue...
new Vue({
  el: "#app",
  render(h) {
    return h("div", [h(Foo), h(Foo)]);
  }
});