Vue监听深层属性需选对方式：deep:true适合全局变动但性能差；精准路径监听更高效；computed提取后监听逻辑更清晰；数组内部属性变更需deep或computed规避索引赋值问题。
Vue 默认只监听对象或数组的引用变化，内部属性改了不会自动触发更新或 watch 回调。要让深层属性（比如 user.profile.avatar 或 list[0].name）变更也能被捕捉，关键不是“能不能”，而是“怎么选对方式”。
直接监听整个对象并启用 deep: true
适合需要响应任意嵌套层级变动的场景，比如表单整体校验、配置对象同步等。
- 组合式 API 中必须用 getter 函数包裹，例如：
watch(() => user, (newVal, oldVal) => {}, { deep: true }) - 选项式 API 可写为：
watch: { user: { handler() {}, deep: true } } - 注意：deep: true 会递归遍历所有子属性，对象越深越大，性能开销越明显，慎用于大型数据结构
精准监听某条路径（推荐）
如果只关心特定字段（如 user.settings.theme），没必要扫描整棵树。
Wjs Uploading Video
下载
将一个或多个视频上传至YouTube。当用户想“上传到YouTube”“发YouTube”“批量上传”“upload to YouTube”“post videos to YouTube”或发布到YouTube时使用此技能。
- 组合式 API：
watch(() => user.settings.theme, (newVal, oldVal) => {...}) - 选项式 API：
watch: { 'user.settings.theme': (newVal, oldVal) => {...} } - 这种方式不触发深度遍历，oldVal/newVal 是真实值，对比安全，响应更快
用计算属性提取后再监听
当路径复杂、有可选链或需做默认值处理时，computed 是更清晰的选择。
立即学习“前端免费学习笔记（深入）”；
- 先定义：
computed: { avatarUrl() { return this.user?.profile?.avatar || '' } } - 再监听：
watch: { avatarUrl(newVal) { ... } } - 好处是逻辑解耦、便于复用、调试时一眼看出依赖来源
监听数组内部对象属性的注意事项
数组本身是响应式的，但 arr[0].name = 'xxx' 这类操作不会触发 watch，除非开启 deep 或使用正确方式。
- 启用
deep: true可捕获内部对象属性变更，但代价是遍历整个数组及每个元素 - 更轻量的做法：用 computed 提取关注字段，例如
statusList() { return this.list.map(i => i.status) }，再监听该计算属性 - 避免直接索引赋值；如需动态添加属性，Vue 2 用
this.$set(arr[0], 'age', 18)，Vue 3 用reactive或ref确保初始即响应
