<template>
  <div>
    {{dataname}}
    {{setupname}}
    <p>Num:{{num}}</p>
    <p>Age:{{age}}</p>
    <button @click="plusOne1()">+</button>
    <button @click="plusOne2()">+</button>    
  </div>
</template>
<script>
import {ref, onMounted} from 'vue'
export default {
  name:'method',
  data(){
    return {
      dataname:'xiaosan',
      num:1
    }
  },
  mounted() {
    console.log("mounted.")
  },
  methods:{
   plusOne1(){
     this.num++
     this.age++
   }
  },

  setup(){
    const setupname =ref('小四')
    const age=ref(18)
    function plusOne2(){
      age.value++ 
      //this.num++     不起作用。 
    }
    onMounted(() => {
    console.log("OnMounted.")
    })
    return {
      setupname,
      age,
      plusOne2
    }
  }
}
</script>