Vue3 + ts 第四篇

ref shallowRef reactive shallowReactive

ref	shallowRef
判断接受的是值还是引用 引用类型调用reactive	只对值类型有响应式，引用五效

reactive	shallowReactive
递归遍历多级对象结构相应	只对第一层保留响应式

<template>
  <div class="layout">
    <header class="header">
      <button class="layout-btn" @click="changeCom('c1')">c1</button>
      <button class="layout-btn" @click="changeCom('c2')">c2</button>
      <button class="layout-btn" @click="changeCom('c3')">c3</button>
    </header>
    <div class="layout-content">
      <component :is="cur"></component>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref ,shallowRef} from "vue";
import c1 from "./com/c1.vue";
import c2 from "./com/c2.vue";
import c3 from "./com/c3.vue";
let cur = shallowRef(c1);
let changeCom = (type: string) => {
  switch (type) {
    case "c1":
      cur.value = c1;
      break;
    case "c2":
      cur.value = c2;
      break;
    case "c3":
      cur.value = c3;
      break;
    default:
      break;
  }
};
</script>
<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-around;
}
.layout {
  width: 60%;
  margin: auto;
  height: 500px;
  display: flex;
  background-color: #ccc;
  flex-direction: column;
  &-btn {
    width: 100px;
    height: 30px;
  }
  &-content {
    flex: 1;
    background-color: #999;
  }
}
</style>

上面案例 使用ref 有警告