vue3 cdd deep

### Vue3 中 `deep` 选项的使用

在 Vue3 的组合式 API (Composition API) 和响应式系统中，`watch` 函数用于侦听数据的变化。当需要监听嵌套对象内部属性变化时，可以使用 `deep` 选项来实现深层次监控。

对于深层嵌套的对象，默认情况下 `watch` 只会检测到顶层引用的变化而不会触发更新。为了使监视器能够捕捉到对象内任何层级上的更改，设置 `{ deep: true }` 参数即可[^1]。

#### 示例代码展示

下面是一个简单的例子，展示了如何利用 `deep` 属性去观察复杂状态的变化：

import { ref, watch } from 'vue';

// 定义一个具有多层结构的数据源
const formData = ref({
    personalInfo: {
        name: '',
        age: ''
    }
});

// 设置 watcher 并开启深监测模式
watch(
    () => ({ ...formData.value.personalInfo }), 
    newValue => console.log('Personal Info Changed:', newValue),
    { deep: true }
);

在这个案例里，每当 `personalInfo` 下面任何一个字段发生变动都会被记录下来并打印日志消息。

相关问题

vue3 监听 deep

### Vue3 深度监听属性变化

在 Vue3 中，`watch` 函数可以用于监听响应式数据的变化。当需要监听嵌套对象内部属性的变化时，可以通过设置 `deep: true` 参数来实现深度监听[^1]。

对于使用 `reactive` 创建的对象，可以直接在其上应用带有 `deep` 选项的监视器：

import { reactive, watch } from 'vue';

const state = reactive({
    user: {
        name: "Alice",
        age: 25,
        address: {
            city: "Wonderland"
        }
    }
});

watch(() => ({...state.user}), (newVal, oldVal) => {
    console.log('User info changed');
}, { deep: true });

上述代码会监控整个 `user` 对象及其子属性的变化并触发回调函数执行[^4]。

而对于基本类型的数组或其他简单结构，则只需指定要观察的具体路径即可完成更精细粒度上的跟踪[^3]：

watch(
  () => state.user.age,
  (newValue, oldValue) => {
      console.log(`Age updated from ${oldValue} to ${newValue}`);
  },
);

此方式适用于仅需关注特定字段更新的情况而不必启用全面深入模式[^2]。

vue3 css deep

### 解决方案

在 Vue 3 中，当 `style` 标签带有 `scoped` 属性时，默认情况下样式仅应用于当前组件及其根节点下的元素，不会影响子组件的样式。为了使父组件能够修改子组件中的 CSS 样式，可以使用深度选择器。

#### 方法一：使用 `/deep/`

尽管 `/deep/` 已经被标记为废弃，在某些场景下依然有效：

<style scoped>
.box >>> .el-card {
    background-color: pink;
}
</style>

这种方法适用于较旧版本的 Vue CLI 和一些特定配置环境[^2]。

#### 方法二：推荐方式——使用 `::v-deep`

这是官方推荐的方式之一，语法更加直观清晰：

<style scoped>
.box ::v-deep(.el-card) {
    background-color: pink;
}
</style>

此方法兼容性较好，并且符合现代开发标准。

#### 方法三：组合选择器

对于更复杂的嵌套结构，可以直接指定路径来应用样式：

<style scoped>
.box :deep(.el-card__body) {
    padding: 0 !important;
}

/* 或者 */
.parent-component-name :deep(.child-component-class) {
    color: red;
}
</style>

这种方式提供了更高的灵活性，允许精确控制目标元素[^3]。

#### 完整示例代码

以下是完整的 HTML 结构与对应的样式定义：

<template>
<div class="parent">
    <ChildComponent />
</div>
</template>

<script setup lang="ts">
import ChildComponent from './ChildComponent.vue';
</script>

<style scoped>
.parent ::v-deep(.child-specific-class) {
    font-size: 2em;
    text-align: center;
}
</style>