Vue3结合class类使用

介绍

Vue3结合class类来使用

Vue3和class在模板中使用

Vue3支持组合式api, 支持在js/ts中通过import引入其api使用, 那会有个问题, 在<template>模板中使用, 也需要.value的处理(本文件创建的不需要)

举个例子

在<template>模板中

• testRef 是本文件创建的ref()数据, 本文件创建的响应式数据不需要.value
• Three?.loadingNumber.value 是class类中通过import引入ref()创建的数据, 如果是class类中的Vue响应式数据在模板中使用需要.value

<template>
  <div>
    <!-- 本文件创建的响应式数据不需要.value -->
    {{ testRef }}
    <div ref="stateDom" />
    <!-- 如果是class类中的Vue响应式数据在模板中使用需要.value -->
    <LoaDing :loadingNumber="Three?.loadingNumber.value" />
  </div>
</template>
<script setup lang="ts">
// 导入Vue3的API
import { ref, onMounted, onBeforeUnmount, shallowRef } from 'vue'
// 导入three.js的构造函数
import { CreatedCanvas } from './components/car_render'

// 获取Dom
const stateDom = ref()
const testRef = ref('hellow')
// 通过shallowRef()浅层响应式代理three.js数据
const Three = shallowRef<CreatedCanvas>()

onMounted(() => {
  // 创建three.js实例
  Three.value = new CreatedCanvas(stateDom.value)
  // 传递页面Dom 绘制three.js
  Three.value.createScene()
})

onBeforeUnmount(() => {
  // 销毁three.js实例
  Three.value?.dispose()
})
</script>

<script lang="ts">
export default {
  name: 'BydCar'
}
</script>
<style lang="scss" scoped></style>