vue3-compositionApi

vue3-compositionApi

---

• reactive
• ref
• readonly
• watch和watchEffect
• setup
• 生命周期钩子函数

compositionAPI 逻辑复用

---

• 抽离逻辑代码到一个函数
• 函数命名约定为useXxxx格式
• 在setup中引用useXxxx函数

<template>
    <div>
        useMousePosition -- {{ x }} -- {{ y }}
    </div>
</template>
<script setup lang="ts">
import useMousePosition from './useMousePosition';
const { x, y } = useMousePosition()
</script>
<style>
</style>

import { ref, onMounted, onUnmounted } from 'vue';

const useMousePosition = () => {
    let x = ref<number>(0)
    let y = ref<number>(0)


    const update = (e: any):void => {
        console.log(e);
        x.value = e.pageX
        y.value = e.pageY
    }

    onMounted(() => {
        console.log('onMounted');
        window.addEventListener('mousemove', update)
    })


    onUnmounted(() => {
        console.log('onUnmounted');
        window.removeEventListener('mousemove', update)
    })


    return { x, y }
}

export default useMousePosition

vue3新增了生命周期钩子,通过在生命周期函数前加on来访问组件的生命周期

Composition API 生命周期钩子

onBeforeMount onMounted onBeforeUpdate onUpdated onBeforeUnmount onUnmounted onErrorCaptured onRenderTracked onRenderTriggered

<template>

</template>
 
<script  lang="ts">
import {
  onBeforeMount,
  onMounted,
  onBeforeUpdate,
  onUpdated,
  onBeforeUnmount,
  onUnmounted,
  ref
} from 'vue'

export default {
  setup() {
    // 其他的生命周期
    onBeforeMount(() => {
      console.log("App ===> 相当于 vue2.x 中 beforeMount")
    })
    onMounted(() => {
      console.log("App ===> 相当于 vue2.x 中 mounted")
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate(() => {
      console.log("App ===> 相当于 vue2.x 中 beforeUpdate")
    })

    onUpdated(() => {
      console.log("App ===> 相当于 vue2.x 中 updated")
    })

    onBeforeUnmount(() => {
      console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted(() => {
      console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
    }

  }
}

</script>
 
<style>
</style>