vue3.0——watch(监听属性)、computed(计算属性)和父传子通信

<template>
  <div class="hello">
    <span>{{ msg }}</span>
    <div></div>
    <span>{{ num }}</span>
    <button @click="add">+</button>
    <span>{{ plusOne }}</span>
  </div>
</template>

<script>
import { ref, watch, computed } from "vue";
export default {
  name: "HelloWorld",
  props: {
    msg: {
      type: String,
      default: () => "默认值",
    },
  },
  setup(props) {
    const num = ref(0);
    const count = ref(1);
    watch(
      () => props.msg,//需要监听的信息
      (count, prevCount) => {
        console.log(count);//新值
        console.log(prevCount);//旧值
      }
    );
    function add() {
      num.value += 1;
    }
    const plusOne = computed({//返回一个 ref 对象。
      get: () => count.value + 1,//return返回的标准值
      set: (val) => {
        count.value = val - 1;
      },
    });

    plusOne.value = 1;//开启计算
    console.log(count.value); // 0
    return {
      num,
      add,
      plusOne,//1
    };
  },
};
</script>
<style scoped lang="less">
</style>