vue3--setUp以及ref的使用

<template>
  <h1>计数统计：{{ countRef }}</h1>
  <h2><button @click="inCreate">数量加1</button></h2>
  <h2><button @click="inDelete">数量-1</button></h2>
</template>
<!-- 
  setup：this指向undefined；ref指向对象（实现页面渲染）；setup会在生命周期钩子前调用；建议：如果需要使用ref，变量名后加Ref



 -->
<script>
import { ref } from 'vue';

function user() {
  let countRef = ref(0);
  const inCreate = () => {
    countRef.value++;
    console.log(this)//undefined
    console.log(countRef);//打印对象
  };
  const inDelete = () => {
    countRef.value--;
  };
  return {
    countRef,
    inCreate,
    inDelete
  }
}


export default {
  setup() {
    let countRef = user();
    console.log(countRef,'zzz')
    return {
      ...countRef,
      
    }
  }
}
</script>

<style>

</style>

　　

计数统计：{{ countRef }}

数量加1

数量-1