vue3中获取 table的列数据

前两天有个朋友问我vue3中怎么获取table中的数据，我原本教他想用vue2中的ref的，结果发现3和2不同了，研究了半天发现不会用。
无奈就先给了个其他的解决方案，代码如下：

<template>
	<div class="test">
		 <table>
		 	<tr v-for="(item,i) in table_data.td">
				<td >{{item}}</td>
				<td><button type="button" @click="test(item)">test</button></td>
			</tr>
		 </table>
	</div>
</template>

<script>
	import {ref,reactive} from 'vue'
	export default{
		name:'test',
		setup(){
			let table_data = reactive({
				td:[123,456,789]
			})
			let test = (item)=>{
				alert(item)
			}
			return{
				table_data,
				test
			}
		}
	}
</script>

实际这个就是循环绑定事件的方式，原生js，jQuery中都可使用

关于ref在vue3中的用法，等这段时间忙完了再研究了 O(∩_∩)O