vue3.0hook函数，toRefs以及ref的用法

vue3.0中的hook函数函数目的是将公共的函数抽象到一个文件中，可以在多个组件中复合引用。

hooks用法：
（1）在src目录下新建hooks文件夹，新建一个ts文件

import { computed, defineComponent,onMounted,reactive,ref, watch,watchEffect } from 'vue'

export default function () {
    const x = ref(-2)
    const y = ref(-2)

    const clickhandler = (event:any) => {
        x.value = event.pageX
        y.value = event.pageY
    }

    onMounted(()=>{
        window.addEventListener('click',clickhandler)
    })
    return {
        x,y
    }
}

（2）引用：在要使用的组件中引用即可

import useMousePosition from './hooks/useMouse'

toRefs的作用：可以把一个响应式对象转换成普通对象，该普通对象的每一个属性都是一个ref

如下图所示：想要实现这样的效果

学过reactive我们可以会这样去实现：

<template>
  <div>
    <h2>torefs的使用</h2>
    <h3>姓名：{{state.name}}</h3>
    <h3>年龄：{{state.age}}</h3>
  </div>
</template>


<script lang="ts">
import { computed, defineComponent,onMounted,reactive,ref, 
toRefs, watch,watchEffect } from 'vue'
export default defineComponent({
    setup(){
      const state = reactive(
        {
          name:'自来也',
          age:14
        }
      )
      return {
        state,
      }
    }
})
</script>

可以看到，标签是这样写的：

<h3>姓名：{{state.name}}</h3>
 <h3>年龄：{{state.age}}</h3>

假如我不想这样是写，我想写成这样

<h3>姓名：{{name}}</h3>
 <h3>年龄：{{age}}</h3>

这个时候就可以用到toRefs了

<template>
  <div>
    <h2>torefs的使用</h2>    
    <h3>姓名：{{name}}</h3>
    <h3>年龄：{{age}}</h3>
  </div>
</template>


<script lang="ts">
import { computed, defineComponent,onMounted,reactive,ref, 
toRefs, watch,watchEffect } from 'vue'

// 引入子集组件
export default defineComponent({
    setup(){
      const state = reactive(
        {
          name:'自来也',
          age:14
        }
      )
      return {
        ...toRefs(state)
      }
    }
})
</script>

ref获取页面中的元素
需求：当页面加载完毕后，可以自动获取文本框的焦点
（1）给页面中的标签绑定ref

<template>
  <div>
    <input type="text" ref="inputref">
  </div>
</template>

（2）在setup中声明ref绑定值

<script lang="ts">
import { computed, defineComponent,onMounted,reactive,ref, 
toRefs, watch,watchEffect } from 'vue'
export default defineComponent({
    setup(){
      // ref是一个HTMLElement，由于setup执行较早，所以给定初始值为null，ref的类型可能是一个HTMLElement 元素，也可能是一个null
      const inputref = ref<HTMLElement | null>(null)
      onMounted(()=> {
        inputref.value&&inputref.value.focus()
      })
      return {
        inputref
      }
    }
})
</script>