1
const user = {
2
  info: {
3
    address: {
4
      city: "北京"
5
    }
6
  }
7
}

1
// 报错！Cannot read properties of undefined
2
const city = user.info.address.city

1
const city = user?.info?.address?.city

1
// 1. 对象深层属性（最常用）
2
obj?.a?.b?.c
3

4
// 2. 数组取值
5
arr?.[0]
6

7
// 3. 函数/方法安全调用
8
fn?.()
9

10
// 4. 结合动态key
11
obj?.[key]

1
<TreeItem v-if="item?.children?.length" />

1
if(item && item.children && item.children.length)

1
const num = 0
2

3
console.log(num || 100) // 输出 100（错误！0 被当成空）
4
console.log(num ?? 100) // 输出 0（正确！只判断 null/undefined）

1
<template>
2
  <!-- 同一个挂载点，动态渲染不同组件 -->
3
  <component :is="currentComp"></component>
4
</template>
5

6
<script setup>
7
import A from './A.vue'
8
import B from './B.vue'
9
import { ref } from 'vue'
10

11
const currentComp = ref(A)
12
</script>

1
Vue received a Component which was made a reactive object.
2
This can lead to unnecessary performance overhead.

1
import { markRaw, reactive } from 'vue'
2
import A from './A.vue'
3
import B from './B.vue'
4

5
const tabList = reactive([
6
  { name: 'A组件', com: markRaw(A) },
7
  { name: 'B组件', com: markRaw(B) }
8
])

1
import { shallowRef } from 'vue'
2
import A from './A.vue'
3

4
const currentComp = shallowRef(A)

1
src/
2
├── components/
3
│   ├── TabA.vue
4
│   ├── TabB.vue
5
└── App.vue

1
<template>
2
  <div class="box">
3
    <h3>组件 A</h3>
4
    <p>父组件传值：{{ msg }}</p>
5
    <input v-model="inputVal" placeholder="缓存测试" />
6
    <button @click="emitData">向父传值</button>
7
  </div>
8
</template>
9

10
<script setup lang="ts">
11
const props = defineProps<{
12
  msg: string
13
}>()
14

15
const emit = defineEmits<{
16
  (e: 'send', val: string): void
17
}>()
18

19
const inputVal = $ref('')
20

21
const emitData = () => {
22
  emit('send', '我是A组件的数据')
23
}
24
</script>
25

26
<style scoped>
27
.box { padding: 20px; border: 1px solid #ccc; }
28
</style>

1
<template>
2
  <div class="box">
3
    <h3>组件 B</h3>
4
    <p>父组件传值：{{ msg }}</p>
5
    <textarea v-model="text" placeholder="切换不丢失内容"></textarea>
6
  </div>
7
</template>
8

9
<script setup lang="ts">
10
const props = defineProps<{
11
  msg: string
12
}>()
13

14
const text = $ref('')
15
</script>
16

17
<style scoped>
18
.box { padding: 20px; border: 1px solid #ccc; margin-top:10px }
19
</style>

1
<template>
2
  <!-- Tab切换按钮 -->
3
  <button
4
    v-for="item in tabList"
5
    :key="item.name"
6
    @click="currentComp = item.comp"
7
    :class="{ active: currentComp === item.comp }"
8
  >
9
    {{ item.name }}
10
  </button>
11

12
  <!-- 动态组件 + 缓存 + 传参 + 监听事件 -->
13
  <KeepAlive>
14
    <component
15
      :is="currentComp"
16
      msg="父组件动态下发文本"
17
      @send="handleReceive"
18
    />
19
  </KeepAlive>
20
</template>
21

22
<script setup lang="ts">
23
import { reactive, markRaw, shallowRef } from 'vue'
24
import TabA from './components/TabA.vue'
25
import TabB from './components/TabB.vue'
26

27
// 场景1：组件数组列表 —— 用 markRaw 防止组件被 reactive 代理
28
const tabList = reactive([
29
  {
30
    name: 'A页面',
31
    comp: markRaw(TabA)
32
  },
33
  {
34
    name: 'B页面',
35
    comp: markRaw(TabB)
36
  }
37
])
38

39
// 场景2：单独存放当前组件 —— 用 shallowRef 浅层引用，不做响应式劫持
40
const currentComp = shallowRef(TabA)
41

42
// 接收子组件事件
43
const handleReceive = (val: string) => {
44
  console.log('父收到子组件数据：', val)
45
}
46
</script>
47

48
<style>
49
button.active { background: #409eff; color: #fff; border:none; padding:4px 8px; margin:0 4px }
50
</style>