7.computed函数

(1)第一种情况: count2根据count计算得到

<template>
  <div style="margin: 30px">
    {{ count }}  
  </div>
  <div style="margin: 30px">
    {{ count2 }}  
  </div> 
</template>
<script>
import { computed, ref, watch } from "vue";
export default {
  setup(props) {
    const count = ref(1);
    const count2 = computed(() => count.value + 10); 
    return {
      count,
      count2, 
    };
  },
};
</script>

(2) 第二种情况: count2根据count得到, 修改count2的同时也修改count的值

<template>
  <div style="margin: 30px">
    {{ count }}
  </div>
  <div style="margin: 30px">
    {{ count2 }}
  </div>
</template>
<script>
import { computed, ref, watch } from "vue";
export default {
  setup(props) {
    const count = ref(1);
    const count2 = computed({
      get: () => count.value + 1,
      set: (val) => {
        count.value = val - 1;
      },
    });
    setTimeout(()=> {
      count2.value = 10;
    },2000)
    return {
      count,
      count2,
    };
  },
};
</script>