Vue3中的compositionAPI学习

compositionAPI (组合式API)

// 以前是写在
new Vue({
  data() {},
  methods: {},
  computed: {},
  ...
}) // 作为optionsAPI

现在是类似于hooks和optionsAPI组合,封装好了钩子,只需要去调用即可

  <p>{{ counter }}</p>
  <p>{{ doubleCounter }}</p>
  <p ref="desc"></p>

<script setup lang="ts">
  // setup()语法糖 可以写在 script上面 响应式数据声明的地方
  import {
    ref, // 单值的响应式
    refs, // 自动解构
    reactive // 响应式对象
    computed, // 计算属性
    onMounted, // 初始的钩子
    onUnmounted, // 卸载的钩子
    watch, // 侦听器
  } from 'vue'

  // const data = userCount()
  const { counter,doubleCounter } = userCounter()

  const msg = ref('message')
  // setup语法糖 会自动导出 声明的数据
  // computed也是写配置对象的形式 把参数要处理的逻辑 作为参数返回出去即可
  // 在setup 中是没有beforeCreated 和 Created 这2个钩子的,最早从onMounted() 开始

  const desc = ref<InstanceType<typeof HTMLDivElement>>()

  // 侦听器
  watch(
    ()=>{
      // 返回要监听的源
      counter
    },
    (val,oldVal) => {
      const p = desc.value as HTMLDivElement
      p.textContent = `counter change ${oldVal} to $  {val}`
    }
  )
</script>

<script lang="ts">
  function userCounter() {
    const data:any = reactive({
      counter: 1,
      doubleCounter: computed(()=> {
        data.counter * 2
      })
    })

    let timer: number | undefined

    onMounted(()=> {
      timer = setInterval(()=>{
        data.counter++
      },2000)
    })

    onUnmounted(()=>{
      clearInterval(timer)
    })
    // return data
    // 作用: 当导出的值有多个响应式对象,refs解构导出
    return toRefs(data) // toRefs 会把响应式对象中的每个 key的值变成 ref对象 类似于这种 单值响应式数据 ref('message')

    // 用的时候就可以直接展开 const { counter,doubleCounter } = userCounter()
  }
</script>