vue3 怎么把ts和html分离但不影响ref的使用

在Vue 3中，如果你想将TypeScript (TS) 和 HTML 部分分离，并保持对`ref`组件状态管理的有效性，可以使用Composition API和模板渲染语法结合。首先，你需要设置项目支持TypeScript：

1. 安装依赖：

   npm install -D @vue/compiler-sfc --save-dev
   npm install typescript ts-loader @vue/cli-plugin-typescript --save-dev

2. 配置`.vue`文件的TypeScript支持：
更新你的`vue.config.js`或`vite.config.js`（如果是Vite），添加TypeScript配置：

   // vue.config.js 或 vite.config.js
   module.exports = {
     transpileDependencies: ['@vue/runtime-dom'], // 如果使用Vue CLI
     chainWebpack(config) {
       config.module
         .rule('typescript')
         .test(/\.vue$/)
         .use('ts-loader')
         .loader('ts-loader')
         .options({ appendTsSuffixTo: [/\.vue$/] });
     }
   };

3. 分离TS和HTML：
在`.vue`文件中，你可以创建一个`.ts`的`script setup`部分定义`ref`，然后在`.html`部分引入并渲染它们：
**.vue**

   <template>
     <div>
       <h1>{{ title }}</h1>
       <button @click="incrementTitle">{{ buttonText }}</button>
     </div>
   </template>

   <script lang="ts">
   import { ref } from 'vue';

   const title = ref('');
   const incrementTitle = () => (title.value += 1);

   export default {
     data() {
       return {
         buttonText: 'Increment',
       };
     },
   };
   </script>

4. 使用`setup()`函数替代旧的`export default`语法，进一步增强模块化：

   <script setup lang="ts">
   import { onMounted } from 'vue';
   import { ref } from 'vue';

   let title = ref('');

   onMounted(() => {
     // 初始化或异步获取数据
   });

   const incrementTitle = () => {
     title.value += 1;
   };

   // 然后在模板中引用title
   </script>

**注意：** 当你在模板中直接使用`ref`时，如`{{ title }}`，Vue会自动处理类型推断，所以不需要显式指定其类型。