小抄备忘录

name

要想按如下方式命名组件

js
<script name="Person" lang="ts" setup>
<script>

需要执行以下命令安装

bash
npm i vite-plugin-vue-setup-extend -D

然后修改 vite.config.ts

ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import VueSetup from 'vite-plugin-vue-setup-extend'   // 加这行

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue(), VueSetup()],  // 这里也要加
})

响应式对象 ref reactive

使变量变成响应式

ref 可以定义：基本类型、对象类型响应式数据 reactive 只能定义：对象类型的响应式数据

ts
<script name="Person" lang="ts" setup>
        import { ref } from 'vue';
        // 定义基本变量响应式数据
        let name = ref('张三');
        
        import { reactive } from 'vue';
        // 定义对象类型响应式数据
        let person = reactive({
            name: '张三',
            age: 25,
            occupation: '学生'
        });
        // 定义方法
        function changeName() {
            console.log('changeName');
            name.value = '小乔'
        }
</script>