vue3.0的使用心得

记录：

代码：

<template>
  <div>
    结果：
    <input
      type="text"
      :value="ret"
    >
    <button @click="add">添加</button>
    <br>
    <input
      type="text"
      v-model="num"
    >
    <button @click="addNum">添加指定数字</button>
    <br>
    信息：<span>{{tip}}</span>
  </div>
</template>
<script>
import { ref, onMounted, watch,computed } from 'vue'
export default {
  props: {
    msg: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      num: 0
    }
  },
  methods: {
    /**
     * 添加
     */
    add() {
      this.addMth();
      console.log(this.ret)
    },
    /**
     * 添加指定数字
     */
    addNum() {
      this.addNumMth(this.num);
      console.log(this.ret)
    }
  },
  /**
   * 公共的方法可以放在这里还有一些公共的变量
   */
  setup(props, context) {
    console.log(props, context)
    //这里的ref如果去掉的话，每次添加就不能再记住之前的值，就不能再成为一个响应式的变量，可以去掉ref试试变化
    let ret = ref(1);

    //这里面可以放钩子
    onMounted(() => {
      console.log('欢迎使用计算器')
    })

    //这里可以放监听
    watch(ret, (value, oldvalue) => {
      console.log(`ret被修改了，之前是${oldvalue},现在是${value}`)
    })

    //使用计算属性做的一个提示信息字段
    const tip =  computed(()=>`小明应该支付${ret.value}元`)

    // 这里返回的任何内容都可以用于组件的其余部分
    const addMth = () => {
      ret.value++;
    }

    //带参数的方法使用方法
    const addNumMth = (num) => {
      ret.value += parseFloat(num);
    }

    return {
      addMth,
      addNumMth,
      ret,
      tip
    }
  }
}
</script>
<style lang='scss' scoped>
</style>