vue3语法糖

1 vue3语法糖

1. 定义变量 ref or reactive
   ref 适用场景

   • 基本数据类型：字符串、数字、布尔值等，建议优先使用 ref，通过 .value 访问和修改值

const isLoading = ref(false)

-   **需要重新赋值的对象/数组**：例如分页表格数据、动态替换的数组，用 `ref` 可直接通过 `.value` 整体赋值，而 `reactive` 需通过 `push` 或展开运算符更新[1](https://www.jianshu.com/p/556afcc39797)[7](https://coding.imooc.com/learn/questiondetail/kxNyDPbd7rgXGgb7.html)。

  **`reactive` 适用场景**

对象或深层嵌套结构：如配置对象、表单数据等，reactive 会递归代理所有属性，简化深层属性的响应式操作

无需整体替换的数据**：例如从接口获取的静态字典或配置，使用 reactive 更直观

const pagination = reactive({
  current: 1,
  pageSize: 5,
  total: 0,
  showTotal: total => `共 ${total} 条`,
  showSizeChanger: false
});

vue3响应式实现: 用户无法检测到新增或者删除属性,需要重写数组方法 (push 或者splice)才能触发响应式更新
vue2自动代理到实例:开发者无需手动声明响应式,通过data声明数据后,所有的属性都会被Obejct.defineProperty自动转化为响应式,并直接挂在到组件实例上,通过this访问

3. 模板写法 setup

 <script setup>
 </script> 

4. v-if 与v-show 与 v-model:open控制显隐
   v-if 写在html标签内 如果不满足条件 直接不渲染
   v-show 是控制显示与隐藏
   v-model双向绑定 确定显示与隐藏 v-model:open

初始值
const evaluateVisible = ref(false)
赋值位置
<Modal v-model:open="isVisible" />
修改值
evaluateVisible.value = true

相当于

<component 
:open="parentValue" 
@update:open="newValue => parentValue = newValue" 
/>

5. v-for
   v-for ="(dialog, index) in chatData.getdialogs"

6. 父子组件传值
   子组件传值给父组件

子组件
const emit = defineEmits(['update:visible', 'selectItem', 'cancel']);
emit('selectItem', selectedRecord.value);

父组件用@
<SearchModal  @selectItem="handleSearchSelect" />
const handleSearchSelect = (record) => {
  console.log(record)
}

父组件传值给子组件

父组件 ---定义方法
<SearchModal
      :searchFields="currentSearchItem.value.param_template"
      :responseData="currentSearchItem.value.response_template"
/>
子组件 ---通过defineProps
const props = defineProps({
  searchFields: {
    type: Array,
    default: () => []
  },
  height: {
    type: Number,
    required: true
  }
});
通过props.searchFields访问父组件数据

8. 监听 watch

2 .tailwindcss

用法举例

<div
            class="flex justify-between cursor-pointer text-base cursor-pointer text-[#595959] hover:text-[#c20000]"
            @click="reGenerate"
            :style="{ width: '5.5rem' }"
            v-if="index === chatData.getdialogs.length - 1"
          >
    </div>