vue3.0各种基本composition api

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ myObj.name }}</h2>
    <div></div>
    <van-button @click.stop="onAddCount" square type="primary">单次累加:（{{ count }}）</van-button>
    <div style="margin-top: 20px;"></div>
    <van-button @click.stop="onAddDoubleCount" square type="primary">双次累加:（{{ doubleCount }}）</van-button>
  </div>
</template>

<script>
import { otherApi } from '@/api/userApi'
import {
  ref, // 原始类型（基本类型）
  reactive, // 对象类型
  toRefs, // 保证 reactive 对象属性保持响应性
  computed, // 计算属性
  watch, // 监听数据
  watchEffect, // 监听响应式数据
  onMounted,
  onRenderTracked,
  onRenderTriggered,
  getCurrentInstance,
} from 'vue'

export default {
  name: 'HelloWorld',
  props: {
    msg: String,
  },
  setup(props) {
    const { ctx } = getCurrentInstance()
    onMounted(() => {})
    // onRenderTracked((e) => {
    //   console.log(e)
    // })
    // onRenderTriggered((e) => {
    //   console.log(e)
    // })

    let count = ref(0)
    let doubleCount = ref(0)
    const myObj = reactive({
      name: 'xs',
    })

    // 监听单个数值
    watch(count, (val, prevVal) => {
      //console.log(count.value, val)
    })

    // 监听双数值
    watch(doubleCount, (val, prevVal) => {
      //console.log(`当前doubleCount：${val}，先前doubleCount：${prevVal}`)
    })

    // 监听对象
    watch(
      () => {
        return myObj.name
      },
      (val, prevVal) => {
        console.log(`监听myObj对象：${val}, ${prevVal}`)
      }
    )

    watchEffect(() => {
      //console.log(`watchEffect：${myObj.name}`)
    })

    // 改变单数值
    const onAddCount = () => {
      myObj.name = 'uy'
      count.value++
    }

    // 改变双数值
    const onAddDoubleCount = () => {
      doubleCount.value += 2
    }

    // 获取数据
    const loadData = async () => {
      try {
        let res = await otherApi.fetchAreaAll()
        console.log(res)
      } catch (error) {}
    }

    //loadData()

    return {
      count,
      myObj,
      doubleCount,
      onAddCount,
      onAddDoubleCount,
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>