vue3 hooks 初次尝试

hooks

在 vue3 的 组合式函数 中是这样解释的：组合式函数(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。

在日常开发过程中遇到的需要复用的逻辑时，我们会封装一些可复用的函数

1. 无状态的逻辑函数：在接受输入后，立刻返回期望的输出
2. 有状态的逻辑函数：会随着时间的改变，状态发生变化（大概就是状态会有所改变，例如引入 onMounted，onUnmounted）

这里引用 three.js 示例 car 尝试改写，效果还可以

尝试 hooks 之前的代码

<template>
	<div id="container"></div>
	<div id="info">
		<span class="colorPicker">
			<input id="body-color" v-model="bodyColor" type="color" />
			<br />Body
		</span>
		<span class="colorPicker">
			<input id="details-color" v-model="detailsColor" type="color" />
			<br />Details
		</span>
		<span class="colorPicker">
			<input id="glass-color" v-model="glassColor" type="color" />
			<br />Glass
		</span>
	</div>
</template>

<script setup lang="ts">

import { onMounted, onUnmounted, Ref, ref } from '@vue/runtime-core';

import { init,changeColor,clear } from './utils/initThree'

let bodyColor: Ref<string> = ref("#ff0000")
let detailsColor: Ref<string> = ref("#ffffff")
let glassColor: Ref<string> = ref("#ffffff")

function onChangeColor(){
    changeColor(this.value)
}

onMounted(() => {

    init()
    
    const bodyColor = document.getElementById('body-color')
    bodyColor.addEventListener('input', onChangeColor )
    ......
    ......

})

onUnmounted(() => {
    
    clear()
    
    const bodyColor = document.getElementById('body-color')
    bodyColor.removeEventListener('input', onChangeColor )
    ......
    ......
    
})

</script>

<style>

</style>

initThree.ts

export function init() {}

export function changeColor() {}

function render() {}

function onWindowResize() {}

export function clear() {}

尝试 hooks 之后的代码 （页面更加简洁明了）

Home.vue

<template>
	<div id="container"></div>
	<div id="info">
		<span class="colorPicker">
			<input id="body-color" v-model="bodyColor" type="color" />
			<br />Body
		</span>
		<span class="colorPicker">
			<input id="details-color" v-model="detailsColor" type="color" />
			<br />Details
		</span>
		<span class="colorPicker">
			<input id="glass-color" v-model="glassColor" type="color" />
			<br />Glass
		</span>
	</div>
</template>

<script setup lang="ts">

import { useInitThree } from './utils/useInitThree'

// 初始化3d场景
const { bodyColor, detailsColor, glassColor } = useInitThree()

</script>

<style>

</style>

useInitThree.ts

import { onMounted, onUnmounted, Ref, ref } from '@vue/runtime-core';

let bodyColor: Ref<string> = ref("#ff0000")
let detailsColor: Ref<string> = ref("#ffffff")
let glassColor: Ref<string> = ref("#ffffff")


export function useInitThree() {

        onMounted(() => init())

        onUnmounted(() => clear())

        return { bodyColor, detailsColor, glassColor }

}

function init() {}

function render() {}

function onWindowResize() {}

function clear() {}