vue3的setUp语法

<!--vue setupApi 语法演示-->
<template>
 <view class="content">
  <image class="logo" src="/static/logo.png"></image>
  <view class="text-area">
   <view class="title">{{data.title}} <button type="default" @click="setDataTitle()">改变reactive定义的title</button> </view>
   <view>{{title}}  <button type="default" @click="setTitle()">改变ref定义的title</button> </view>
   <view>{{num}}</view>

   <dome :title='title' v-model="state.name" v-model:age="state.age" @change='change'></dome>

   <button type="default" @click="setColor()">改变ref定义的color</button>
   <button @click="popShow">111111</button>
      <u-popup v-model="state.show">
        <view>出淤泥而不染，濯清涟而不妖{{state.show}}</view>
      </u-popup>
      <u-input v-model="formData.value" :type="formData.type" :border="formData.border" />
<!--      <u-button @click="show = true">打开</u-button>-->
  </view>
 </view>
</template>

<script setup>
 import {reactive,ref,computed,watch,defineComponent,watchEffect,defineProps ,defineEmits } from 'vue' //按需引入vueApi
 import {onReachBottom,onShow,onLoad,} from '@dcloudio/uni-app'//按需引入uni-appApi
 import dome from '@/components/dome/dome.vue'
 import { useStore } from 'vuex'
 const store = useStore()
 // defineComponent({
 //   components: {
 //    dome
 //   }
 // })
 onLoad((option)=>{
  console.log(11111111111,'onLoad')
 })
 onShow(() => {
      console.log(11111111111,'onShow')
  // 业务逻辑
 })
  const formData = reactive({
    value: '',
    type: 'text',
    border: true
  })
   const state = reactive({
        name: 'Jerry',
        age: 20,
        show:false
   })
  const show = ref(false)
  //打开uni弹出框
  const popShow = (()=>{
    state.show = true
    show.value = true
  })
 //reactive 用来定义数组和对象
 const data = reactive({
        title:999,
 });
 //定义颜色
 const color = ref('red');
 //修改reactive定义的值
 const setDataTitle = (()=>{
  data.title = 1111
 })
 //修改ref定义的值
 const setTitle = (()=>{
  title.value = 1111
 })
 //ref定义的数据：在js中操作数据需要.value，template模板中读取数据不需要.value：
 const title = ref(999);
  let setColor = (()=>{
    color.value = color.value=='blue'?'red':'blue'
  })
 // 计算属性-简写
 const num = computed(()=>{
  return title.value+data.title
 })
 // watch属性 监听ref 监听多个[1,2]   
  watch(title, (newValue, oldValue) => { 
      console.log('v1====', newValue, oldValue)
    }, {immediate:true},
 )
 //watch 属性 监听reactive  监听单个() =>data.title  监听数组 ()=>[...list] 监听vuex()=>store.state.count
  watch(data, (newValue, oldValue) => {
  console.log('v1====', newValue, oldValue);
  })
 // watch的套路是：既要指明监视的属性，也要指明监视的回调。
 // watchEffect的套路是：不用指明监视哪个属性，监视的回调中用到哪个属性，那就监视哪个属性。
   watchEffect(() => {
      console.log(data.title)
      console.log(title)
  })
  //子组件触发的方法
    let change = (()=>{
  console.log( store.state.id,'this.$store.state');
     data.title = '子组件点击'
 })
 // change((value)=>{
 //   console.log(value)
</script>

<style scoped>
 .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
 }

 .logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
 }

 .text-area {
  /* display: flex; */
  justify-content: center;
 }

 .title {
  font-size: 36rpx;
  color: v-bind(color);
 }
</style>