vue3 中的计算属性与监听

1 computed函数
- 1.1例子：vue2的写法
- 1.2 vue3中的计算属性的写法
2 watch监听属性（功能与vue2 中的一致）
- 2.1 vue2 的写法
  - 1 简易写法
  - 2 handler写法
- 2.2 vue3中的写法

1 computed函数

1.1例子：vue2的写法

<template >
  <div class="container">
    <div>标题</div>
    <div>{{ msg }}</div>
    <button @click="ClickBtn">点击显示父组件信息</button>
    <br />
    第一个数:<input type="text" v-model="data.firstNum" />
    <br />
    第二个数:<input type="text" v-model="data.scordNum" />
    <div>加起来:{{addNum}}</div>
  </div>
</template>
<script >
import { reactive } from "@vue/reactivity";
name: "tabbar";
export default {
  props: {
    msg: String,
  },
  emits: ["handleBtn"], //组件放出去的事件也需要给在组件内部声明一下
  computed: {   //计算属性
   addNum(){
     return  Number(this.data.firstNum)+Number(this.data.scordNum)
    //  确保相加的是两个数字 而不是单纯的数值相加
   }
  }, 
  setup(props, context) {
    const data = reactive({
      firstNum: 10,
      scordNum: 2,
    });
    console.log(props); //传进来的值在此处可以被打印
    console.log(context);
    //点击组件内按钮 提交信息给父组件
    function ClickBtn() {
      //事件名 参数
      console.log("点击自组件");
      context.emit("handleBtn", "蚌埠住了");
    }
    return {
      ClickBtn,
      data,
    };
  },
};
</script>
<style  lang="less" scoped>
.container {
  margin: 10px;
  background: cornsilk;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>