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>