计算属性 computed

最开始在页面上渲染 numB 的时候调用一次：

<template>
  数字A：{{ numA }}
  <br />
  处理后的分数是：{{ numB }}
</template>

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

const numA = ref(100);

const numB = computed(() => {
  console.log("调用了computed");
  return numA.value * 2;
});
</script>

---

之后改变 numA 时候调用一次：（numB依赖于numA）：

<template>
  数字A：{{ numA }}
  <button @click="change">改变</button>
  <br />
  处理后的分数是：{{ numB }}
</template>

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

const numA = ref(100);

const numB = computed(() => {
  console.log("调用了computed");
  return numA.value * 2;
});

function change() {
  numA.value++;
}
</script>

---

子组件用计算属性监听父组件props值的变化：

父组件：将 name 传给子组件

<template>
  <button @click="change">click</button>
  <Child :name="name"></Child>
</template>
<script setup>
import { ref } from "vue";
import Child from "@/components/Child.vue";
let name = ref("Andy");
const change = () => {
  name.value = "aaa";
};
</script>

子组件：子组件监听 name 的变化

<template>
  <div :data="newname"></div>
</template>
<script setup>
import { inject, watch, computed } from "vue";
const props = defineProps({
  name: {
    type: String,
  },
});
const newname = computed(() => {
  console.log(props.name);
  return props.name;
});
</script>

刚开始控制台打印 Andy，点击按钮后打印 aaa