请问当编写hooks时能否使用 class

[WangJincheng4869]

在官方文档中，hooks 的编写使用的是 function，请问如果使用 class 编写是否会有未知的 bug出现？

下面是一个简单的例子

class UseFetch {
  private url: string;
  public data = ref(null)
  public error = ref(null)

  constructor(url: string) {
    this.url = url;
  }
}

export const useFetch = new UseFetch(url);

[edison1105]

see #8149

[liulinboyi]

You can use like this: Play Ground or other, but because of this reason don't suggest use private class fields, you can use _xxx instead of it.

App.vue

<script setup>
import { ref, reactive } from 'vue'
import { createList } from './list.js'

const lists = reactive([])
const names = ['One', 'two', 'Three']
for(let n = 0; n < new Array(3).length; n++) {
  lists.push(createList(`${names[n]}`))
}
const show = (item) => {
  item.show()
}
</script>

<template>
  <div 
   v-for="(n, index) of lists" 
   @click="show(n)" 
   :style="{ 'color': n.hide ? 'red': 'unset' }"
  >
    {{ index }} {{ n.name }} {{ n.hide }}
  </div>
</template>

list.js

import { reactive } from 'vue'

class Base {
  hide = false
  constructor(hide) {
    this.hide = hide
  }
}

class List extends Base {
  constructor(name, hide) {
    super(hide)
    this.name = name
  }
  
  show() {
    this.hide = true
  }
}

function generate(name, hide) {
  const origin = new List(name, hide)
  const list = reactive(origin)
  console.log(origin)
  return list
}

/* factory mode */
export function createList(name, hide = false) {
  const list = generate(name, hide)
  return list
}