04-Vue3响应性

1. reactive()

<template>
  <div class="greetings">
    <h1>{{ count }}</h1>
    <h1>{{ double }}</h1>
    <button type="button" @click="increase">button</button>
  </div>
</template>

<script setup lang="ts">
  import { computed, ref } from "vue";

  const count = ref(0);
  const increase = () => {
    count.value++;
  };
  const double = computed(() => count.value * 2);
</script>

<template>
  <div class="greetings">
    <h1>{{ data.count }}</h1>
    <h1>{{ data.double }}</h1>
    <button type="button" @click="data.increase">button</button>
  </div>
</template>

<script setup lang="ts">
  import {computed, reactive, readonly, ref} from "vue";

  let data = reactive({
    count: 1,
    increase: () => {
      data.count++;
    },
    double: computed(() => data.count * 2)
  });
</script>

<template>
  <div class="greetings">
    <h1>{{ data.count }}</h1>
    <h1>{{ data.double }}</h1>
    <button type="button" @click="data.increase">button</button>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, readonly, ref } from "vue";

interface DataProps {
  count: number;
  double: number;
  increase: () => void;
}

let data: DataProps = reactive({
  count: 1,
  increase: () => {
    data.count++;
  },
  double: computed(() => data.count * 2),
});
</script>

2. 响应式状态解构

• 使用大型响应式对象，使用 ES6 解构来获取我们想要的 property 时，很遗憾，使用解构的 property 的响应性都会丢失
• 官方文档解释：当 ref 作为渲染上下文上的 property 返回并可以在模板中被访问时，它将自动展开为内部值。不需要在模板中追加 .value

const data:DataProps  = reactive({
    count: 1,
    increase:() => {data.count++},
    double: computed(() => data.count *2),
})
const state = toRefs(data);
return {
    ...state
}