vue3自定义hooks/可组合函数方式

export default {
  data () {
    return {
      aa: 1
    }
  },
  mounted () {
    this.testFn()
  },
  methods: {
    testFn () {
      console.log('testFn')
    }
  }
}

<template>
  <div>{{ aa }}</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myMixins from './myMixins'
export default defineComponent({
  mixins: [myMixins],
  mounted () {
    console.log('index mounted')
  }
})
</script>

import { ref, onMounted } from 'vue'
export default function () {
  const aa = ref(1)
  function testFn () {
    console.log('testFn')
  }
  onMounted(() => {
    testFn()
  })
  return {
    aa
  }
}

<template>
  <div>{{ aa }}</div>
</template>
<script lang="ts">
import { defineComponent, onMounted } from 'vue'
import myHooks from './myHooks'
export default defineComponent({
  setup () {
    const { aa } = myHooks()
    onMounted(() => {
      console.log('index mounted')
    })
    return {
      aa
    }
  }
})
</script>

/**计数器+-方法的hooks文件**/
import { ref } from 'vue'
export default function() {
    const counter = ref(0)
    const increment = () => {
        counter.value++
    }
    const devrement = () => {
        counter.value--
    }
 
    return {
        counter,
        increment,
        devrement
    }
}

<template>
    <div>
        <h1>我的名字是:{{info.name}}</h1>
        <h1>我的年龄是:{{info.age}}</h1>
        <h1>当前计数为:{{counter}}</h1>
        <button @click="increment">点击加一</button>
        <button @click="devrement">点击减一</button>
    </div>
</template>

<script>  //这里也可以使用setup语法糖写法
import { reactive } from 'vue';
//引入hooks文件 文件名当作变量名
import useCounter from '../hooks/useCounter.js';
export default {
    setup(){
        const info = reactive({name:'dxx',age:18})
        //将hooks文件里的方法和变量全部解构出来使用
        const { counter, increment, devrement } = useCounter()
        //最后将方法和变量导出
        return {
            info,
            counter,
            increment,
            devrement
        }
    }
}
</script>