vue,ts复习

### Vue 和 TypeScript 复习要点 #### 一、Vue 中的对象监听和数组监听 在 Vue 中，当需要监听复杂数据结构（如对象或数组）的变化时，可以通过配置 `watch` 的选项来实现深度监听。具体来说，通过设置 `deep: true` 可以监控嵌套对象内部属性的变化[^1]。 以下是基于 Vue 3 的代码示例展示如何监听对象变化并触发回调： ```javascript const { createApp } = Vue; createApp({ data() { return { person: { name: '张三', age: 18, sex: '男' } }; }, watch: { person: { deep: true, // 开启深度监听 handler(newVal, oldVal) { console.log(`person 已更新：旧值=${JSON.stringify(oldVal)}, 新值=${JSON.stringify(newVal)}`); } } } }).mount('#app'); ``` 对于数组的监听同样适用此方法，只需确保目标变量是一个可响应的数据类型即可。 --- #### 二、Vue 中 v-model 的本质 在 Vue 中，`v-model` 是一种双向绑定机制，在组件间传递数据时尤其重要。其实现原理可以分解为两个部分： 1. **`:modelValue` 属性**：用于父级向子级传递当前值。 2. **`@update:modelValue` 事件**：允许子组件通知父组件其值已更改[^2]。 下面展示了自定义组件中使用 `v-model` 的方式及其底层逻辑： ```vue <!-- 子组件 --> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] }; </script> ``` 对应的父组件调用如下所示： ```vue <template> <CustomInput v-model="text" /> </template> <script> import CustomInput from './CustomInput.vue'; export default { components: { CustomInput }, data() { return { text: '' }; } }; </script> ``` --- #### 三、Vue 组件中的 Props 定义与解构 在现代 Vue 应用开发中，推荐使用 `<script setup>` 结合 `defineProps` 来简化模板渲染过程。这种方式不仅提高了代码可读性，还增强了静态分析能力[^3]。 以下是一段完整的例子说明如何接收来自父组件的多个参数，并安全访问它们的内容： ```vue <template> <div>数字: {{ newNum }}</div> <div>对象页码: {{ newObj?.page || '-' }}</div> <div>数组第三项: {{ newArr?.[2] ?? '-' }}</div> </template> <script setup> const props = defineProps({ newNum: { type: Number, required: true }, newObj: { type: Object, default: () => ({ page: null }) }, newArr: { type: Array, default: () => [] } }); console.log(props.newNum); console.log(props.newObj.page); console.log(props.newArr.length ? props.newArr[2] : '-'); </script> ``` 注意这里的默认值设定能够有效防止运行时错误的发生。 --- #### 四、TypeScript 类型断言的影响 在 TypeScript 编程实践中，合理运用类型断言可以帮助开发者更精确地控制程序行为。然而需要注意的是，不当的类型声明可能会影响后续函数签名的一致性和灵活性[^4]。 考虑这样一个场景——我们需要过滤一组用户列表，但并不关心某些字段的存在与否（比如 `"type"`）。此时可通过泛型约束以及条件类型的组合达成目的： ```typescript interface User { id: number; username: string; email?: string; } // 排除特定键名后的接口定义 type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>; function filterUsers(criteria: Partial<Omit<User, 'email'>>, users: User[]): User[] { return users.filter(user => Object.entries(criteria).every(([key, value]) => user[key as keyof User] === value) ); } ``` 上述代码片段实现了动态筛选功能的同时也移除了不必要的字段干扰。 --- ### 总结 以上内容涵盖了 Vue 数据监听机制、`v-model` 实现细节、组件通信模式设计原则，以及利用 TypeScript 提升代码健壮性的技巧。希望这些知识点能帮助巩固基础并启发实际项目中的应用思路！